{% extends 'base.twig' %}

{% block title %}{{ 'page.login'|trans }}{% endblock %}
{% block meta_description %}{{ 'page.login'|trans }}{% endblock %}

{% block canonical_url %}<link rel="canonical" href="{{ url('app_login') }}" />{% endblock %}

{% block breadcrumb_schema %}
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          "itemListElement": [
            {
              "@type": "ListItem",
              "position": 1,
              "name": "{{ 'breadcrumb.home'|trans }}",
              "item": "{{ app.request.schemeAndHttpHost }}"
            },
            {
              "@type": "ListItem",
              "position": 2,
              "name": "{{ 'breadcrumb.login'|trans }}",
              "item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
            }
          ]
        }
    </script>
{% endblock %}

{% block body %}
    <div class="min-h-screen flex items-center justify-center bg-[#fbfbfb] py-12 px-4 sm:px-6 lg:px-8 italic">
        <div class="max-w-md w-full">

            {# CONTENEUR PRINCIPAL NEUBRUTALISTE #}
            <div class="bg-white border-8 border-gray-900 p-8 md:p-10 shadow-[12px_12px_0px_rgba(0,0,0,1)] relative overflow-hidden">

                {# DECO CORNER #}
                <div class="absolute top-0 right-0 bg-yellow-400 border-l-8 border-b-8 border-gray-900 px-4 py-1 font-black text-xs uppercase tracking-tighter">
                    Secure_Link v2.0
                </div>

                <div class="mb-10">
                    <h2 class="text-5xl font-black text-gray-900 uppercase tracking-tighter leading-none">
                        {{ 'security.login'|trans }}<span class="text-indigo-600">.</span>
                    </h2>
                    <p class="mt-2 text-xs font-bold text-gray-500 uppercase tracking-widest">Identification requise pour continuer</p>
                </div>

                {# MESSAGES D'ERREUR ET DE SUCCÈS #}
                {% if error %}
                    <div class="p-4 mb-6 border-4 border-gray-900 bg-pink-100 text-pink-700 font-bold uppercase text-xs shadow-[4px_4px_0px_rgba(0,0,0,1)]" role="alert">
                        <i class="fas fa-exclamation-triangle mr-2"></i> {{ error.messageKey|trans(error.messageData, 'security') }}
                    </div>
                {% endif %}

                {% for message in app.flashes('success') %}
                    <div class="p-4 mb-6 border-4 border-gray-900 bg-green-100 text-green-700 font-bold uppercase text-xs shadow-[4px_4px_0px_rgba(0,0,0,1)]" role="alert">
                        <i class="fas fa-check-circle mr-2"></i> {{ message }}
                    </div>
                {% endfor %}

                {# FORMULAIRE CLASSIQUE #}
                <form action="{{ path('app_login') }}" method="post" class="space-y-6">
                    <input type="hidden" name="remember" value="true">

                    <div class="space-y-4">
                        {# Champ Email #}
                        <div>
                            <label for="username" class="block text-xs font-black uppercase tracking-widest text-gray-900 mb-2">
                                {{ 'label.email'|trans }} _
                            </label>
                            <input id="username" name="_username" type="email" autocomplete="email" required
                                   class="w-full px-4 py-4 border-4 border-gray-900 text-gray-900 font-bold placeholder-gray-400 focus:ring-0 focus:border-indigo-600 shadow-[4px_4px_0px_rgba(0,0,0,1)] transition-all"
                                   placeholder="admin@e-cosplay.fr" value="{{ last_username }}" autofocus>
                        </div>

                        {# Champ Mot de passe #}
                        <div>
                            <label for="password" class="block text-xs font-black uppercase tracking-widest text-gray-900 mb-2">
                                {{ 'label.password'|trans }} _
                            </label>
                            <input id="password" name="_password" type="password" autocomplete="current-password" required
                                   class="w-full px-4 py-4 border-4 border-gray-900 text-gray-900 font-bold placeholder-gray-400 focus:ring-0 focus:border-indigo-600 shadow-[4px_4px_0px_rgba(0,0,0,1)] transition-all"
                                   placeholder="••••••••">
                        </div>
                    </div>

                    <div class="flex items-center justify-between pt-2">
                        <div class="text-sm">
                            <a href="{{ path('app_forgot_password') }}" class="text-[10px] font-black uppercase underline hover:text-indigo-600 decoration-2">
                                {{ 'link.forgot_password'|trans }}
                            </a>
                        </div>
                    </div>

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

                    {# BOUTON VALIDER #}
                    <button type="submit"
                            class="w-full group relative flex justify-center py-4 px-4 border-4 border-gray-900 text-lg font-black uppercase tracking-widest text-white bg-indigo-600 shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all">
                        {{ 'button.sign_in'|trans }}
                        <i class="fas fa-chevron-right ml-3 mt-1 group-hover:translate-x-2 transition-transform"></i>
                    </button>
                </form>
                {# SÉPARATEUR #}
                <div class="relative my-10">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t-4 border-gray-900"></div>
                    </div>
                    <div class="relative flex justify-center text-xs uppercase font-black">
                        <span class="px-4 bg-white text-gray-900">{{ 'common.or'|trans }}</span>
                    </div>
                </div>
                {# BOUTON KEYCLOAK (SSO) - Placé en haut pour favoriser le SSO #}
                <a href="{{ path('connect_keycloak_start') }}"
                   class="w-full flex items-center justify-center py-4 px-4 border-4 border-gray-900 text-lg font-black uppercase tracking-widest text-gray-900 bg-yellow-400 shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all">
                    <i class="fas fa-key mr-3"></i>
                    {{ 'button.login_keycloak'|trans|default('Connexion Keycloak') }}
                </a>

                <a href="{{ path('connect_discord_start') }}"
                   class="mt-2 w-full flex items-center justify-center py-4 px-4 border-4 border-gray-900 text-lg font-black uppercase tracking-widest text-gray-900 bg-yellow-400 shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all">
                    <i class="fas fa-key mr-3"></i>
                    {{ 'button.login_discord'|trans|default('Connexion Keycloak') }}
                </a>
            </div>
        </div>
    </div>
{% endblock %}