{% extends "base.html" %}
{% block title %}Dashboard — Website Checker{% endblock %}
{% block content %}
<div class="page-header">
  <h1 class="page-title">Dashboard</h1>
  <span class="text-muted" id="today-date"></span>
</div>

<!-- KPI Cards -->
<div class="kpi-grid">
  <div class="kpi-card">
    <div class="kpi-value">{{ stats.total_users }}</div>
    <div class="kpi-label">Total Users</div>
  </div>
  <div class="kpi-card kpi-accent">
    <div class="kpi-value">{{ stats.active_today }}</div>
    <div class="kpi-label">Active Today</div>
  </div>
  <div class="kpi-card">
    <div class="kpi-value">{{ stats.total_sites }}</div>
    <div class="kpi-label">Total Sites</div>
  </div>
</div>

<!-- Per-user completion table -->
<div class="card mt-4">
  <div class="card-header">
    <h2 class="card-title">Today's Completion</h2>
    <button class="btn btn-ghost btn-sm" onclick="location.reload()">↻ Refresh</button>
  </div>
  <table class="table">
    <thead>
      <tr>
        <th>User</th>
        <th>Checked</th>
        <th>Total</th>
        <th style="width:200px">Progress</th>
        <th>%</th>
      </tr>
    </thead>
    <tbody>
      {% for u in stats.user_stats %}
      <tr>
        <td>{{ u.full_name }}</td>
        <td>{{ u.checked_count }}</td>
        <td>{{ u.total_sites }}</td>
        <td>
          <div class="progress">
            <div class="progress-bar {% if (u.pct_complete or 0) == 100 %}progress-success{% elif (u.pct_complete or 0) >= 50 %}progress-warn{% else %}progress-danger{% endif %}"
                 style="width: {{ u.pct_complete or 0 }}%"></div>
          </div>
        </td>
        <td><strong>{{ u.pct_complete or 0 }}%</strong></td>
      </tr>
      {% else %}
      <tr><td colspan="5" class="text-center text-muted">No user data for today.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<script>
  document.getElementById('today-date').textContent =
    new Date().toLocaleDateString('en-US', {weekday:'long', year:'numeric', month:'long', day:'numeric'});
  // Auto-refresh every 60 seconds
  setTimeout(() => location.reload(), 60000);
</script>
{% endblock %}