{% extends "base.html" %}
{% block title %}Admin — psyc{% endblock %}
{% block content %}
<section class="panel">
  <div class="panel-head">
    <h1>Admin Control Center</h1>
    <span class="count">{{ members|length }} member{{ '' if members|length == 1 else 's' }} enrolled</span>
  </div>
  <p class="page-intro">The secured zone — TOTP-gated, hidden from the nav. Manage who can get in here, and (next) watch the live infrastructure.</p>
  <div class="verdict verdict-clean">✓ Admin session active — expires after 60 min idle.</div>
</section>

<section class="panel">
  <div class="panel-head">
    <h2>Access Control</h2>
    <span class="count">{{ members|length }} enrolled</span>
  </div>
  <p class="page-intro">Every member enrolls their own authenticator — no shared secret. To offboard someone, revoke their slot; everyone else keeps working, no re-enrollment.</p>

  {% if new_qr %}
  <div class="enroll-card">
    <div class="gate-qr-frame" style="margin:0;"><img class="gate-qr" src="{{ new_qr }}" alt="enrollment QR"></div>
    <div class="enroll-body">
      <h3>Enroll “{{ new_label or 'member' }}”</h3>
      <p>Have them scan this <strong>once</strong> with Google&nbsp;Authenticator / Authy. It won't be shown again — reload to hide it.</p>
    </div>
  </div>
  {% endif %}

  <table class="ledger">
    <thead><tr><th>Member</th><th>Enrolled</th><th>Last used</th><th></th></tr></thead>
    <tbody>
    {% for m in members %}
      <tr class="ledger-row">
        <td><strong>{{ m.label }}</strong></td>
        <td class="lg-ts">{{ (m.created_at or '')[:16] | replace('T', ' ') }}</td>
        <td class="lg-ts">{{ ((m.last_used or '')[:16] | replace('T', ' ')) or '—' }}</td>
        <td>
          <form method="post" action="/admin/members/{{ m.id }}/revoke" class="queue-action"
                onsubmit="return confirm('Revoke {{ m.label }}? Their codes stop working immediately.');">
            <button type="submit" class="btn btn-reject">revoke</button>
          </form>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>

  <form method="post" action="/admin/members" class="lookup-form" style="margin-top:14px;">
    <input type="text" name="label" placeholder="new member name (e.g. alice)" class="lookup-input" maxlength="40">
    <button type="submit" class="btn btn-enforce">+ Add member</button>
  </form>
</section>

<section class="panel">
  <div class="panel-head">
    <h2>Infrastructure</h2>
    <a href="/admin/docker" class="lg-sub">open topology →</a>
  </div>
  <div class="admin-grid">
    <a href="/admin/docker" class="admin-tile admin-tile-link">
      <h2>Docker topology</h2>
      <p>Live container roster + network map, read-only via socket-proxy. Click to open.</p>
    </a>
  </div>
</section>
{% endblock %}