{% extends "base.html" %}
{% block content %}
<div class="login-wrap">
  <div class="login-card">
    <div class="login-header">
      <span class="login-eyebrow">Décompte Horaire</span>
      <h1 class="login-title">Connexion</h1>
    </div>

    {% if error %}
    <div class="login-error">{{ error }}</div>
    {% endif %}

    {% if step == "email" %}
    <form method="post" action="/login" class="login-form">
      <label class="login-label" for="email">Adresse email</label>
      <input
        id="email"
        class="login-input"
        type="email"
        name="email"
        value="{{ email }}"
        autocomplete="email"
        autofocus
        placeholder="prenom.nom@domaine.fr"
        required
      >
      <button class="login-btn" type="submit">Continuer</button>
    </form>

    {% elif step == "password" %}
    <form method="post" action="/login/password" class="login-form">
      <input type="hidden" name="email" value="{{ email }}">
      <label class="login-label">{{ email }}</label>
      <input
        id="password"
        class="login-input"
        type="password"
        name="password"
        autocomplete="current-password"
        autofocus
        placeholder="Mot de passe"
        required
      >
      <button class="login-btn" type="submit">Se connecter</button>
    </form>

    {% elif step == "sent" %}
    <p class="login-hint">
      Un email a été envoyé à <b>{{ email }}</b> avec un lien pour définir ton mot de passe.
      Le lien est valable 24h.
    </p>
    {% endif %}
  </div>
</div>
{% endblock %}