{% extends 'base.html.twig' %}
{% block title %}Mot de passe oublié — CSI World{% endblock %}

{% block stylesheets %}
<style>
  .auth-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
  .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 36px 40px; width: 100%; max-width: 420px; }
  .auth-card h1 { margin: 0 0 6px; font-size: 1.3rem; color: var(--text); }
  .auth-card .subtitle { color: var(--muted); font-size: .87rem; margin: 0 0 28px; line-height: 1.5; }
  .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
  .field label { font-size: .85rem; color: var(--muted); }
  .field input { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 9px 12px; font-size: .95rem; outline: none; transition: border-color .15s; }
  .field input:focus { border-color: var(--accent); }
  .btn-full { width: 100%; background: var(--accent); color: #0d1117; border: none; border-radius: 6px; padding: 10px; font-size: .95rem; font-weight: 700; cursor: pointer; transition: opacity .15s; }
  .btn-full:hover { opacity: .85; }
  .success-box { background: rgba(63,185,80,.1); border: 1px solid rgba(63,185,80,.35); border-radius: 8px; padding: 14px 18px; color: #3fb950; font-size: .9rem; line-height: 1.6; margin-bottom: 20px; }
  .form-footer { text-align: center; margin-top: 16px; font-size: .83rem; color: var(--muted); }
  .form-footer a { color: var(--accent2); text-decoration: none; }
</style>
{% endblock %}

{% block body %}
<main class="auth-wrap">
  <div class="auth-card">
    <h1>Mot de passe oublié</h1>
    <p class="subtitle">Renseigne l'adresse e-mail de ton compte. Si elle est reconnue, tu recevras un lien valable <strong style="color:var(--text)">1 heure</strong> pour choisir un nouveau mot de passe.</p>

    {% if sent %}
      <div class="success-box">
        Si cette adresse correspond à un compte actif, un e-mail de réinitialisation vient d'être envoyé. Vérifie aussi tes spams.
      </div>
      <div class="form-footer"><a href="{{ path('player_login') }}">Retour à la connexion →</a></div>
    {% else %}
      <form method="post">
        <div class="field">
          <label for="email">Adresse e-mail</label>
          <input type="email" name="email" id="email" required autofocus autocomplete="email">
        </div>
        <button type="submit" class="btn-full">Envoyer le lien</button>
      </form>
      <div class="form-footer"><a href="{{ path('player_login') }}">Retour à la connexion</a></div>
    {% endif %}
  </div>
</main>
{% endblock %}