{{define "content"}}
<h2 class="text-xl font-semibold text-white mb-1">Vérification</h2>

{{if .Admin}}
<div class="flex items-center gap-3 mb-6 p-3 bg-gray-800 rounded-lg">
  {{if .Admin.DiscordAvatar}}
  <img src="https://cdn.discordapp.com/avatars/{{.Admin.DiscordID}}/{{.Admin.DiscordAvatar}}.png?size=64"
       class="w-10 h-10 rounded-full" alt="">
  {{end}}
  <div>
    <p class="text-sm text-gray-400">Connecté en tant que</p>
    <p class="font-medium text-white">{{.Admin.DiscordUsername}}</p>
  </div>
</div>
{{end}}

{{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}}

<form method="POST" action="/auth/verify">
  <div class="mb-4">
    <label class="block text-sm text-gray-300 mb-1">Mot de passe</label>
    <input type="password" name="password" autocomplete="current-password"
           class="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-indigo-500"
           required autofocus>
  </div>
  <div class="mb-6">
    <label class="block text-sm text-gray-300 mb-1">Code TOTP</label>
    <input type="text" name="totp" 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>
  </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">
    Se connecter
  </button>
</form>
{{end}}