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

{% block title %}Installations — Les Écuries de Brochemerle{% endblock %}
{% block meta_description %}Manège 42×20, carrières de dressage et CSO, boxes, selleries, 38 ha de prés — Les Écuries de Brochemerle{% endblock %}

{% block body %}

<section class="page-hero page-hero--compact">
    <div class="hero-bg hero-bg--installations"></div>
    <div class="hero-overlay"></div>
    <div class="container page-hero-content">
        <p class="eyebrow">Découvrir</p>
        <h1>Nos Installations</h1>
        <p class="page-subtitle">Manège · Carrières · Boxes · Selleries · 38 ha de prés</p>
    </div>
</section>

<section class="section section--compact">
    <div class="container" data-controller="installations">

        {% if photos is empty %}
        <p style="text-align:center;color:#999;padding:48px 0">Aucune photo disponible pour le moment.</p>
        {% else %}

        <div class="carousel-layout">

            {# Miniatures — à gauche sur grand écran, en dessous sur mobile #}
            <div id="carousel-thumbs" class="carousel-thumbs-wrap">
                {% for photo in photos %}
                <img src="/{{ photo.filename }}"
                     class="carousel-thumb{% if loop.first %} active{% endif %}"
                     data-bs-slide-to="{{ loop.index0 }}"
                     alt="{{ photo.title }}"
                     title="{{ photo.title }}">
                {% endfor %}
            </div>

            {# Carousel principal #}
            <div id="installations-carousel" class="carousel slide" data-bs-ride="false">
                <div class="carousel-inner">
                    {% for photo in photos %}
                    <div class="carousel-item{% if loop.first %} active{% endif %}">
                        <a href="/{{ photo.filename }}"
                           data-glightbox="title: {{ photo.title | e('html_attr') }}"
                           data-gallery="installations">
                            <img src="/{{ photo.filename }}"
                                 class="d-block w-100 carousel-main-img"
                                 alt="{{ photo.title }}"
                                 loading="lazy">
                        </a>
                        <div class="carousel-caption d-none d-md-block">
                            <p>{{ photo.title }}</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <button class="carousel-control-prev" type="button"
                        data-bs-target="#installations-carousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Précédent</span>
                </button>
                <button class="carousel-control-next" type="button"
                        data-bs-target="#installations-carousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Suivant</span>
                </button>
            </div>

        </div>

        {% endif %}

    </div>
</section>

{% endblock %}

{% block javascripts %}
<script>
(function () {
    var carouselEl = document.getElementById('installations-carousel');
    if (!carouselEl) return;
    window.bootstrap.Carousel.getOrCreateInstance(carouselEl, {
        interval: 10000,
        ride: 'carousel'
    });
})();
</script>
{% endblock %}