{{define "content"}}
<h2 class="text-xl font-semibold text-white mb-1">Créer un mot de passe</h2>
<p class="text-gray-400 text-sm mb-6">
  Choisissez un mot de passe sécurisé (12 caractères minimum). Il vous sera demandé à chaque connexion.
</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}}

<form method="POST" action="/auth/password-setup">
  <div class="mb-4">
    <label class="block text-sm text-gray-300 mb-1">Mot de passe</label>
    <input type="password" name="password" minlength="12" required autofocus
           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"
           placeholder="12 caractères minimum">
  </div>
  <div class="mb-6">
    <label class="block text-sm text-gray-300 mb-1">Confirmer le mot de passe</label>
    <input type="password" name="confirm" required
           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">
  </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">
    Définir le mot de passe
  </button>
</form>
{{end}}