{% extends 'base.html.twig' %}
{% block title %}Nouveau mot de passe — 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; }
  .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; }
  .error-msg { background: rgba(248,81,73,.12); border: 1px solid rgba(248,81,73,.4); border-radius: 6px; padding: 10px 14px; color: #f85149; font-size: .88rem; margin-bottom: 18px; }
  .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>Nouveau mot de passe</h1>
    <p class="subtitle">Choisis un mot de passe d'au moins 8 caractères.</p>

    {% if success %}
      <div class="success-box">Mot de passe modifié avec succès !</div>
      <div class="form-footer"><a href="{{ path('player_login') }}">Se connecter →</a></div>
    {% else %}
      {% if error %}
        <div class="error-msg">{{ error }}</div>
      {% endif %}
      <form method="post">
        <div class="field">
          <label for="password">Nouveau mot de passe</label>
          <input type="password" name="password" id="password" required autofocus minlength="8" autocomplete="new-password">
        </div>
        <div class="field">
          <label for="confirm">Confirmer le mot de passe</label>
          <input type="password" name="confirm" id="confirm" required minlength="8" autocomplete="new-password">
        </div>
        <button type="submit" class="btn-full">Enregistrer</button>
      </form>
    {% endif %}
  </div>
</main>
{% endblock %}