{% extends 'base.html.twig' %}
{% set navbar_is_transparent = false %}
{% block title %}Mes sorties inscrites{% endblock %}

{% block body %}
    <section class="section-padding bg-white px-4 py-5 pt-lg-5 mt-5">
        <div class="container">
            <a href="{{ path('app_account') }}" class="btn btn-outline-secondary btn-sm mb-4">
                ← Retour à mon compte
            </a>

            <h1 class="h3 mb-4">Mes sorties inscrites</h1>

            {% if events is empty %}
                <div class="alert alert-light border">
                    Vous n’êtes inscrit(e) à aucune sortie pour le moment.
                </div>
            {% else %}
                <div class="row g-4">
                    {% for e in events %}
                        <div class="col-md-6 col-lg-4">
                            <div class="card h-100 shadow-sm">
                                <div class="card-body d-flex flex-column">
                                    <h5 class="card-title mb-2">{{ e.title }}</h5>
                                    <p class="small text-muted mb-1">
                                        <i class="bi bi-calendar-event me-1"></i>
                                        {{ e.startAt|date('d/m/Y H:i') }}
                                        {% if e.endAt %} – {{ e.endAt|date('d/m/Y H:i') }}{% endif %}
                                    </p>
                                    {% if e.locationName %}
                                        <p class="small text-muted mb-3">
                                            <i class="bi bi-geo-alt me-1"></i> {{ e.locationName }}
                                        </p>
                                    {% endif %}
                                    <a href="{{ path('app_event_show', { slug: e.slug }) }}" class="btn btn-outline-primary mt-auto">
                                        <i class="bi bi-eye me-1"></i> Voir détails
                                    </a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </section>
{% endblock %}