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

{% block seo %}
    <title>{{ seo.title|default('Événements') }} — {{ site.name|default('') }}</title>
    <meta name="description" content="{{ seo.description|default('Découvrez nos événements à venir et passés') }}">
{% endblock %}

{% block body %}
<div class="container py-5">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
            <li class="breadcrumb-item active" aria-current="page">Événements</li>
        </ol>
    </nav>

    <h1 class="title-one mb-4">{{ title_page }}</h1>

    {# --- Événements à venir --- #}
    {% if upcoming|length > 0 %}
    <section class="events-section mb-5">
        <h2 class="events-section__title">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            À venir
        </h2>
        <div class="events-grid">
            {% for event in upcoming %}
                {% include '_partials/_event_card.html.twig' with { event: event } %}
            {% endfor %}
        </div>
    </section>
    {% endif %}

    {# --- Événements passés --- #}
    {% if pastEvents|length > 0 %}
    <section class="events-section">
        <h2 class="events-section__title events-section__title--past">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></svg>
            Événements passés
        </h2>
        <div class="events-grid">
            {% for event in pastEvents %}
                {% include '_partials/_event_card.html.twig' with { event: event, isPast: true } %}
            {% endfor %}
        </div>

        {# Pagination #}
        {% if totalPages > 1 %}
        <nav aria-label="Pagination événements passés" class="mt-4">
            <ul class="pagination justify-content-center">
                {% if currentPage > 1 %}
                <li class="page-item">
                    <a class="page-link" href="{{ path('app_event_index', { page: currentPage - 1 }) }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
                    </a>
                </li>
                {% endif %}

                {% for p in 1..totalPages %}
                <li class="page-item {{ p == currentPage ? 'active' : '' }}">
                    <a class="page-link" href="{{ path('app_event_index', { page: p }) }}">{{ p }}</a>
                </li>
                {% endfor %}

                {% if currentPage < totalPages %}
                <li class="page-item">
                    <a class="page-link" href="{{ path('app_event_index', { page: currentPage + 1 }) }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
    </section>
    {% endif %}

    {# --- État vide --- #}
    {% if upcoming|length == 0 and pastEvents|length == 0 %}
    <div class="events-empty">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
        <p>Aucun événement pour le moment.</p>
    </div>
    {% endif %}
</div>
{% endblock %}