{% extends "base.html" %}
{% block content %}
<div class="max-w-6xl">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;">
<div>
<a href="{{ url_for('teams.manage_team', team_id=team['id']) }}" style="color:#6b7280;text-decoration:none;font-size:0.875rem;margin-bottom:0.5rem;display:inline-block;">
← Back to {{ team['name'] }}
</a>
<h1>Team Analytics</h1>
<p class="text-muted">Aggregated across all team sites</p>
</div>
<a href="{{ url_for('teams.manage_team', team_id=team['id']) }}" class="btn btn-secondary">Manage Team</a>
</div>
<!-- Summary Cards -->
<div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:1rem;margin-bottom:2rem;">
<div class="card">
<div style="font-size:0.875rem;color:#6b7280;">Total Submissions</div>
<div style="font-size:2.5rem;font-weight:700;margin-top:0.5rem;">{{ analytics['total_submissions'] }}</div>
<div style="font-size:0.75rem;color:#10b981;margin-top:0.25rem;">all time</div>
</div>
<div class="card">
<div style="font-size:0.875rem;color:#6b7280;">This Month</div>
<div style="font-size:2.5rem;font-weight:700;margin-top:0.5rem;">{{ analytics['this_month_submissions'] }}</div>
<div style="font-size:0.75rem;color:#6b7280;margin-top:0.25rem;">submissions</div>
</div>
<div class="card">
<div style="font-size:0.875rem;color:#6b7280;">Team Sites</div>
<div style="font-size:2.5rem;font-weight:700;margin-top:0.5rem;">{{ analytics['sites'] }}</div>
<div style="font-size:0.75rem;color:#6b7280;margin-top:0.25rem;">active forms</div>
</div>
<div class="card">
<div style="font-size:0.875rem;color:#6b7280;">Spam Filtered</div>
<div style="font-size:2.5rem;font-weight:700;margin-top:0.5rem;">{{ analytics['total_spam'] }}</div>
<div style="font-size:0.75rem;color:#ef4444;margin-top:0.25rem;">blocked</div>
</div>
</div>
<!-- Top Sites -->
<div class="card" style="margin-bottom:2rem;">
<h2 style="font-size:1.25rem;margin-bottom:1rem;">Top Sites by Submissions</h2>
{% if analytics['top_sites'] %}
<div style="display:grid;gap:0.75rem;">
{% for site in analytics['top_sites'] %}
<div style="display:flex;justify-content:space-between;align-items:center;padding:0.75rem;background:#f9fafb;border-radius:0.5rem;">
<div>
<div style="font-weight:600;">{{ site['name'] }}</div>
<div style="font-size:0.875rem;color:#6b7280;">
<a href="{{ url_for('user_sites.edit_site', site_id=site['id']) }}" style="color:#0066ff;text-decoration:none;">View Site →</a>
</div>
</div>
<div style="text-align:right;">
<div style="font-size:1.5rem;font-weight:700;">{{ site['submissions'] }}</div>
<div style="font-size:0.75rem;color:#6b7280;">submissions</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div style="text-align:center;padding:2rem;color:#6b7280;">
<p>No sites in this team yet.</p>
<a href="{{ url_for('teams.manage_team', team_id=team['id']) }}" class="btn" style="margin-top:1rem;">Add Your First Site</a>
</div>
{% endif %}
</div>
<!-- Monthly Trend -->
<div class="card" style="margin-bottom:2rem;">
<h2 style="font-size:1.25rem;margin-bottom:1rem;">Monthly Trend</h2>
<div style="display:flex;align-items:flex-end;gap:0.5rem;height:200px;padding:1rem 0;">
{% set max_subs = analytics['monthly_trend']|map(attribute='submissions')|max or 1 %}
{% for item in analytics['monthly_trend'] %}
{% set height = (item['submissions'] / max_subs * 100) if max_subs > 0 else 0 %}
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative;">
<div style="position:absolute;bottom:calc({{ height }}% + 5px);font-size:0.75rem;font-weight:600;color:#0066ff;">
{{ item['submissions'] }}
</div>
<div style="width:100%;background:#0066ff;border-radius:0.25rem 0.25rem 0 0;height:{{ height }}%;min-height:2px;transition:height 0.3s;"></div>
<div style="font-size:0.625rem;color:#6b7280;margin-top:0.25rem;text-align:center;">
{{ item['month'] }}
</div>
</div>
{% endfor %}
</div>
</div>
<!-- Daily Activity (Last 30 Days) -->
<div class="card">
<h2 style="font-size:1.25rem;margin-bottom:1rem;">Daily Activity (Last 30 Days)</h2>
{% if analytics['daily_data'] %}
<div style="overflow-x:auto;">
<table style="width:100%;border-collapse:collapse;">
<thead>
<tr style="border-bottom:2px solid #e5e7eb;">
<th style="text-align:left;padding:0.75rem;font-size:0.75rem;color:#6b7280;text-transform:uppercase;">Date</th>
<th style="text-align:right;padding:0.75rem;font-size:0.75rem;color:#6b7280;text-transform:uppercase;">Submissions</th>
<th style="text-align:right;padding:0.75rem;font-size:0.75rem;color:#6b7280;text-transform:uppercase;">Spam</th>
</tr>
</thead>
<tbody>
{% for day in analytics['daily_data']|reverse %}
<tr style="border-bottom:1px solid #f3f4f6;">
<td style="padding:0.75rem;">{{ day['day'] }}</td>
<td style="padding:0.75rem;text-align:right;font-weight:600;">{{ day['subs'] }}</td>
<td style="padding:0.75rem;text-align:right;color:#ef4444;">{{ day['spam'] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div style="text-align:center;padding:2rem;color:#6b7280;">
<p>No daily activity data yet.</p>
<p style="font-size:0.875rem;margin-top:0.5rem;">Data will appear here as your team receives submissions.</p>
</div>
{% endif %}
</div>
</div>
{% endblock %}