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

{% block title %}Élevage — Les Écuries de Brochemerle{% endblock %}
{% block meta_description %}Élevage de chevaux de sport aux Écuries de Brochemerle, Étusson (79). Poulinières et poulains issus de lignées reconnues, dans les Deux-Sèvres entre Bressuire, Cholet et Saumur.{% endblock %}

{% block body %}

<section class="page-hero">
    <div class="hero-bg hero-bg--elevage"></div>
    <div class="hero-overlay"></div>
    <div class="container page-hero-content">
        <p class="eyebrow">Passion & transmission</p>
        <h1>Notre Élevage</h1>
        <p class="page-subtitle">Nos poulinières, nos poulains et leur généalogie</p>
    </div>
</section>

{# ══════════════════════════════════════════
   SLIDER POULINIÈRES
══════════════════════════════════════════ #}
<section class="intro section">
    <div class="container" style="max-width:720px">
        <div data-reveal="from-left">
            <p class="eyebrow">Élevage en Deux-Sèvres</p>
            <h2 class="section-title" style="text-align:left">Un élevage ancré dans la région</h2>
            <p>Aux Écuries de Brochemerle, l'élevage fait partie de l'ADN de la structure depuis ses débuts. Nos poulinières sont sélectionnées pour leurs qualités morphologiques et leur tempérament, avec l'objectif de produire des chevaux de sport polyvalents, aptes aussi bien au dressage qu'au saut d'obstacles.</p>
            <p>Nos poulains ont rejoint des cavaliers du <strong>Choletais</strong>, du <strong>Saumurois</strong>, d'<strong>Angers</strong> et au-delà — une reconnaissance régionale de la qualité de notre production. Chaque poulain naît et grandit sur place, dans nos prés et notre écurie, entouré d'attentions dès ses premiers jours.</p>
        </div>
    </div>
</section>

<section class="cards-section cards-section-top">
    <div class="container">
        <h2 class="section-title">Nos Poulinières</h2>
    </div>

    {% if poulinières is empty %}
    <div class="container">
        <div class="elevage-empty">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M6 20v-2a6 6 0 0 1 12 0v2"/></svg>
            <p>Aucune poulinière pour le moment.<br><span>Revenez bientôt !</span></p>
        </div>
    </div>
    {% else %}
    <div class="cards-viewport">
        <div class="cards-belt" id="mares-belt">
            {% for jument in poulinières %}
            <div class="card-slide" style="background-image:url(/{{ jument.photo }})">
                <div class="card-overlay"></div>
                <div class="card-content">
                    <div class="card-icon">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.85)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M6 20v-2a6 6 0 0 1 12 0v2"/></svg>
                    </div>
                    <h3>{{ jument.nom }}</h3>
                    <div class="card-sep"></div>
                    <p class="card-mare-lineage">
                        ♂ {{ jument.pere }}<br>
                        ♀ {{ jument.mere }}
                    </p>
                    {% if jument.poulainsList is not empty %}
                    <div class="card-mare-foals">
                        {% for tag in jument.poulainsList %}
                        <span class="card-mare-foal-tag">{{ tag }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    <button class="slide-btn slide-prev" id="mares-prev" aria-label="Précédent">&#8249;</button>
    <button class="slide-btn slide-next" id="mares-next" aria-label="Suivant">&#8250;</button>
    {% endif %}
</section>

{# ══════════════════════════════════════════
   POULAINS
══════════════════════════════════════════ #}
<section class="section">
    <div class="container">
        <h2 class="section-title">Nos Poulains</h2>

        {% if poulains is empty %}
        <div class="elevage-empty elevage-empty--light">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/><path d="M12 8v4m0 4h.01"/></svg>
            <p>Aucun poulain pour le moment.<br><span>Revenez nous voir prochainement !</span></p>
        </div>

        {% else %}

        {% for poulain in poulains %}
        <div class="foal-card" data-reveal="from-left">

            <div class="foal-header">
                <div class="foal-identity">
                    <div class="foal-name-row">
                        <div class="foal-name">{{ poulain.nom }}</div>
                        {% if poulain.isVente %}
                        <span class="foal-vente-badge">À Vendre</span>
                        {% endif %}
                    </div>
                    <div class="foal-birth">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="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>
                        Né(e) le {{ poulain.naissance }}
                    </div>
                    <div class="foal-details">
                        <span class="foal-badge">{{ poulain.sexe }}</span>
                        <span class="foal-badge">{{ poulain.robe }}</span>
                    </div>
                </div>
            </div>

            <div class="foal-body">

                <div class="foal-pedigree">
                    <h3 class="section-title-sm">Généalogie</h3>
                    <div class="pedigree">
                        <div class="ped-node ped-subject">
                            <div class="ped-label">Poulain</div>
                            <div class="ped-name">{{ poulain.nom | split(' ') | last }}</div>
                        </div>
                        <div class="ped-h-conn"></div>
                        <div class="pedigree-right">
                            <div class="pedigree-branch">
                                <div class="ped-node ped-parent">
                                    <div class="ped-label">Père</div>
                                    <div class="ped-name">{{ poulain.pereNom }}</div>
                                </div>
                                <div class="ped-h-conn"></div>
                                <div class="pedigree-gp">
                                    <div class="pedigree-gp-branch">
                                        <div class="ped-node ped-gp">
                                            <div class="ped-label">Grand-père paternel</div>
                                            <div class="ped-name">{{ poulain.pereGpere }}</div>
                                        </div>
                                    </div>
                                    <div class="pedigree-gp-branch">
                                        <div class="ped-node ped-gp">
                                            <div class="ped-label">Grand-mère paternelle</div>
                                            <div class="ped-name">{{ poulain.pereGmere }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="pedigree-branch">
                                <div class="ped-node ped-parent">
                                    <div class="ped-label">Mère</div>
                                    <div class="ped-name">{{ poulain.mereNom }}</div>
                                </div>
                                <div class="ped-h-conn"></div>
                                <div class="pedigree-gp">
                                    <div class="pedigree-gp-branch">
                                        <div class="ped-node ped-gp">
                                            <div class="ped-label">Grand-père maternel</div>
                                            <div class="ped-name">{{ poulain.mereGpere }}</div>
                                        </div>
                                    </div>
                                    <div class="pedigree-gp-branch">
                                        <div class="ped-node ped-gp">
                                            <div class="ped-label">Grand-mère maternelle</div>
                                            <div class="ped-name">{{ poulain.mereGmere }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {% if poulain.photos is not empty %}
                <div class="foal-gallery">
                    <h3 class="section-title-sm">Photos</h3>
                    <div class="mini-slider-wrap">
                        <div class="mini-slider">
                            {% for photo in poulain.photos %}
                            <div class="mini-slide">
                                <a href="/{{ photo }}"
                                   data-glightbox="title: {{ poulain.nom | e('html_attr') }}"
                                   data-gallery="foal-{{ loop.parent.loop.index }}">
                                    <img src="/{{ photo }}" alt="{{ poulain.nom }}" loading="lazy">
                                </a>
                            </div>
                            {% endfor %}
                        </div>
                        <button class="mini-btn mini-prev-btn" type="button" aria-label="Précédent">&#8249;</button>
                        <button class="mini-btn mini-next-btn" type="button" aria-label="Suivant">&#8250;</button>
                    </div>
                    <div class="mini-slider-dots">
                        {% for photo in poulain.photos %}
                        <span class="mini-dot{% if loop.first %} active{% endif %}"></span>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

            </div>
        </div>
        {% endfor %}

        {% endif %}
    </div>
</section>

{% endblock %}

{% block javascripts %}
<script>
/* ── Slider poulinières ── */
(function () {
    var belt = document.getElementById('mares-belt');
    if (!belt) return;
    var orig = Array.from(belt.querySelectorAll('.card-slide'));
    var n = orig.length, gap = 12, idx = n, busy = false;
    orig.forEach(function (s) { belt.appendChild(s.cloneNode(true)); });
    orig.slice().reverse().forEach(function (s) { belt.insertBefore(s.cloneNode(true), belt.firstChild); });
    function sw() { return belt.querySelector('.card-slide').offsetWidth + gap; }
    function snap(i) { idx = i; belt.style.transition = 'none'; void belt.offsetWidth; belt.style.transform = 'translateX(' + (-i * sw()) + 'px)'; }
    function slide(i) { idx = i; belt.style.transition = 'transform .48s cubic-bezier(.4,0,.2,1)'; belt.style.transform = 'translateX(' + (-i * sw()) + 'px)'; }
    belt.addEventListener('transitionend', function () { busy = false; if (idx >= n * 2) snap(idx - n); else if (idx < n) snap(idx + n); });
    snap(n);
    var touchX = 0;
    belt.addEventListener('touchstart', function (e) { touchX = e.touches[0].clientX; }, { passive: true });
    belt.addEventListener('touchend', function (e) { var d = e.changedTouches[0].clientX - touchX; if (Math.abs(d) > 40 && !busy) { busy = true; slide(d < 0 ? idx + 1 : idx - 1); } }, { passive: true });
    var p = document.getElementById('mares-prev');
    var nx = document.getElementById('mares-next');
    if (p)  p.addEventListener('click', function () { if (!busy) { busy = true; slide(idx - 1); } });
    if (nx) nx.addEventListener('click', function () { if (!busy) { busy = true; slide(idx + 1); } });
})();
</script>
{% endblock %}