{{define "title"}}Set Up Two-Factor Authentication{{end}}
{{define "content"}}
<div style="max-width:32rem;width:100%">
  <div style="margin-bottom:1.25rem">
    <h1 style="font-size:1.125rem;font-weight:600;color:#f9fafb">Set Up Two-Factor Authentication</h1>
    <p style="color:#6b7280;font-size:.8125rem;margin-top:.25rem">Scan the QR code with your authenticator app, or enter the secret manually.</p>
  </div>

  {{if .Error}}<div class="flash-err" style="margin-bottom:1rem">{{.Error}}</div>{{end}}
  {{if .Flash}}<div class="flash-ok" style="margin-bottom:1rem">{{.Flash}}</div>{{end}}

  <div style="background:#161b22;border:1px solid #21262d;border-radius:.5rem;padding:1.5rem;margin-bottom:1.25rem">
    <h2 style="font-size:.875rem;font-weight:600;color:#d1d5db;margin-bottom:.875rem">Step 1 — Add to authenticator app</h2>

    <!-- QR code via Google Charts API (no JS required) -->
    <div style="text-align:center;margin-bottom:1rem">
      <img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={{urlquery .OTPAuthURI}}&choe=UTF-8"
           alt="QR code for TOTP enrollment"
           style="border:6px solid #fff;border-radius:.25rem;display:inline-block"
           width="200" height="200">
    </div>

    <p style="color:#6b7280;font-size:.75rem;margin-bottom:.5rem">Can't scan? Enter this secret manually in your app:</p>
    <div style="background:#0d1117;border:1px solid #30363d;border-radius:.25rem;padding:.625rem .875rem;font-family:monospace;font-size:.875rem;color:#58a6ff;word-break:break-all;letter-spacing:.1em">
      {{.Secret}}
    </div>
    <p style="color:#4b5563;font-size:.7rem;margin-top:.5rem">Algorithm: SHA-1 &nbsp;|&nbsp; Digits: 6 &nbsp;|&nbsp; Period: 30 seconds</p>
  </div>

  <div style="background:#161b22;border:1px solid #21262d;border-radius:.5rem;padding:1.5rem">
    <h2 style="font-size:.875rem;font-weight:600;color:#d1d5db;margin-bottom:.875rem">Step 2 — Verify and enable</h2>
    <p style="color:#6b7280;font-size:.8125rem;margin-bottom:1rem">Enter the 6-digit code shown in your authenticator app to confirm setup.</p>
    <form method="POST" action="/settings/mfa/enroll">
      <input type="hidden" name="csrf" value="{{.CSRF}}">
      <div class="field">
        <label for="code">Verification Code</label>
        <input type="text" id="code" name="code" required
               minlength="6" maxlength="6" inputmode="numeric"
               autocomplete="one-time-code" autofocus
               placeholder="000000"
               style="letter-spacing:.2em;text-align:center;font-size:1.25rem">
      </div>
      <div style="display:flex;gap:.75rem;margin-top:.875rem">
        <button type="submit" class="btn btn-primary" style="flex:1;justify-content:center">Enable Two-Factor Auth</button>
        <a href="/settings" class="btn btn-ghost" style="flex:0 0 auto">Cancel</a>
      </div>
    </form>
  </div>
</div>
{{end}}