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

{% block title %}Salons et Foires d'Antiquités - Antiquités en France{% endblock %}

{% block meta_description %}Découvrez tous les salons et foires d'antiquités en France et en Europe. Agenda complet avec dates, lieux et organisateurs.{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .fair-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            transition: all 0.3s ease;
            height: 100%;
        }
        .fair-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .fair-image {
            height: 200px;
            object-fit: cover;
            border-radius: 8px 8px 0 0;
        }
        .fair-status {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: bold;
        }
        .status-upcoming { background: #e3f2fd; color: #1976d2; }
        .status-current { background: #e8f5e8; color: #2e7d32; }
        .status-featured { background: #fff3e0; color: #f57c00; }
        .search-filters {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
        }
        .featured-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 40px;
        }
    </style>
{% 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 active">Salons & Foires</li>
                </ol>
            </nav>
            <h1 class="h2 mb-0">
                <i class="fas fa-calendar-alt me-2"></i>
                Salons et Foires d'Antiquités
            </h1>
            <p class="text-muted mt-2">Découvrez les événements incontournables du monde de l'antiquité</p>
        </div>
    </div>

    <!-- Liste des foires -->
    <div class="row">
        {% for fair in pagination %}
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card fair-card">
                    <div class="card-body">
                        <h5 class="card-title">{{ fair.title }}</h5>
                        <p class="card-text text-muted small">
                            {% if fair.description %}
                                {{ fair.description|slice(0, 100) }}{% if fair.description|length > 100 %}...{% endif %}
                            {% endif %}
                        </p>
                        
                        <div class="mb-3">
                            <div class="row text-sm">
                                <div class="col-12 mb-1">
                                    <i class="fas fa-calendar text-primary me-2"></i>
                                    <strong>{{ fair.startDate|date('d/m/Y') }}</strong>
                                    {% if fair.startDate != fair.endDate %}
                                        - {{ fair.endDate|date('d/m/Y') }}
                                    {% endif %}
                                </div>
                                <div class="col-12 mb-1">
                                    <i class="fas fa-map-marker-alt text-primary me-2"></i>
                                    {{ fair.city }}, {{ fair.country.name }}
                                </div>
                                {% if fair.organizer %}
                                <div class="col-12 mb-1">
                                    <i class="fas fa-user text-primary me-2"></i>
                                    {{ fair.organizer.name }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center">
                            <a href="{{ path('app_fair_show', {slug: fair.slug}) }}" class="btn btn-primary">
                                <i class="fas fa-eye me-1"></i>Voir détails
                            </a>
                            <small class="text-muted">
                                <i class="fas fa-eye me-1"></i>{{ fair.viewsCount }} vues
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="col-12">
                <div class="alert alert-info text-center">
                    <i class="fas fa-info-circle me-2"></i>
                    Aucune foire disponible pour le moment.
                </div>
            </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% 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 %}