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

{% block title %}{{ 'login.title'|trans }} - {{ 'app.portal'|trans }}{% endblock %}

{% block body %}
    <div class="flex min-h-screen items-center justify-center px-4">
        <div class="w-full max-w-sm rounded-lg bg-white p-8 shadow">
            <div class="mb-6 text-center">
                <p class="font-display text-xl tracking-wide text-pepite-navy">{{ 'app.name'|trans }}</p>
                <p class="font-structure text-sm text-pepite-ink/60">{{ 'app.portal'|trans }}</p>
            </div>

            {# Choix de la langue avant connexion (mémorisé en session par LocaleSubscriber) ; une fois
               connecté, c'est la langue du compte qui s'applique. #}
            <p class="mb-4 flex justify-center gap-3 font-structure text-xs">
                {% for locale in ['fr', 'en', 'zh'] %}
                    <a href="{{ path('app_login', { _locale: locale }) }}"
                       class="{% if app.request.locale == locale %}font-semibold text-pepite-navy underline{% else %}text-pepite-ink/50 hover:text-pepite-navy{% endif %}">{{ ('lang.' ~ locale)|trans }}</a>
                {% endfor %}
            </p>

            {% if error %}
                <div class="mb-4 rounded border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
                    {{ error.messageKey|trans(error.messageData, 'security') }}
                </div>
            {% endif %}

            {# action explicite vers check_path : login_path (GET, cette page) et check_path (POST, intercepté
               par le firewall) sont deux routes distinctes — sans action, le formulaire se soumettait à
               lui-même et aucune authentification n'était tentée (régression vue côté Radar le 2026-09-22). #}
            <form method="post" action="{{ path('app_login_check') }}" class="space-y-4">
                <div>
                    <label for="username" class="block text-sm font-medium text-pepite-ink">{{ 'login.email'|trans }}</label>
                    <input type="email" value="{{ last_username }}" name="_username" id="username"
                           class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-pepite-navy focus:outline-none focus:ring-pepite-navy"
                           required autofocus>
                </div>

                <div>
                    <label for="password" class="block text-sm font-medium text-pepite-ink">{{ 'login.password'|trans }}</label>
                    <input type="password" name="_password" id="password"
                           class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-pepite-navy focus:outline-none focus:ring-pepite-navy"
                           required>
                </div>

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

                <button type="submit"
                        class="w-full rounded-md bg-pepite-navy px-4 py-2 font-structure font-medium text-white shadow hover:bg-pepite-navy-light">
                    {{ 'login.submit'|trans }}
                </button>
            </form>

            {% if app.environment == 'dev' %}
                <div class="mt-6 border-t border-gray-200 pt-4 text-center">
                    <a href="{{ path('app_dev_login') }}" class="text-sm text-pepite-ink/50 hover:text-pepite-navy hover:underline">
                        {{ 'login.dev_shortcut'|trans }}
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}