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

{% block title %}Modifier mes mots de passe | {{ parent() }}{% endblock %}

{% block body %}
    <div class="min-h-screen bg-bg-primaire flex items-center justify-center p-4 font-sora">
        <div class="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 border-t-4 border-bouton">

            <h1 class="font-caveat text-4xl text-text mb-6 text-center">
                Sécurité du compte
            </h1>

            {{ form_start(form) }}
            <div class="space-y-4">
                {# Champ Ancien Mot de Passe #}
                <div class="space-y-1">
                    {{ form_label(form.oldPassword, 'Mot de passe actuel', {
                        'label_attr': {'class': 'block text-sm font-semibold text-text'}
                    }) }}
                    {{ form_widget(form.oldPassword, {
                        'attr': {'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow'}
                    }) }}

                    {# Affichage message pour les erreurs de saisie de l'ancien mot de passe #}
                    <div class="text-red-500 text-xs mt-1 italic">
                        {{ form_errors(form.oldPassword) }}
                    </div>
                </div>

                {# Champs Nouveau Mot de Passe #}
                <div class="space-y-4 pt-2">
                    {# Affichage de l'erreur si les deux champs ne correspondent pas #}
                    <div class="text-red-500 text-xs italic">
                        {{ form_errors(form.newPassword) }}
                    </div>
                    <div class="space-y-1">
                        {{ form_label(form.newPassword.first, 'Nouveau mot de passe', {
                            'label_attr': {'class': 'block text-sm font-semibold text-text'}
                        }) }}
                        {{ form_widget(form.newPassword.first, {
                            'attr': {'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton transition-shadow'}
                        }) }}

                        {# Affichage de l'erreur de longueur (min 8 caractères) #}
                        <div class="text-red-500 text-xs mt-1 italic">
                            {{ form_errors(form.newPassword.first) }}
                        </div>
                    </div>

                    <div class="space-y-1">
                        {{ form_label(form.newPassword.second, 'Confirmer le nouveau mot de passe', {
                            'label_attr': {'class': 'block text-sm font-semibold text-text'}
                        }) }}
                        {{ form_widget(form.newPassword.second, {
                            'attr': {'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton transition-shadow'}
                        }) }}
                    </div>

                    <div class="text-red-500 text-xs mt-1">
                        {{ form_errors(form.newPassword) }}
                    </div>
                </div>

                {# Bouton de validation #}
                <button type="submit"
                        class="w-full bg-bouton hover:bg-bouton-hover text-text font-bold py-3 rounded-lg shadow-md transition-colors mt-6">
                    Mettre à jour mon mot de passe
                </button>
            </div>
            {{ form_end(form) }}

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