{% extends 'base.html.twig' %}

{% block title %}Connexion | Opération Terrain{% endblock %}

{% block body %}
<div style="display:flex;justify-content:center;padding:3rem 1rem">
  <div style="background:var(--white);border-radius:1rem;box-shadow:var(--shadow-lg);padding:2.5rem;width:100%;max-width:420px;border-top:5px solid var(--blue)">

    <div class="login-card" style="padding:0;box-shadow:none;border-radius:0">
      <div class="logo">Opération Terrain</div>
      <div class="subtitle">Connexion à votre espace</div>
    </div>

    {% if error %}
      <div class="flash flash-error">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
    {% endif %}

    {% if app.user %}
      <div style="margin-bottom:1rem">
        Connecté en tant que {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Déconnexion</a>
      </div>
    {% endif %}

    <form method="post" action="{{ path('app_login') }}">
      <div style="margin-bottom:1rem">
        <label for="inputEmail">Email</label>
        <input type="email" value="{{ last_username }}" name="email" id="inputEmail"
               autocomplete="email" required autofocus>
      </div>

      <div style="margin-bottom:1.5rem">
        <label for="inputPassword">Mot de passe</label>
        <input type="password" name="password" id="inputPassword"
               autocomplete="current-password" required>
      </div>

      <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

      <button class="btn" type="submit" style="width:100%;justify-content:center">Se connecter</button>
    </form>

    <div style="margin-top:1.5rem;padding:1rem;background:#f0f4ff;border-radius:.5rem;border:1px solid #c7d3f5;font-size:.82rem">
      <div style="font-weight:600;color:var(--blue);margin-bottom:.6rem">Comptes de démonstration</div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:.25rem .5rem;color:#444">
        <span style="color:var(--muted)">Administrateur</span><span></span>
        <span>Email :</span><span><strong>admin@tractage.fr</strong></span>
        <span>Mot de passe :</span><span><strong>admin1234</strong></span>
        <span style="color:var(--muted);margin-top:.4rem">Utilisateur</span><span></span>
        <span>Email :</span><span><strong>user@tractage.fr</strong></span>
        <span>Mot de passe :</span><span><strong>user1234</strong></span>
      </div>
    </div>

  </div>
</div>
{% endblock %}