{% extends "base.html" %}
{% from "_ui.html" import page_head, empty %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<style>
  .stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
  @media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 650px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 18px; display: flex; align-items: flex-start; gap: 14px; }
  .stat-ic { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 1.3rem; }
  .stat-ic.i1 { background: var(--pill-admin-bg); color: var(--pill-admin-fg); }
  .stat-ic.i2 { background: var(--ph-ic-bg); color: var(--primary-ink); }
  .stat-ic.i3 { background: var(--pill-lead-bg); color: var(--pill-lead-fg); }
  .stat-ic.i4 { background: var(--pill-user-bg); color: var(--pill-user-fg); }
  .stat-ic.i5 { background: var(--chip-bg); color: var(--link); }
  .stat-num { font-size: 1.7rem; font-weight: 700; color: var(--heading); line-height: 1.15; }
  .stat-label { color: var(--muted); font-size: .85rem; margin-top: 2px; }
  .kt-bar-wrap { background: var(--line-2); border-radius: 999px; height: 10px; overflow: hidden; }
  .kt-bar { background: var(--ok); height: 100%; border-radius: 999px 0 0 999px; }
  .kt-summary { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
  .kt-summary .big { font-size: 1.3rem; font-weight: 700; color: var(--heading); }
  .legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
  .legend span.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
  .dot.loaded { background: var(--ok); }
  .dot.empty { background: var(--line-strong); }
  .mini-bar-wrap { background: var(--line-2); border-radius: 4px; height: 8px; overflow: hidden; width: 100%; }
  .mini-bar { background: var(--link); height: 100%; }
</style>

{{ page_head('grid', 'Dashboard', 'An overview of what is stored in the portal.') }}

<div class="stat-grid">
  <div class="stat-card"><span class="stat-ic i2">{{ icon('cap') }}</span><div><div class="stat-num">{{ stats.colleges }}</div><div class="stat-label">Total Colleges</div></div></div>
  <div class="stat-card"><span class="stat-ic i1">{{ icon('users') }}</span><div><div class="stat-num">{{ stats.faculty }}</div><div class="stat-label">Total Faculties</div></div></div>
  <div class="stat-card"><span class="stat-ic i3">{{ icon('shield') }}</span><div><div class="stat-num">{{ stats.leads }}</div><div class="stat-label">Total Leads</div></div></div>
  <div class="stat-card"><span class="stat-ic i4">{{ icon('user') }}</span><div><div class="stat-num">{{ stats.users }}</div><div class="stat-label">Total Users</div></div></div>
  <div class="stat-card"><span class="stat-ic i5">{{ icon('file-text') }}</span><div><div class="stat-num">{{ stats.kts }}</div><div class="stat-label">Total KT Entries</div></div></div>
</div>

<div class="card">
  <div class="card-head"><h3>{{ icon('bar-chart') }} Colleges with KT loaded</h3></div>
  <div class="card-body">
    {% if stats.colleges %}
    <div class="kt-summary">
      <span class="big">{{ stats.colleges_with_kt }} of {{ stats.colleges }}</span>
      <span class="muted">colleges have at least one KT loaded</span>
    </div>
    <div class="kt-bar-wrap"><div class="kt-bar" style="width:{{ (stats.colleges_with_kt / stats.colleges * 100)|round(1) }}%"></div></div>
    <div class="legend" style="margin-top:10px">
      <span><span class="dot loaded"></span>{{ stats.colleges_with_kt }} loaded</span>
      <span><span class="dot empty"></span>{{ stats.colleges_without_kt }} not loaded yet</span>
    </div>
    {% else %}
    {{ empty('cap', 'No colleges added yet.') }}
    {% endif %}
  </div>
  {% if rows %}
  <div class="card-body flush">
    <div class="table-wrap">
      <table class="grid">
        <thead><tr><th>College</th><th style="width:45%">KT loaded</th><th class="ctr" style="width:90px">Count</th></tr></thead>
        <tbody>
          {% set top = rows[0].kt_count if rows[0].kt_count else 1 %}
          {% for c in rows %}
          <tr>
            <td><a class="cell" href="{{ url_for('college_kt_page', cid=c.id) }}" target="_blank" rel="noopener noreferrer">{{ icon('cap') }}<strong>{{ c.name }}</strong></a></td>
            <td><div class="mini-bar-wrap"><div class="mini-bar" style="width:{{ (c.kt_count / top * 100)|round(1) if top else 0 }}%"></div></div></td>
            <td class="ctr"><span class="pill {{ 'zero' if not c.kt_count }}">{{ c.kt_count }}</span></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}