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

{% block title %}Iniciar sesión – Bizkai Sida{% endblock %}

{% block body %}

<div class="text-center mb-6">

    {# LOGO PRINCIPAL #}
    <img src="{{ asset('assets/img/logo_bizkaisida.png') }}"
         alt="Bizkai Sida"
         class="mb-4"
         style="max-width: 180px;">

    {# ILUSTRACIÓN DE PERSONAS #}
    <img src="{{ asset('assets/img/login_people_orange_blue.png') }}"
         alt="Personas"
         class="mb-6"
         style="max-width: 320px;">

    <h2 class="fw-bold text-dark">Iniciar sesión</h2>
    <p class="text-muted">Accede a tu cuenta para gestionar Bizkai Sida</p>
</div>

<!-- Flash messages -->
{% for label, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ label == 'warning' ? 'info' : label }} mb-6">
            {{ message }}
        </div>
    {% endfor %}
{% endfor %}

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

<form method="post" class="form">

    <!-- EMAIL -->
    <div class="mb-4 position-relative">
        <i class="fas fa-envelope input-icon"></i>
        <input type="email"
               name="email"
               placeholder="Correo electrónico"
               value="{{ last_username }}"
               required
               autofocus
               class="form-control input-custom">
    </div>

    <!-- PASSWORD -->
    <div class="mb-4 position-relative">
        <i class="fas fa-lock input-icon"></i>
        <input type="password"
               name="password"
               placeholder="Contraseña"
               required
               class="form-control input-custom">
    </div>

    <!-- REMEMBER -->
    <div class="form-check mb-4">
        <input type="checkbox" id="remember_me" name="_remember_me" class="form-check-input">
        <label class="form-check-label" for="remember_me">Recordarme</label>
    </div>

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

    <!-- SUBMIT -->
    <button class="btn btn-orange btn-lg w-100 fw-bold">Acceder</button>

    <!-- Forgot -->
    <div class="text-center mt-4">
        <a href="{{ path('app_forgot_password_request') }}"
           class="fw-semibold text-primary">
            ¿Has olvidado tu contraseña?
        </a>
    </div>

</form>

{% endblock %}