{% extends "base.html" %}
{% block title %}Design Vote Tally{% endblock %}

{# Admin-only: which design are active users currently keeping? #}

{% block content %}
<div class="row mb-4">
  <div class="col">
    <h2 class="mb-1"><i class="bi bi-bar-chart"></i> Design Vote Tally</h2>
    <div class="text-muted">Which web portal design each active user is currently using.</div>
  </div>
</div>

<div class="row g-3 mb-4">
  <div class="col-12 col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <div class="text-muted small">Classic design</div>
        <div class="fs-2 fw-bold">{{ tally.classic }}</div>
        <div class="text-muted small">
          {{ ((tally.classic / total * 100) | round(1)) if total else 0 }}% of {{ total }} active users
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <div class="text-muted small">New design</div>
        <div class="fs-2 fw-bold">{{ tally.modern }}</div>
        <div class="text-muted small">
          {{ ((tally.modern / total * 100) | round(1)) if total else 0 }}% of {{ total }} active users
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <div class="text-muted small">Total active users</div>
        <div class="fs-2 fw-bold">{{ total }}</div>
        <div class="text-muted small">Every account defaults to classic</div>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header fw-semibold"><i class="bi bi-people me-1"></i>Breakdown by role</div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead class="table-light">
          <tr><th>Role</th><th>Design</th><th class="text-end">Users</th></tr>
        </thead>
        <tbody>
          {% for role, theme, count in by_role %}
          <tr>
            <td>{{ role.replace('_',' ')|title }}</td>
            <td>{{ 'New design' if theme == 'modern' else 'Classic design' }}</td>
            <td class="text-end fw-semibold">{{ count }}</td>
          </tr>
          {% else %}
          <tr><td colspan="3" class="text-center text-muted py-4">No active users.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}