{{define "content"}}
<h2 class="text-xl font-semibold text-white mb-1">Configuration TOTP</h2>
<p class="text-gray-400 text-sm mb-6">
  Scanne le QR code avec Google Authenticator ou une app compatible, puis saisis le code pour valider.
</p>

{{if .Error}}
<div class="mb-4 px-4 py-3 rounded bg-red-900/50 border border-red-700 text-red-300 text-sm">
  {{.Error}}
</div>
{{end}}

<div class="flex justify-center mb-4">
  <img src="{{.QRCodeBase64}}" alt="QR Code TOTP" class="w-48 h-48 rounded-lg border border-gray-600">
</div>

<div class="mb-6">
  <p class="text-xs text-gray-400 mb-1">Secret manuel :</p>
  <code class="block bg-gray-800 px-3 py-2 rounded text-sm text-gray-200 font-mono break-all select-all">{{.Secret}}</code>
</div>

<form method="POST" action="/auth/totp-setup">
  <input type="hidden" name="secret" value="{{.Secret}}">
  <div class="mb-4">
    <label class="block text-sm text-gray-300 mb-1">Code de vérification</label>
    <input type="text" name="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6"
           class="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white text-center text-xl tracking-widest focus:outline-none focus:border-indigo-500"
           placeholder="000000" required autofocus>
  </div>
  <button type="submit"
          class="w-full px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white font-medium rounded-lg transition-colors">
    Valider et continuer
  </button>
</form>
{{end}}