{% extends '@App/login/base.html.twig' %}

{% block title %}Connexion – FundUp{% endblock %}

{% block content %}

<div class="auth-wrapper min-vh-100">

  <div class="row g-0 min-vh-100">

    {# Colonne gauche – formulaire #}
    <div class="col-lg-5 d-flex align-items-center justify-content-center p-5">

      <div class="auth-card w-100" style="max-width: 420px">

        <img
          src="{{ asset('assets/images/app-logo.png') }}"
          alt="FundUp"
          class="mb-4"
          height="50"
        >

        <h1 class="h4 text-center mb-4">Connexion</h1>

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

        <form method="post" data-controller="login">

          <div class="mb-3">
            <label for="username" class="form-label">Email</label>
            <input
              type="email"
              id="username"
              name="_username"
              class="form-control"
              required
              autofocus
            >
          </div>

          <div class="mb-4">
            <label for="password" class="form-label">Mot de passe</label>
            <input
              type="password"
              id="password"
              name="_password"
              class="form-control"
              required
            >
          </div>

          <button class="btn btn-primary w-100" type="submit">
            Se connecter
          </button>

          <div class="text-center mt-3">
            <a href="{{ path('lostpassword_index') }}">
              Mot de passe oublié ?
            </a>
          </div>

        </form>

      </div>
    </div>

    {# Colonne droite – visuel #}
    <div class="col-lg-7 d-none d-lg-flex auth-visual bg-dark">
      <div class="m-auto text-white">
        {# visuel, slogan, illustration #}
      </div>
    </div>

  </div>

</div>

{% endblock %}