{% extends 'etl/base.twig' %}

{% block title %}Mon Compte{% endblock %}

{% block body %}
    <div class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
        
        {# HEADER #}
        <div class="space-y-2">
            <h1 class="text-2xl font-black text-slate-900 tracking-tight">Mon Compte</h1>
            <p class="text-sm text-slate-500 font-medium">Gérez vos informations de connexion</p>
        </div>

        {# FORMULAIRE #}
        <div class="bg-white rounded-[2rem] p-6 border border-slate-100 shadow-sm">
            <h2 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-6">Changer de mot de passe</h2>
            
            {{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}
                
                <div class="space-y-4">
                    <div>
                        {{ form_label(form.password.first, 'Nouveau mot de passe', {'label_attr': {'class': 'block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5 ml-1'}}) }}
                        {{ form_widget(form.password.first, {'attr': {'class': 'w-full bg-slate-50 border border-slate-200 rounded-2xl px-5 py-4 text-sm font-bold text-slate-800 outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all placeholder:text-slate-300'}}) }}
                        <div class="text-rose-500 text-xs mt-1 font-bold">{{ form_errors(form.password.first) }}</div>
                    </div>
                    
                    <div>
                        {{ form_label(form.password.second, 'Confirmer le mot de passe', {'label_attr': {'class': 'block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5 ml-1'}}) }}
                        {{ form_widget(form.password.second, {'attr': {'class': 'w-full bg-slate-50 border border-slate-200 rounded-2xl px-5 py-4 text-sm font-bold text-slate-800 outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all placeholder:text-slate-300'}}) }}
                        <div class="text-rose-500 text-xs mt-1 font-bold">{{ form_errors(form.password.second) }}</div>
                    </div>
                </div>

                <button type="submit" class="w-full bg-blue-600 text-white font-black text-sm uppercase tracking-widest py-4 rounded-2xl shadow-lg shadow-blue-600/30 active:scale-95 transition-all hover:bg-blue-700 mt-4">
                    Mettre à jour
                </button>

            {{ form_end(form) }}
        </div>

        {# RETOUR #}
        <div class="text-center">
            <a href="{{ path('etl_home') }}" class="text-xs font-bold text-slate-400 hover:text-blue-600 transition-colors">Retour au tableau de bord</a>
        </div>

    </div>
{% endblock %}