{{define "totp_enroll_qr"}}
<div id="totp-section">
  {{if .TOTPError}}<div class="alert alert-error" role="alert">{{.TOTPError}}</div>{{end}}
  <p class="text-small" style="margin-bottom:.75rem">
    Scan this QR code with your authenticator app, then enter the 6-digit code to confirm.
  </p>
  <div style="text-align:center;margin:1rem 0">
    <img src="{{.TOTPQR}}" alt="TOTP QR Code" width="200" height="200"
         style="image-rendering:pixelated">
  </div>
  <details style="margin-bottom:1rem">
    <summary class="text-small text-muted" style="cursor:pointer">Manual entry</summary>
    <code style="font-size:.8rem;word-break:break-all;display:block;margin-top:.5rem;
                 padding:.5rem;background:var(--color-bg-alt,#f5f5f5);border-radius:4px">
      {{.TOTPSecret}}
    </code>
  </details>
  <form hx-post="/profile/totp/confirm"
        hx-target="#totp-section"
        hx-swap="outerHTML"
        hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
    <input type="hidden" name="totp_enroll_nonce" value="{{.TOTPEnrollNonce}}">
    <div class="form-group">
      <label for="totp-confirm-code">Authenticator Code</label>
      <input type="text" id="totp-confirm-code" name="totp_code"
             class="form-control" autocomplete="one-time-code"
             inputmode="numeric" pattern="[0-9]{6}" maxlength="6"
             required autofocus placeholder="6-digit code">
    </div>
    <button type="submit" class="btn btn-primary btn-sm" style="margin-top:.5rem">
      Verify &amp; Enable
    </button>
  </form>
</div>
{{end}}