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

{% block body %}

<div class="shell">
    <!-- Branding -->
    <section class="panel brand" aria-label="Présentation">
      <div class="logo">
        <span class="dot"></span>
        <span>Sun & Travel</span>
      </div>

      <h1>Bon retour 👋<br/>Connecte-toi à ton compte.</h1>
      <p>Accède à ton espace en toute simplicité avec un style fidèle aux couleurs de l’affiche.</p>

      <div class="bullets">
        <div class="bullet">
          <div>
            <strong>Rapide</strong>
            <span>Connexion en quelques secondes.</span>
          </div>
        </div>
        <div class="bullet">
          <div>
            <strong>Sécurisé</strong>
            <span>Prévu pour brancher ton API.</span>
          </div>
        </div>
      </div>
    </section>

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

      <div class="card-title">Se connecter</div>
      <p class="card-sub">Entre tes identifiants pour continuer.</p>

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

        <div>
          <label>Mot de passe</label>
          <div class="field">
            <input name="password" type="password" placeholder="••••••••" required minlength="6" />
          </div>
        </div>

        <div class="helper">
          <label style="display:flex;align-items:center;gap:8px;margin:0;">
            <input type="checkbox" name="remember" />
            Se souvenir de moi
          </label>
          <a href="#" id="forgotLink">Mot de passe oublié ?</a>
        </div>

        <button class="btn" type="submit">Connexion</button>

        <button class="btn-ghost" type="button" id="googleLogin">Continuer avec Google</button>

        <div class="switch">
          Pas de compte ? <a href="register.html">Créer un compte</a>
        </div>

        <div class="note">
          En te connectant, tu acceptes nos conditions et notre politique de confidentialité.
        </div>
      </form>
    </section>
  </div>

  {% endblock %}