{% extends "base_login.html.twig" %}

{% block body %}

<!-- Auth -->
    <section class="panel auth" aria-label="Inscription">
      <div id="err" class="error" role="alert"></div>

      <div class="card-title">Créer un compte</div>
      <p class="card-sub">Remplis les champs pour commencer.</p>

      <form id="registerForm" autocomplete="on">
        <div class="row two">
          <div>
            <label>Prénom</label>
            <div class="field">
              <input name="firstName" type="text" placeholder="Prénom" required />
            </div>
          </div>
          <div>
            <label>Nom</label>
            <div class="field">
              <input name="lastName" type="text" placeholder="Nom" required />
            </div>
          </div>
        </div>

        <div>
          <label>Email</label>
          <div class="field">
            <input name="email" type="email" placeholder="ex: nom@domaine.com" required />
          </div>
        </div>

        <div class="row two">
          <div>
            <label>Mot de passe</label>
            <div class="field">
              <input name="password" type="password" placeholder="Minimum 6 caractères" required minlength="6" />
            </div>
          </div>
          <div>
            <label>Confirmer</label>
            <div class="field">
              <input name="confirm" type="password" placeholder="Répéter le mot de passe" required minlength="6" />
            </div>
          </div>
        </div>

        <label style="display:flex;align-items:flex-start;gap:10px;margin: 2px 0 4px;font-size:12px;color:var(--muted);">
          <input type="checkbox" name="terms" required />
          <span>J’accepte les conditions d’utilisation et la politique de confidentialité.</span>
        </label>

        <button class="btn" type="submit">Créer mon compte</button>
        <button class="btn-ghost" type="button" id="googleRegister">S’inscrire avec Google</button>

        <div class="switch">
          Déjà un compte ? <a href="login.html">Se connecter</a>
        </div>
      </form>

      <div class="note">
        Conseil : ajoute une validation côté serveur + hash du mot de passe.
      </div>
    </section>
  </div>

  {% endblock %}