<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>TOP SECRET // AGENT INDEX</title>
  <link rel="stylesheet" href="/static/style.css">
  <style>
    /* Container */
    .cabinet{
      background: linear-gradient(180deg, var(--paper), var(--paper-deep));
      border-radius: 16px;
      box-shadow:
        0 20px 60px var(--shadow),
        inset 0 0 0 2px rgba(0,0,0,.15);
      position: relative;
      padding: 24px;
    }

    .topbar{
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: start;
      padding-bottom: 16px;
      border-bottom: 1px dashed rgba(0,0,0,.35);
      margin-bottom: 18px;
    }

    /* Cards */
    .rolodex{
      margin-top: 18px;
      padding: 18px;
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(0,0,0,.18);
      border-radius: 16px;
      position: relative;
    }

    /* Stamp */
    .stamp{
      position: absolute;
      right: 136px;
      top: 16px;
      transform: rotate(8deg);
      border: 3px solid var(--stamp);
      color: var(--stamp);
      padding: 10px 12px;
      border-radius: 10px;
      text-transform: uppercase;
      letter-spacing: .14em;
      font-weight: 900;
      font-size: 12px;
      background: rgba(255,255,255,.18);
      mix-blend-mode: multiply;
      user-select: none;
      pointer-events: none;
    }

    .cards{
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 12px;
    }

    /* Each card looks like an index card with a tab */
    .card{
      position: relative;
      background: linear-gradient(180deg, var(--card), var(--card-deep));
      border: 1px solid rgba(0,0,0,.2);
      border-radius: 14px;
      box-shadow: 0 10px 22px rgba(0,0,0,.22);
    }

    .tab{
      position: absolute;
      top: 0;
      right: 18px;
      transform: translateY(-35%);
      background: linear-gradient(180deg, #fff4cf, #f0e0ab);
      border: 1px solid rgba(0,0,0,.22);
      border-radius: 10px 10px 10px 10px;
      padding: 8px 10px;
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      box-shadow: 0 10px 16px rgba(0,0,0,.16);
      user-select: none;
    }

    .card a{
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 12px;
      padding: 18px 14px 14px 14px;
      color: inherit;
      text-decoration: none;
    }
    .card a:hover{
      background: rgba(255,255,255,.12);
    }

    .photo{
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(0,0,0,.18);
      background: rgba(255,255,255,.18);
      height: 92px;
      width: 92px;
    }
    .photo img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      filter: contrast(1.02) saturate(.95);
    }

    .meta{
      display: grid;
      gap: 6px;
      align-content: start;
    }

    .headline{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: baseline;
      padding-right: 92px; /* room for the tab */
    }

    .codename{
      font-size: 14px;
      font-weight: 900;
    }
    .name{
      font-size: 12px;
      color: rgba(0,0,0,.8);
      letter-spacing: .08em;
    }

    .row{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px 12px;
      padding-top: 2px;
    }

    .kv{
      border-bottom: 1px dotted rgba(0,0,0,.22);
      padding-bottom: 6px;
      min-height: 34px;
    }
    .k{
      font-size: 9px;
      letter-spacing: .14em;
      color: rgba(0,0,0,.65);
    }
    .v{
      margin-top: 4px;
      font-size: 12px;
      color: rgba(0,0,0,.92);
      word-break: break-word;
    }

    .tagline{
      margin-top: 6px;
      font-size: 11px;
      color: rgba(0,0,0,.72);
      letter-spacing: .02em;
      text-transform: none;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      line-height: 1.4;

      /* comedic “redaction” highlight effect */
      background: linear-gradient(transparent 62%, rgba(0,0,0,.08) 0);
      display: inline;
    }

    /* Footer actions */
    .footer{
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding-top: 16px;
      margin-top: 18px;
      border-top: 1px dashed rgba(0,0,0,.35);
      font-size: 12px;
      color: rgba(0,0,0,.76);
    }

    .btn-like{
      display: inline-block;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(0,0,0,.25);
      background: rgba(255,255,255,.15);
      text-transform: uppercase;
      letter-spacing: .12em;
      font-weight: 700;
      font-size: 11px;
      cursor: pointer;
    }

    form{ margin: 0; }

    /* Responsive */
    @media (max-width: 860px){
      .topbar{ grid-template-columns: 1fr; }
      .bureau{ justify-items: start; }
      .warning{ text-align: left; max-width: 100%; }
      .card a{ grid-template-columns: 76px 1fr; }
      .photo{ width: 76px; height: 76px; }
      .row{ grid-template-columns: 1fr; }
      .headline{ padding-right: 0; }
      .tab{ right: 12px; }
      .stamp { right: 16px; top: 100px; }
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="cabinet">
      <div class="topbar">
        <div class="title">
          <h1 class="typewriter">TOP SECRET // AGENT INDEX</h1>
          <div class="subtitle typewriter">
            Radiant Gamut Bureau
          </div>
        </div>

        <div class="bureau">
          <div class="logo" aria-label="Bureau logo">
            <img src="/static/img/rgb.png" alt="Bureau Seal">
          </div>

          <div class="warning typewriter">
            <strong>WARNING:</strong> THE FOLLOWING INFORMATION IS STRICTLY CONFIDENTIAL.
            UNAUTHORIZED ACCESS OR DISSEMINATION IS PUNISHABLE BY LAW.
          </div>

          <div class="stamp typewriter">INDEX</div>
        </div>
      </div>

      <div class="rolodex">
        <ul class="cards">
          {% for agent in agents %}
            {% set key = agent.codename %}
            <li class="card">
              <div class="tab typewriter">
                {{ agent.status|default("UNKNOWN")|upper }}
              </div>

              <a href="/agent/{{ key|urlencode }}">
                <div class="photo">
                  <img src="/static/photos/{{ agent.photo|default('default.png') }}" alt="Agent photo">
                </div>

                <div class="meta">
                  <div class="headline typewriter">
                    <div class="codename">{{ agent.codename|default("UNKNOWN")|upper }}</div>
                    <div class="name">({{ agent.name|default("UNKNOWN")|upper }})</div>
                  </div>

                  <div class="row">
                    <div class="kv">
                      <div class="k typewriter">OCCUPATION</div>
                      <div class="v typewriter">{{ agent.occupation|default("—")|upper }}</div>
                    </div>

                    <div class="kv">
                      <div class="k typewriter">ALLEGIANCE</div>
                      <div class="v typewriter">{{ agent.allegiance|default("—")|upper }}</div>
                    </div>

                    <div class="kv">
                      <div class="k typewriter">THREAT LEVEL</div>
                      <div class="v typewriter">{{ agent.threat_level|default("—")|upper }}</div>
                    </div>
                  </div>
                </div>
              </a>
            </li>
          {% else %}
            <li class="card">
              <a href="#" onclick="return false;">
                <div class="photo"></div>
                <div class="meta">
                  <div class="headline typewriter">
                    <div class="codename">NO ENTRIES</div>
                    <div class="name">(THE BUREAU INSISTS THIS IS “FINE.”)</div>
                  </div>
                  <div class="row">
                    <div class="kv">
                      <div class="k typewriter">STATUS</div>
                      <div class="v typewriter">EMPTY</div>
                    </div>
                    <div class="kv">
                      <div class="k typewriter">NEXT STEP</div>
                      <div class="v typewriter">ADD data/agents.json</div>
                    </div>
                    <div class="kv">
                      <div class="k typewriter">THREAT LEVEL</div>
                      <div class="v typewriter">LOW (FOR ONCE)</div>
                    </div>
                  </div>
                </div>
              </a>
            </li>
          {% endfor %}
        </ul>

        <div class="footer typewriter">
          <div>
            TOTAL FILES: {{ agents|length }}
          </div>

          <form method="post" action="/logout">
            <button class="btn-like" type="submit">LOG OUT</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>
</html>