{# templates/user/edit_password.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Modifier mon mot de passe | {{ parent() }}{% endblock %}

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

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

            {{ form_start(form) }}
            <div class="space-y-4">
                {# Champ Ancien Mot de Passe #}
                <div>
                    {{ form_label(form.oldPassword, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1'}}) }}
                    {{ form_widget(form.oldPassword, {'attr': {'class': 'w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-brand-teal focus:border-transparent outline-none transition-all'}}) }}
                    {{ form_errors(form.oldPassword) }}
                </div>

                {# Champs Nouveau Mot de Passe (RepeatedType) #}
                <div class="space-y-4">
                    {{ form_row(form.newPassword.first, {'attr': {'class': 'w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-brand-teal outline-none'}}) }}
                    {{ form_row(form.newPassword.second, {'attr': {'class': 'w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-brand-teal outline-none'}}) }}
                </div>

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

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