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

{% block title %}Élevage — Les Écuries de Brochemerle{% endblock %}
{% block meta_description %}Nos poulinières et poulains — élevage équestre aux Écuries de Brochemerle, Étusson (79){% 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="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 %}