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

{% block title %}Connexion{% endblock %}

{% block content %}
    <div class="content">
        {% if app.user %}
        <p>Vous êtes connecté en tant que {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">se déconnecter</a>.</p>
        {% else %}
        
<div class="container">
  <div class="columns is-centered">
    <div class="column is-5">
      <div class="box">
        <form method="post">
          <h1 class="title is-4 has-text-centered">Connexion</h1>

          <!-- Champ eMail -->
          <div class="field">
            <label class="label" for="username">eMail</label>
            <div class="control has-icons-left">
              <input class="input" type="email" value="{{ last_username }}" name="_username" id="username" autocomplete="email" required autofocus>
              <span class="icon is-small is-left icon-inner">
                {{ ux_icon('bi:envelope') }}
              </span>
            </div>
          </div>

          <!-- Champ mot de passe -->
          <div class="field">
            <label class="label" for="password">Mot de passe</label>
            <div class="control has-icons-left">
              <input class="input" type="password" name="_password" id="password" autocomplete="current-password" required>
              <span class="icon is-small is-left icon-inner">
                {{ ux_icon('bi:lock') }}
              </span>
            </div>
          </div>

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

          <div class="field">
            <div class="control">
              <label class="checkbox">
                <input type="checkbox" name="_remember_me" id="_remember_me">
                Se souvenir de moi
              </label>
            </div>
          </div>

          <div class="field is-grouped is-grouped-centered">
            <div class="control">
              <button class="button is-primary" type="submit">Se connecter</button>
            </div>
          </div>

          <p class="has-text-centered mt-3">
            <a href="{{ path('app_forgot_password_request') }}">Mot de passe oublié</a> |
            <a href="{{ path('app_register') }}">Créer un compte</a>
          </p>

          <p class="has-text-centered mt-4">
            <a href="{{ path('app_main') }}">Retour à l'accueil</a>
          </p>
        </form>
      </div>
    </div>
  </div>
</div>

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