{% extends "base.html" %}
{% block title %}Changer de mot de passe{% endblock %}
{% block body %}
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-800 to-blue-900 p-4">
  <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden">

    <div class="bg-gradient-to-r from-amber-500 to-orange-600 px-8 py-8 text-white text-center">
      <div class="text-4xl mb-2">🔑</div>
      <h1 class="text-xl font-bold">Première connexion</h1>
      <p class="text-orange-100 text-sm mt-1">Veuillez choisir votre mot de passe personnel</p>
    </div>

    <div class="px-8 py-8">
      {% if error %}
      <div class="mb-5 bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 text-sm">
        ⚠️ {{ error }}
      </div>
      {% endif %}

      <div class="mb-5 bg-blue-50 border border-blue-200 text-blue-700 rounded-lg px-4 py-3 text-sm">
        📋 Le mot de passe doit contenir au moins 8 caractères.
      </div>

      <form method="post" action="{{ root_path }}/change-password">
        <div class="mb-4">
          <label class="block text-sm font-medium text-slate-700 mb-1">Nouveau mot de passe</label>
          <input type="password" name="new_password" required minlength="8"
            class="w-full border border-slate-300 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="Minimum 8 caractères" />
        </div>
        <div class="mb-6">
          <label class="block text-sm font-medium text-slate-700 mb-1">Confirmer le mot de passe</label>
          <input type="password" name="confirm_password" required minlength="8"
            class="w-full border border-slate-300 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="Répétez le mot de passe" />
        </div>
        <button type="submit"
          class="w-full bg-amber-500 hover:bg-amber-600 text-white font-semibold py-3 rounded-lg transition-colors text-sm">
          Enregistrer et commencer →
        </button>
      </form>
    </div>
  </div>
</div>
{% endblock %}