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

{% block title %}{{ page_title | default('Modifier mon compte') }} - {{ parent() }}{% endblock %}

{% block account_body %}
<section class="py-12 px-4 flex items-center justify-center">
    <div class="container mx-auto max-w-xl">
        {# Affichage des messages Flash - Utilise les classes globales #}
        {% for label, messages in app.flashes(['success', 'warning', 'error', 'info']) %}
            {% for message in messages %}
                <div class="flash-message 
                    {% if label == 'success' %}flash-success
                    {% elseif label == 'error' %}flash-error
                    {% elseif label == 'warning' %}flash-warning {# Créer .flash-warning dans base.html.twig si besoin #}
                    {% else %}flash-info{% endif %}" 
                     role="alert">
                    {{ message }}
                </div>
            {% endfor %}
        {% endfor %}

        <div class="card-bg p-8 rounded-lg shadow-lg">
            <h2 class="text-3xl font-semibold text-text-primary mb-6 text-center">{{ page_title | default('Modifier mes informations') }}</h2>

            {{ form_start(accountForm, {
                'attr': {'class': 'space-y-6'} 
            }) }}

            {# Afficher chaque champ manuellement pour plus de contrôle ou utiliser form_widget(accountForm) #}
            <div>
                {{ form_label(accountForm.firstName) }}
                {{ form_widget(accountForm.firstName) }}
                {{ form_errors(accountForm.firstName) }}
            </div>

            <div>
                {{ form_label(accountForm.lastName) }}
                {{ form_widget(accountForm.lastName) }}
                {{ form_errors(accountForm.lastName) }}
            </div>

            <div>
                {{ form_label(accountForm.email) }}
                {{ form_widget(accountForm.email) }}
                {{ form_errors(accountForm.email) }}
            </div>
            
            {# Affichage du bouton Submit défini dans le FormType #}
            {{ form_widget(accountForm.save) }}

            {{ form_end(accountForm) }}

            {# Optionnel: Ajouter un lien pour revenir à la page principale du compte #}
            <div class="text-center mt-6">
                <a href="{{ path('app_account_profile') }}" class="text-sm text-accent-secondary hover:underline">Retour à mon compte</a>
            </div>
        </div>
    </div>
</section>

{# Ajout de styles spécifiques pour les champs de formulaire si non définis globalement #}
{% block stylesheets %}
    {{ parent() }}
    <style>
        .form-input {
            display: block;
            width: 100%;
            padding: 0.5rem 0.75rem;
            background-color: rgba(21, 21, 21, 0.7); /* --near-black avec transparence */
            border: 1px solid var(--border-color);
            border-radius: 0.375rem; /* rounded-md */
            color: var(--text-primary);
            transition: border-color 0.3s ease;
            margin-top: 0.25rem; /* Espace après le label */
        }
        .form-input:focus {
            outline: none;
            border-color: var(--accent-secondary);
            box-shadow: 0 0 0 2px rgba(199, 54, 89, 0.5); /* Ombre focus avec couleur accent */
        }
        label {
            display: block;
            margin-bottom: 0.25rem;
            font-weight: 500;
            color: var(--text-secondary);
        }
        /* Style pour les erreurs de formulaire */
        .form-errors ul {
            list-style: none;
            padding: 0;
            margin: 0.25rem 0 0 0;
        }
        .form-errors li {
            color: var(--bright-red);
            font-size: 0.875rem; /* text-sm */
        }
    </style>
{% endblock %}

{% endblock %}