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

{% block title %}Concours — Les Écuries de Brochemerle{% endblock %}
{% block meta_description %}Calendrier des concours CSO et épreuves Club aux Écuries de Brochemerle, Étusson (79){% endblock %}

{% block body %}

<section class="page-hero">
    <div class="hero-bg hero-bg--concours"></div>
    <div class="hero-overlay"></div>
    <div class="container page-hero-content">
        <p class="eyebrow">Compétitions</p>
        <h1>Nos Concours</h1>
        <p class="page-subtitle">Épreuves Amateurs · Épreuves Club · Calendrier</p>
    </div>
</section>

<section class="section">
    <div class="container">

        {% if upcoming is empty and past is empty %}
        <p class="concours-empty">Aucun concours programmé pour le moment. Revenez bientôt !</p>

        {% else %}

        {# ── Prochains concours ── #}
        {% set mois = ['JAN','FÉV','MAR','AVR','MAI','JUI','JUL','AOÛ','SEP','OCT','NOV','DÉC'] %}

        {% if upcoming is not empty %}
        <h2 class="section-title">Prochains concours</h2>
        <div class="concours-list concours-list--upcoming">
            {% for c in upcoming %}
            <a href="{{ path('app_concours_show', {id: c.id}) }}" class="concours-card concours-card--upcoming">
                <div class="concours-date-badge">
                    <span class="concours-day">{{ c.date|date('d') }}</span>
                    <span class="concours-month">{{ mois[c.date|date('n')-1] }}</span>
                    <span class="concours-year">{{ c.date|date('Y') }}</span>
                </div>
                <div class="concours-info">
                    <h3>{{ c.titre }}</h3>
                    <p class="concours-lieu">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                        {{ c.lieu ?: 'Les Écuries de Brochemerle' }}
                    </p>
                    <div class="concours-tags">
                        {% if c.numeroAmateur %}<span class="concours-tag">Amateur</span>{% endif %}
                        {% if c.numeroSif %}<span class="concours-tag">Club</span>{% endif %}
                        {% if c.horairePdf %}<span class="concours-tag concours-tag--pdf">📄 Programme</span>{% endif %}
                    </div>
                </div>
                <div class="concours-arrow">
                    <svg width="20" height="20" 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>
                </div>
            </a>
            {% endfor %}
        </div>
        {% endif %}

        {# ── Concours passés ── #}
        {% if past is not empty %}
        <h2 class="section-title{% if upcoming is not empty %} section-title--spaced{% endif %}">Concours passés</h2>
        <div class="concours-list concours-list--past">
            {% for c in past %}
            <a href="{{ path('app_concours_show', {id: c.id}) }}" class="concours-card concours-card--past">
                <div class="concours-date-badge concours-date-badge--past">
                    <span class="concours-day">{{ c.date|date('d') }}</span>
                    <span class="concours-month">{{ mois[c.date|date('n')-1] }}</span>
                    <span class="concours-year">{{ c.date|date('Y') }}</span>
                </div>
                <div class="concours-info">
                    <h3>{{ c.titre }}</h3>
                    <p class="concours-lieu">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                        {{ c.lieu ?: 'Les Écuries de Brochemerle' }}
                    </p>
                </div>
                <div class="concours-arrow">
                    <svg width="18" height="18" 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>
                </div>
            </a>
            {% endfor %}
        </div>
        {% endif %}

        {% endif %}

    </div>
</section>

{% endblock %}