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

{% block title %}Mon Compte - {{ parent() }}{% endblock %}

{% block account_body %}
{# Connexion du contrôleur Stimulus account-location et passage de l'URL d'update #}
<section class="py-12 px-4 min-h-screen"
         data-controller="account-location"
         data-account-location-update-url-value="{{ path('app_account_update_location') }}"
>
    <div class="container mx-auto max-w-3xl">
        <div class="card-bg p-8 rounded-lg shadow-lg mt-8">
            <h2 class="text-2xl font-semibold mb-6">Mes Informations Personnelles</h2>
            
            <div class="space-y-3 text-text-secondary mb-6">
                <p><strong class="text-text-primary">Prénom :</strong> {{ app.user.firstName|default('Non renseigné') }}</p>
                <p><strong class="text-text-primary">Nom :</strong> {{ app.user.lastName|default('Non renseigné') }}</p>
                <p><strong class="text-text-primary">Email :</strong> {{ app.user.email }}</p>
                {% if app.user.country is not null and app.user.city is not null %}
                    <p><strong class="text-text-primary">Adresse :</strong> {{ app.user.city ~ ', ' ~ app.user.country  }}</p>
                {% else %}
                     <p><strong class="text-text-primary">Adresse :</strong> Non renseignée</p>
                {% endif %}
            </div>

            <div class="mt-6 border-t border-[var(--border-color)] border-opacity-30 pt-6 flex flex-col sm:flex-row gap-4 items-center">
                <a href="{{ path('app_account_edit') }}" class="btn-secondary w-full sm:w-auto">Modifier mes informations</a>
                
                <button id="update-location-btn" 
                        type="button" 
                        class="btn-secondary w-full sm:w-auto flex items-center justify-center gap-2"
                        title="Actualiser ma position (nécessite autorisation)"
                        data-account-location-target="button"
                        data-action="click->account-location#updateLocation"
                >
                    <i class="bi bi-geo-alt-fill"></i>
                    <span>Actualiser Position</span>
                </button>
            </div>
            <div id="location-status" class="text-xs text-text-secondary mt-2" data-account-location-target="status"></div>

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