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

{% block title %}Definir votre mot de passe - Association E-Cosplay{% endblock %}

{% block header %}
    <header class="sticky top-0 z-50 glass-heavy" >
        <div class="flex justify-center items-center h-16">
            <a href="{{ path('app_home') }}" aria-label="CRM E-Cosplay - Accueil">
                <img class="h-10 md:h-12 w-auto" src="{{ 'logo.jpg' | imagine_filter('logo') }}" alt="CRM E-Cosplay" loading="eager">
            </a>
        </div>
    </header>
{% endblock %}

{% block body %}
<div class="flex items-center justify-center min-h-[calc(100vh-5rem)] px-4">
    <div class="w-full max-w-md">
        <div class="glass-heavy overflow-hidden">
            <div class="bg-yellow-400 border-b border-white/20 p-6 text-center">
                <h1 class="text-2xl font-bold">Definir votre mot de passe</h1>
                <p class="text-sm font-bold mt-1">Bienvenue {{ user.firstName }} !</p>
            </div>

            <div class="p-8">
                {% if error %}
                    <div class="mb-6 p-4 glass border border-red-300 text-red-800 font-medium text-sm">
                        {{ error }}
                    </div>
                {% endif %}

                <p class="text-sm text-gray-600 mb-6">Choisissez un mot de passe securise pour acceder a votre espace revendeur.</p>

                <form method="post" class="flex flex-col gap-5">
                    <div>
                        <label for="password" class="block text-xs font-bold uppercase tracking-wider mb-2">Nouveau mot de passe</label>
                        <input type="password" id="password" name="password" required minlength="8"
                               class="w-full px-4 py-3 input-glass text-sm font-medium"
                               placeholder="Minimum 8 caracteres">
                    </div>

                    <div>
                        <label for="password_confirm" class="block text-xs font-bold uppercase tracking-wider mb-2">Confirmer le mot de passe</label>
                        <input type="password" id="password_confirm" name="password_confirm" required minlength="8"
                               class="w-full px-4 py-3 input-glass text-sm font-medium"
                               placeholder="Retapez le mot de passe">
                    </div>

                    <button type="submit"
                            class="w-full px-6 py-3 btn-gold text-sm font-bold uppercase tracking-wider text-gray-900">
                        Definir mon mot de passe
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
