{# templates/account/index.html.twig #}
{% extends 'base.html.twig' %}

{% set navbar_is_transparent = false %}
{% block title %}Mon compte{% endblock %}

{% block body %}
    <section id="account" class="section-padding bg-white px-4 py-5 pt-lg-5 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h1 class="display-5 fw-bold mb-4">Bienvenue dans votre espace membre</h1>
                </div>
            </div>

            <div class="row gx-4 gy-4">
                {# ======================
         Mes informations
         ====================== #}
                <div class="col-md-6">
                    <div class="card shadow-sm h-100 border-0">
                        <div class="card-body">
                            <h5 class="card-title d-flex align-items-center gap-2 mb-3">
                                <i class="bi bi-person-circle"></i> Mes informations
                            </h5>

                            <dl class="row mb-0">
                                <dt class="col-sm-4">Email</dt>
                                <dd class="col-sm-8">{{ app.user.email }}</dd>

                                {% if app.user.firstname is not empty %}
                                    <dt class="col-sm-4">Prénom</dt>
                                    <dd class="col-sm-8">{{ app.user.firstname }}</dd>
                                {% endif %}

                                {% if app.user.lastname is not empty %}
                                    <dt class="col-sm-4">Nom</dt>
                                    <dd class="col-sm-8">{{ app.user.lastname }}</dd>
                                {% endif %}
                            </dl>
                        </div>
                    </div>
                </div>

                {# ======================
         Mes actions
         ====================== #}
                <div class="col-md-6">
                    <div class="card shadow-sm h-100 border-0">
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title d-flex align-items-center gap-2 mb-3">
                                <i class="bi bi-lightning-charge"></i> Mes actions
                            </h5>

                            <div class="d-grid gap-2">

                                {# --- Annonces --- #}
                                <a href="{{ path('account_ad_index') }}" class="btn btn-outline-primary">
                                    <i class="bi bi-megaphone me-1"></i> Mes annonces
                                </a>
                                <a href="{{ path('account_ad_new') }}" class="btn btn-success">
                                    <i class="bi bi-plus-lg me-1"></i> Déposer une annonce
                                </a>

                                <hr class="my-2">

                                {# --- Événements (espace membre) --- #}
                                <a href="{{ path('account_events_index') }}" class="btn btn-outline-secondary">
                                    <i class="bi bi-calendar3 me-1"></i> Voir mes événements
                                </a>
                                <a href="{{ path('account_events_my_outings') }}" class="btn btn-info text-white">
                                    <i class="bi bi-flag me-1"></i> Mes sorties inscrites
                                </a>


                                <a href="{{ path('account_events_new') }}" class="btn btn-warning text-white">
                                    <i class="bi bi-plus-circle me-1"></i> Créer un événement
                                </a>

                                <a href="{{ path('app_account_edit') }}" class="btn btn-warning px-4 py-2">
                                    ✏️ Modifier mon profil
                                </a>


                                <hr class="my-2">


                                {% if is_granted('ROLE_ADMIN') %}
                                    <a href="{{ path('admin') }}" class="btn btn-dark">
                                        <i class="bi bi-speedometer2 me-1"></i> Accéder au back-office
                                    </a>
                                    <hr class="my-2">
                                {% endif %}

                                {# Déconnexion (ajuste si tu usas logout en POST) #}

                                <a href="{{ path('app_logout') }}" class="btn btn-outline-danger">
                                    <i class="bi bi-box-arrow-right me-1"></i> Se déconnecter
                                </a>
                                {# Si tu logout es POST:
              <form method="post" action="{{ path('app_logout') }}" class="d-grid">
                <button class="btn btn-outline-danger" type="submit">
                  <i class="bi bi-box-arrow-right me-1"></i> Se déconnecter
                </button>
              </form>
                                #}

                                {# --- Supprimer mon compte (POST + CSRF + confirm) --- #}
                                <form method="post"
                                      action="{{ path('app_account_delete') }}"
                                      class="d-grid"
                                      onsubmit="return confirm('Cette action est irréversible. Êtes-vous sûr de vouloir supprimer votre compte ?');">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete_account' ~ app.user.id) }}">
                                    <button type="submit" class="btn btn-danger">
                                        <i class="bi bi-trash me-1"></i> Supprimer mon compte
                                    </button>
                                    <small class="text-muted mt-1">Action irréversible</small>
                                </form>

                            </div>

                            <div class="mt-auto"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}