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

{% block title %}Connexion — Pipou{% endblock %}
{% block theme_color %}#4c0519{% endblock %}
{% block status_bar_style %}black-translucent{% endblock %}

{% block body_class %}bg-rose-950 dark:bg-rose-950{% endblock %}

{% block body %}

<div class="fixed inset-0 -z-10 overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-b from-rose-950 via-stone-950 to-rose-950"></div>
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] rounded-full bg-rose-600/15 blur-[100px]"></div>
    <div class="absolute bottom-1/4 right-0 w-[300px] h-[300px] rounded-full bg-pink-600/10 blur-[80px]"></div>
    <div class="absolute top-1/3 -left-20 w-[250px] h-[250px] rounded-full bg-rose-700/10 blur-[70px]"></div>
</div>

<div class="min-h-screen flex flex-col items-center justify-center px-4 py-12">
    <div class="w-full max-w-sm">

        <div class="text-center mb-10">
            <div class="relative inline-flex items-center justify-center mb-6">
                <div class="size-20 rounded-3xl bg-gradient-to-br from-rose-400 to-pink-600 shadow-2xl shadow-rose-900/60 flex items-center justify-center">
                    <svg class="size-10 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/>
                    </svg>
                </div>
            </div>
            <h1 class="text-4xl font-bold text-white tracking-tight">Pipou</h1>
            <p class="mt-2 text-rose-300/50 text-sm">Votre espace partagé</p>
        </div>

        {% if error %}
            <div class="mb-5 rounded-xl bg-red-500/10 border border-red-500/20 px-4 py-3 text-sm text-red-300">
                {{ error.messageKey|trans(error.messageData, 'security') }}
            </div>
        {% endif %}

        <form method="post" action="{{ path('auth.login') }}" class="space-y-4">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

            <div class="space-y-1">
                <label for="username" class="block text-xs font-bold text-rose-300/50 uppercase tracking-widest">Nom d'utilisateur</label>
                <input type="text" id="username" name="_username" value="{{ lastUsername }}" required autofocus
                    autocapitalize="none" spellcheck="false" autocomplete="username"
                    class="w-full rounded-xl border border-rose-700/30 bg-rose-900/30 backdrop-blur-sm text-white placeholder-rose-300/20 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-rose-400/50 focus:border-rose-400/30 transition">
            </div>

            <div class="space-y-1">
                <label for="password" class="block text-xs font-bold text-rose-300/50 uppercase tracking-widest">Mot de passe</label>
                <input type="password" id="password" name="_password" required
                    autocomplete="current-password"
                    class="w-full rounded-xl border border-rose-700/30 bg-rose-900/30 backdrop-blur-sm text-white placeholder-rose-300/20 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-rose-400/50 focus:border-rose-400/30 transition">
            </div>

            <label class="flex items-center gap-2.5 text-sm text-rose-300/40 cursor-pointer">
                <input type="checkbox" name="_remember_me" class="rounded border-rose-700/30 bg-rose-900/30 text-rose-500 focus:ring-rose-400/30">
                Se souvenir de moi
            </label>

            <button type="submit"
                class="w-full rounded-xl bg-gradient-to-r from-rose-500 to-pink-500 hover:from-rose-400 hover:to-pink-400 active:from-rose-600 active:to-pink-600 text-white font-bold py-3.5 shadow-xl shadow-rose-900/50 transition-all">
                Se connecter
            </button>
        </form>

    </div>
</div>
{% endblock %}