{% extends 'base.html' %}
{% block title %}Connexion{% endblock %}
{% block content %}
<div class="grid lg:grid-cols-[minmax(0,5fr)_minmax(0,6fr)] min-h-[calc(100vh-3.75rem)]">

  <aside class="hidden lg:flex bg-ocean-900 text-white relative overflow-hidden" aria-hidden="true">
    <!-- règle verticale : 0 à 18 m -->
    <div class="absolute inset-y-0 left-10 w-px bg-turquoise-500/50"></div>
    {% for m in range(0, 19, 3) %}
    <div class="absolute left-10 flex items-center gap-3" style="top: calc({{ m }} / 18 * 86% + 6%)">
      <span class="block h-px w-6 bg-turquoise-500"></span>
      <span class="text-xs num text-turquoise-400">{{ m }} m</span>
    </div>
    {% endfor %}
    <div class="absolute left-10 w-px h-0" style="top:6%"></div>
    <div class="self-end pl-32 pr-10 pb-14">
      <div class="display num leading-none" style="color:#fff;font-size:clamp(7rem,15vw,13rem)"><span id="depth">18</span><span class="text-turquoise-500" style="font-size:.32em"> m</span></div>
      <p class="mt-4 max-w-xs text-ocean-100">Profondeur maximale d'un plongeur Open Water. Chaque dossier suit l'élève jusque-là.</p>
    </div>
  </aside>

  <section class="px-4 py-10 sm:py-16 flex items-center">
    <div class="w-full max-w-md mx-auto">
      <div class="mb-6">
        <h1 class="text-3xl">Connexion</h1>
        <p class="text-gray-600 mt-1 text-sm">Suivi des dossiers de formation PADI Open Water</p>
      </div>
      <div class="card p-6 sm:p-8">
        <form method="post" action="{{ url_for('auth.login') }}" class="space-y-5">
          {% if next_url %}<input type="hidden" name="next" value="{{ next_url }}"/>{% endif %}
          <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="username" 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 autocomplete="current-password" class="input"/>
          </div>
          <label class="flex items-center gap-2 text-sm text-gray-600">
            <input type="checkbox" name="remember" value="1" checked class="w-4 h-4"/> Rester connecté sur cet appareil
          </label>
          <button class="btn-primary w-full justify-center text-base py-3">Se connecter</button>
        </form>
      </div>
      {% if allow_registration %}
      <p class="text-sm text-gray-600 mt-6">Pas encore de compte ?
        <a href="{{ url_for('auth.register') }}" class="text-ocean-600 hover:text-ocean-900 font-semibold underline underline-offset-2">Créer un compte</a></p>
      {% endif %}
    </div>
  </section>
</div>
{% endblock %}
{% block extra_js %}
<script>
  // Seul mouvement de la page : la descente de 0 à 18 m à l'ouverture.
  (function () {
    var el = document.getElementById('depth');
    if (!el || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    var t0 = null;
    function step(t) {
      if (t0 === null) t0 = t;
      var k = Math.min((t - t0) / 1400, 1);
      el.textContent = Math.round(18 * (1 - Math.pow(1 - k, 3)));
      if (k < 1) requestAnimationFrame(step);
    }
    el.textContent = '0';
    requestAnimationFrame(step);
  })();
</script>
{% endblock %}