{% extends "admin/layout.html" %}
{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block topbar_actions %}
  <a href="/admin/clients" class="btn btn-primary">+ Add Client</a>
{% endblock %}

{% block content %}

<!-- Stats -->
<div class="stats-grid">
  <div class="stat-card">
    <div style="display:flex;align-items:flex-start;justify-content:space-between;">
      <div>
        <div class="stat-label">Active Clients</div>
        <div class="stat-value">{{ stats.active_clients }}</div>
        <div class="stat-sub">of {{ stats.total_clients }} total</div>
      </div>
      <div class="stat-icon">👥</div>
    </div>
  </div>
  <div class="stat-card">
    <div style="display:flex;align-items:flex-start;justify-content:space-between;">
      <div>
        <div class="stat-label">Reports Granted</div>
        <div class="stat-value">{{ stats.total_grants }}</div>
        <div class="stat-sub">across all clients</div>
      </div>
      <div class="stat-icon">📄</div>
    </div>
  </div>
  <div class="stat-card">
    <div style="display:flex;align-items:flex-start;justify-content:space-between;">
      <div>
        <div class="stat-label">Downloads Today</div>
        <div class="stat-value">{{ stats.today_downloads }}</div>
        <div class="stat-sub">by all clients</div>
      </div>
      <div class="stat-icon">⬇️</div>
    </div>
  </div>
</div>

<!-- Recent Activity -->
<div class="card">
  <div class="card-header">
    <span class="card-title">Recent Activity</span>
    <a href="/admin/audit" class="btn btn-ghost btn-sm">View All →</a>
  </div>
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>User</th>
          <th>Action</th>
          <th>Report</th>
          <th>Time</th>
        </tr>
      </thead>
      <tbody>
        {% for a in stats.recent_activity %}
        <tr>
          <td style="font-weight:600;color:var(--ink);">{{ a.name }}</td>
          <td>
            <span class="badge {% if 'DOWNLOAD' in a.action %}badge-green
                              {% elif a.action=='LOGIN' %}badge-gold
                              {% else %}badge-muted{% endif %}">
              {{ a.action }}
            </span>
          </td>
          <td style="color:var(--muted);font-size:12px;">{{ a.report or '—' }}</td>
          <td style="color:var(--muted);font-size:11px;">{{ a.time }}</td>
        </tr>
        {% else %}
        <tr>
          <td colspan="4">
            <div class="empty">
              <div class="empty-icon">📋</div>
              <p>No activity yet.</p>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% endblock %}