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

{% block title %}Foires à Venir - Antiquités en France{% endblock %}

{% block body %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
                    <li class="breadcrumb-item"><a href="{{ path('app_fair_index') }}">Salons & Foires</a></li>
                    <li class="breadcrumb-item active">À venir</li>
                </ol>
            </nav>
            <h1 class="h2 mb-0">
                <i class="fas fa-clock me-2"></i>
                Foires à Venir
            </h1>
            <p class="text-muted mt-2">Découvrez les prochains événements d'antiquités</p>
        </div>
    </div>

    <div class="row">
        {% for fair in pagination %}
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{{ fair.title }}</h5>
                        <p class="card-text">
                            <i class="fas fa-calendar text-primary me-2"></i>{{ fair.startDate|date('d/m/Y') }}<br>
                            <i class="fas fa-map-marker-alt text-primary me-2"></i>{{ fair.city }}, {{ fair.country.name }}
                        </p>
                        <a href="{{ path('app_fair_show', {slug: fair.slug}) }}" class="btn btn-primary">Voir détails</a>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="col-12">
                <div class="alert alert-info text-center">
                    Aucune foire à venir pour le moment.
                </div>
            </div>
        {% endfor %}
    </div>

    {% if pagination.pageCount > 1 %}
        <div class="row mt-4">
            <div class="col-12 d-flex justify-content-center">
                {{ knp_pagination_render(pagination) }}
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}