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

{% block title %}Connexion{% endblock %}

{% block body %}
    <div class="min-h-screen grid lg:grid-cols-2 bg-white">

        {# Partie formulaire #}
        <div class="flex items-center justify-center px-8 py-12">

            <div class="w-full max-w-md">

                <div class="mb-10">
                    <h1 class="text-3xl font-bold text-gray-900">
                        Connexion
                    </h1>

                    <p class="mt-2 text-gray-500">
                        Connectez-vous à votre espace client.
                    </p>
                </div>

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

                {% if app.user %}
                    <div class="mb-6 rounded-lg bg-green-50 border border-green-200 p-4">
                        Connecté en tant que <strong>{{ app.user.userIdentifier }}</strong>

                        <a href="{{ logout_path() }}"
                           class="ml-2 text-indigo-600 hover:underline">
                            Déconnexion
                        </a>
                    </div>
                {% endif %}

                <form method="post" class="space-y-6">

                    <div>
                        <label for="username"
                               class="block mb-2 text-sm font-medium text-gray-700">
                            Adresse email
                        </label>

                        <input
                            id="username"
                            name="_username"
                            type="text"
                            value="{{ last_username }}"
                            autocomplete="username"
                            required
                            autofocus
                            class="w-full rounded-xl border border-gray-300 px-4 py-3 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100 outline-none transition"
                        >
                    </div>

                    <div>
                        <label for="password"
                               class="block mb-2 text-sm font-medium text-gray-700">
                            Mot de passe
                        </label>

                        <input
                            id="password"
                            name="_password"
                            type="password"
                            autocomplete="current-password"
                            required
                            class="w-full rounded-xl border border-gray-300 px-4 py-3 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100 outline-none transition"
                        >
                    </div>

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

                    <div class="flex items-center justify-between">
                        <label class="flex items-center gap-2 text-sm text-gray-600">
                            <input
                                type="checkbox"
                                name="_remember_me"
                                class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                            >
                            Se souvenir de moi
                        </label>
                    </div>
                    <button
                        class="w-full rounded-xl bg-indigo-600 py-3 font-semibold text-white transition hover:bg-indigo-700">
                        Se connecter
                    </button>

                </form>
            </div>

        </div>

        {# Partie image #}
        <div class="hidden lg:block relative">

            <img
                src="{{ asset('images/login.avif') }}"
                alt=""
                class="absolute inset-0 h-full w-full object-cover"
            >

            <div class="absolute inset-0 bg-black/10"></div>

        </div>

    </div>
{% endblock %}