{% 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-12 text-center">
                Modifier le mot de passe de mon espace kaznaute
            </h1>

            {{ form_start(form) }}
            <div class="space-y-6">
                {# Champ Ancien Mot de Passe #}
                <div class="space-y-1">
                    {{ form_label(form.oldPassword, 'Mon 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',
                            'placeholder':'Saisissez votre ancien mot de passe'
                        }
                    }) }}

                    {# 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-6">
                    {# Affichage d'un message d'erreur si les deux champs ne correspondent pas #}
                    <div class="text-red-500 text-xs italic">
                        {{ form_errors(form.newPassword) }}
                    </div>

                    <div class="flex flex-col gap-1.5">
                        {{ form_label(form.newPassword.first, 'Mon 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 placeholder-gris-moyen transition-all',
                                'placeholder':'Saisissez un nouveau mot de passe'
                            }
                        }) }}
                        <div class="text-red-500 text-xs italic">
                            {{ form_errors(form.newPassword.first) }}
                        </div>
                    </div>

                    <div class="flex flex-col gap-1.5">
                        {{ form_label(form.newPassword.second, 'Confirmer mon 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 placeholder-gris-moyen transition-all',
                                'placeholder': 'Confirmez votre saisie'
                            }
                        }) }}
                    </div>
                </div>

                {# Bouton de validation #}
                <div class="flex justify-center pt-12">
                    <button type="submit"
                            class="w-full sm:w-auto px-8 py-3 bg-bouton hover:bg-bouton-hover text-text text-sm font-bold rounded-lg shadow transition-all active:scale-95">
                        Mettre à jour mon mot de passe
                    </button>
                </div>
            </div>
            {{ form_end(form) }}

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