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

    /* Folder tab */
    .tab{
      position: absolute;
      top: -22px;
      left: 20px;
      background: linear-gradient(180deg, #e6d79c, var(--paper));
      border-radius: 14px 14px 6px 6px;
      padding: 10px 16px;
      box-shadow: 0 12px 30px rgba(0,0,0,.35);
      border: 1px solid rgba(0,0,0,.18);
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: 12px;
    }

    /* Top header bar */
    .header{
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      padding: 28px 24px 14px 24px;
      border-bottom: 1px dashed rgba(0,0,0,.35);
    }

    .title{
      display: grid;
      gap: 6px;
    }

    /* Rubber stamp */
    .stamp{
      position: absolute;
      right: 128px;
      top: 30px;
      transform: rotate(-10deg);
      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;
    }

    /* Main content area */
    .content{
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 18px;
      padding: 18px 24px 24px 24px;
    }

    /* Agent photo card */
    .photo{
      background: rgba(255,255,255,.22);
      border: 1px solid rgba(0,0,0,.18);
      border-radius: 14px;
      overflow: hidden;
    }
    .photo img{
      display: block;
      width: 100%;
      height: 360px;
      object-fit: contain;
      filter: contrast(1.02) saturate(.95);
    }
    .photo .caption{
      padding: 10px 12px 12px 12px;
      border-top: 1px solid rgba(0,0,0,.16);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(0,0,0,.7);
    }

    /* Field grid */
    .fields{
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(0,0,0,.18);
      border-radius: 14px;
      padding: 14px 14px 10px 14px;
    }

    .field-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 14px;
      padding-top: 6px;
    }

    .field{
      border-bottom: 1px dotted var(--line);
      padding-bottom: 8px;
      min-height: 44px;
    }

    .label{
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(0,0,0,.65);
      margin-bottom: 6px;
    }
    .value{
      font-size: 13px;
      color: rgba(0,0,0,.92);
      white-space: pre-wrap;
      word-break: break-word;
    }

    /* Big sections */
    .sections{
      margin-top: 14px;
      display: grid;
      gap: 12px;
    }
    .section{
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(0,0,0,.16);
      border-radius: 14px;
      padding: 14px;
    }
    .section h2{
      margin: 0 0 8px 0;
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(0,0,0,.75);
    }
    .section p{
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: rgba(0,0,0,.9);
      text-transform: none;
      letter-spacing: normal;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    }

    .footer{
      display: flex;
      gap: 10px;
      justify-content: space-between;
      align-items: center;
      padding: 12px 24px 20px 24px;
      border-top: 1px dashed rgba(0,0,0,.35);
      color: rgba(0,0,0,.75);
      font-size: 12px;
    }
    .footer a{
      color: rgba(0,0,0,.9);
      text-decoration: none;
      border-bottom: 1px dotted rgba(0,0,0,.45);
    }
    .footer a:hover{
      border-bottom-style: solid;
    }

    .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;
    }

    @media (max-width: 860px){
      .content{ grid-template-columns: 1fr; }
      .photo img{ height: 300px; }
      .warning{ max-width: 100%; }
      .bureau{ justify-items: start; }
      .header{ grid-template-columns: 1fr; }
      .field-grid{ grid-template-columns: 1fr; }
      .stamp { right: 16px; top: 100px; }
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="folder">
      <div class="tab">CASE FILE: {{ agent.file|default("UNFILED")|upper }}</div>

      <div class="header">
        <div class="title">
          <h1 class="typewriter">
            TOP SECRET // AGENT DOSSIER — {{ agent.codename|default("UNKNOWN")|upper }}
          </h1>
          <div class="subtitle typewriter">
            Radiant Gamut Bureau • Clearance Required: {{ agent.threat_level|default("CLASSIFIED")|upper }}
          </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>
      </div>

      <div class="stamp typewriter">
        DO NOT PHOTOCOPY
      </div>

      <div class="content">
        <aside class="photo">
          <img src="/static/photos/{{ agent.photo|default('default.png') }}" alt="Agent photo">
          <div class="caption typewriter">
            SUBJECT: {{ agent.name|default("UNKNOWN")|upper }}<br>
            STATUS: {{ agent.status|default("UNKNOWN")|upper }}
          </div>
        </aside>

        <main>
          <div class="fields">
            <div class="field-grid">
              <div class="field">
                <div class="label">NAME</div>
                <div class="value typewriter">{{ agent.name|default("—")|upper }}</div>
              </div>

              <div class="field">
                <div class="label">CODENAME</div>
                <div class="value typewriter">{{ agent.codename|default("—")|upper }}</div>
              </div>

              <div class="field">
                <div class="label">OCCUPATION</div>
                <div class="value typewriter">{{ agent.occupation|default("—")|upper }}</div>
              </div>

              <div class="field">
                <div class="label">ALLEGIANCE</div>
                <div class="value typewriter">{{ agent.allegiance|default("—")|upper }}</div>
              </div>

              <div class="field">
                <div class="label">KNOWN ASSOCIATES</div>
                <div class="value typewriter">{{ agent.known_associates|default("—")|upper }}</div>
              </div>

              <div class="field">
                <div class="label">DATE OF BIRTH</div>
                <div class="value typewriter">{{ agent.dob|default("—")|upper }}</div>
              </div>

              <div class="field">
                <div class="label">PLACE OF ORIGIN</div>
                <div class="value typewriter">{{ agent.origin|default("—")|upper }}</div>
              </div>

              <div class="field">
                <div class="label">LANGUAGES</div>
                <div class="value typewriter">{{ agent.languages|default("—")|upper }}</div>
              </div>

              <div class="field">
                <div class="label">LAST KNOWN LOCATION</div>
                <div class="value typewriter">{{ agent.last_known_location|default("—")|upper }}</div>
              </div>

              <div class="field">
                <div class="label">THREAT LEVEL</div>
                <div class="value typewriter" style="color: {{ agent.file | text_color }}; background-color: {{ agent.file }}; padding: 0 1em;">{{ agent.threat_level|default("—")|upper }}</div>
              </div>
            </div>

            <div class="sections">
              <div class="section">
                <h2>BACKGROUND SUMMARY</h2>
                <p>
                  {{ agent.bio|default("Profile redacted.") }}
                </p>
              </div>

              <div class="section">
                <h2>PSYCHOLOGICAL PROFILE</h2>
                <p>
                  {{ agent.psych|default("Profile redacted.") }}
                </p>
              </div>
            </div>
          </div>
        </main>
      </div>

      <div class="footer typewriter">
        <div>
          <a class="btn-like" href="/agents">← RETURN TO INDEX</a>
        </div>

        <div style="text-align:right;">
          FILE NO: {{ agent.file|default("UNKNOWN")|upper }}
        </div>
      </div>
    </div>
  </div>
</body>
</html>