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

{% block title %}Connexion - E-Ticket{% endblock %}
{% block description %}Connectez-vous a votre compte E-Ticket pour gerer vos evenements et billets{% endblock %}

{% block body %}
<div class="page-container-xs">
    <h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page">Connexion</h1>
    <p class="font-bold text-gray-600 italic mb-8">Accedez a votre espace.</p>

    {% for message in app.flashes('success') %}
        <div class="flash-success mb-8"><p class="font-black text-sm">{{ message }}</p></div>
    {% endfor %}

    {% if error %}
        <div class="flash-error mb-8"><p class="font-black text-sm">{{ error.messageKey|trans(error.messageData, 'security') }}</p></div>
    {% endif %}

    {% for message in app.flashes('error') %}
        <div class="flash-error mb-8"><p class="font-black text-sm">{{ message }}</p></div>
    {% endfor %}

    <form method="post" action="{{ path('app_login') }}" class="form-col">
        <div>
            <label for="login_email" class="text-xs font-black uppercase tracking-widest form-label">Email</label>
            <input type="email" id="login_email" name="_username" required autofocus
                value="{{ last_username }}"
                class="form-input focus:border-indigo-600"
                placeholder="jean.dupont@exemple.fr">
        </div>

        <div>
            <label for="login_password" class="text-xs font-black uppercase tracking-widest form-label">Mot de passe</label>
            <input type="password" id="login_password" name="_password" required
                class="form-input focus:border-indigo-600"
                placeholder="••••••••">
        </div>

        <div class="text-right">
            <a href="{{ path('app_forgot_password') }}" class="text-xs font-bold text-indigo-600 hover:underline">Mot de passe oublie ?</a>
        </div>

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

        <div>
            <button type="submit" class="btn-brutal-full bg-yellow-400 font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
                Se connecter
            </button>
        </div>
    </form>

    <div class="flex items-center gap-4 mt-8">
        <div class="divider"></div>
        <span class="text-xs font-black uppercase tracking-widest text-gray-500">ou</span>
        <div class="divider"></div>
    </div>

    <a href="{{ path('app_oauth_keycloak') }}" class="btn-brutal-dark mt-6 bg-gray-900 text-white font-black uppercase text-sm tracking-widest hover:bg-indigo-600 transition-all">
        Se connecter avec E-Cosplay
    </a>

    <div class="mt-8 text-center">
        <p class="text-sm font-bold text-gray-600">Pas encore de compte ? <a href="{{ path('app_register') }}" class="text-indigo-600 hover:underline font-black">Inscription</a></p>
    </div>
</div>
{% endblock %}
