{% extends 'base.html' %}
{% block title %}Inscription{% endblock %}
{% block content %}
<div class="px-4 py-10 sm:py-16">
  <div class="w-full max-w-md mx-auto">
    <div class="text-center mb-6">
      <h1 class="text-2xl font-bold text-ocean-800">Créer un compte</h1>
      <p class="text-gray-500 mt-1 text-sm">Chaque compte ne voit que ses propres élèves et dossiers.</p>
    </div>
    <div class="card p-6 sm:p-8">
      <form method="post" action="{{ url_for('auth.register') }}" class="space-y-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">Prénom</label>
            <input id="first_name" name="first_name" autocomplete="given-name" class="input" value="{{ request.form.get('first_name', '') }}"/>
          </div>
          <div>
            <label for="last_name" class="block text-sm font-medium text-gray-700 mb-1">Nom</label>
            <input id="last_name" name="last_name" autocomplete="family-name" class="input" value="{{ request.form.get('last_name', '') }}"/>
          </div>
        </div>
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Courriel *</label>
          <input id="email" type="email" name="email" required autocomplete="email" autocapitalize="none" class="input" value="{{ request.form.get('email', '') }}"/>
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe *</label>
          <input id="password" type="password" name="password" required minlength="8" autocomplete="new-password" class="input"/>
          <p class="text-xs text-gray-400 mt-1">8 caractères minimum.</p>
        </div>
        <div>
          <label for="confirm" class="block text-sm font-medium text-gray-700 mb-1">Confirmer le mot de passe *</label>
          <input id="confirm" type="password" name="confirm" required minlength="8" autocomplete="new-password" class="input"/>
        </div>
        <button class="btn-primary w-full justify-center text-base py-3">Créer le compte</button>
      </form>
    </div>
    <p class="text-center text-sm text-gray-500 mt-6">Déjà un compte ?
      <a href="{{ url_for('auth.login') }}" class="text-ocean-600 hover:text-ocean-800 font-semibold">Se connecter</a></p>
  </div>
</div>
{% endblock %}