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

{% block title %}Coutellerie artisanale — couteaux faits main à Clermont-Ferrand{% endblock %}
{% block metaDesc %}La coutellerie artisanale Vulcan' Affûtage : couteaux faits main, tire-bouchons et créations uniques de l'atelier de Clermont-Ferrand. Pièces d'artisan, livraison partout en France.{% endblock %}
{# Chaque page du listing est sa propre URL canonique : renvoyer les pages 2..N
   vers la page 1 revenait à demander à Google de ne pas les indexer. #}
{% block canonical %}{{ canonicalPath }}{% endblock %}

{% block headerProduit %}gColor{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/ds-v2.css') }}">
    <link rel="stylesheet" href="{{ asset('styles/ds-v2-pages.css') }}">
{% endblock %}

{% block body %}
<main class="nhp-main">

    {# ============================ HERO ============================ #}
    <section class="v2-phero" data-v2-hero>
        <div class="nhp-wrap">
            <span class="nhp-eyebrow">La boutique · Pièces uniques</span>
            <h1 class="v2-phero-title">{% if filtreLabel %}{{ filtreLabel }}{% else %}Nos produits{% endif %}</h1>
            <p class="v2-phero-sub">
                {% if total == 0 %}Aucune pièce disponible pour cette sélection.
                {% elseif total == 1 %}1 pièce façonnée à la main, prête à trouver sa main.
                {% else %}{{ total }} pièces façonnées à la main, chacune unique.{% endif %}
            </p>
        </div>
    </section>

    {# ========================= LISTING ========================= #}
    <section class="nhp-section nhp-section--light">
        <div class="nhp-wrap">

            {# Tri, filtre « disponibles » et pagination vivent dans l'URL : chaque
               lien doit donc reconduire l'état courant. `sortParams` porte le tri
               (qui implique déjà « disponibles ») ou, à défaut, le filtre seul. #}
            {% set sortParams = tri ? { tri: tri } : (dispo ? { dispo: '1' } : {}) %}
            {% set navParams = routeParams|merge(sortParams) %}

            {# ---- Barre de filtres + tri ---- #}
            <div class="prd-toolbar nhp-reveal">
                <div class="prd-filters">
                    {# Type produit #}
                    <div class="prd-select" data-prd-select>
                        <button type="button" class="prd-select-btn" data-prd-toggle>
                            {{ filtreLabel|default('Type de produit') }}
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                        </button>
                        <div class="prd-select-menu">
                            <a href="{{ path('app_produits', sortParams) }}" class="{{ currentFilter is null ? 'active' : '' }}">Tous</a>
                            {% for type in productTypes %}
                                <a href="{{ path('app_produits', sortParams|merge({ filtre: type.value })) }}" class="{{ currentFilter == type.value ? 'active' : '' }}">{{ type.label() }}</a>
                            {% endfor %}
                        </div>
                    </div>

                    {# Type couteau (si filtre = couteau) #}
                    {% if currentFilter == 'couteau' %}
                        <div class="prd-select" data-prd-select>
                            <button type="button" class="prd-select-btn" data-prd-toggle>
                                {{ filtreTypeCouteau|default('Modèle') }}
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                            </button>
                            <div class="prd-select-menu">
                                <a href="{{ path('app_produits', sortParams|merge({'filtre':'couteau'})) }}" class="{{ currentCouteau is null ? 'active' : '' }}">Tous les modèles</a>
                                {% for m in ['artisanal','aurillac','roddef','roquefort','london','beurrier','chasse'] %}
                                    <a href="{{ path('app_produits', sortParams|merge({'filtre':'couteau','typeCouteau': m})) }}" class="{{ currentCouteau == m ? 'active' : '' }}">{{ m == 'roddef' ? "Rodd'ef" : (m == 'chasse' ? 'Couteau de chasse' : m|capitalize) }}</a>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}

                    {# Variante aurillac #}
                    {% if currentCouteau == 'aurillac' %}
                        <div class="prd-select" data-prd-select>
                            <button type="button" class="prd-select-btn" data-prd-toggle>
                                {{ currentVariante ? currentVariante|capitalize : 'Variante' }}
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                            </button>
                            <div class="prd-select-menu">
                                <a href="{{ path('app_produits', sortParams|merge({'filtre':'couteau','typeCouteau':'aurillac'})) }}" class="{{ currentVariante not in ['poche','table'] ? 'active' : '' }}">Tous</a>
                                <a href="{{ path('app_produits', sortParams|merge({'filtre':'couteau','typeCouteau':'aurillac','detailProduit':'poche'})) }}" class="{{ currentVariante == 'poche' ? 'active' : '' }}">Poche</a>
                                <a href="{{ path('app_produits', sortParams|merge({'filtre':'couteau','typeCouteau':'aurillac','detailProduit':'table'})) }}" class="{{ currentVariante == 'table' ? 'active' : '' }}">Table</a>
                            </div>
                        </div>
                    {% endif %}

                    {# Variante artisanal #}
                    {% if currentCouteau == 'artisanal' %}
                        <div class="prd-select" data-prd-select>
                            <button type="button" class="prd-select-btn" data-prd-toggle>
                                {{ currentVariante ? currentVariante|capitalize : 'Variante' }}
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                            </button>
                            <div class="prd-select-menu">
                                <a href="{{ path('app_produits', sortParams|merge({'filtre':'couteau','typeCouteau':'artisanal'})) }}" class="{{ currentVariante not in ['rosace','ours','artisanal'] ? 'active' : '' }}">Tous</a>
                                <a href="{{ path('app_produits', sortParams|merge({'filtre':'couteau','typeCouteau':'artisanal','detailProduit':'artisanal'})) }}" class="{{ currentVariante == 'artisanal' ? 'active' : '' }}">Artisanaux</a>
                                <a href="{{ path('app_produits', sortParams|merge({'filtre':'couteau','typeCouteau':'artisanal','detailProduit':'rosace'})) }}" class="{{ currentVariante == 'rosace' ? 'active' : '' }}">Rosace</a>
                                <a href="{{ path('app_produits', sortParams|merge({'filtre':'couteau','typeCouteau':'artisanal','detailProduit':'ours'})) }}" class="{{ currentVariante == 'ours' ? 'active' : '' }}">Couteau de l'Ours</a>
                            </div>
                        </div>
                    {% endif %}
                </div>

                {# Tri #}
                <div class="prd-select" data-prd-select>
                    <button type="button" class="prd-select-btn{{ tri or dispo ? ' is-on' : '' }}" data-prd-toggle>
                        {{ tri == 'asc' ? 'Prix croissant' : (tri == 'desc' ? 'Prix décroissant' : (dispo ? 'Disponibles' : 'Trier')) }}
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                    </button>
                    {# Chaque entrée est une bascule : recliquer sur celle qui est
                       active revient au listing par défaut. #}
                    <div class="prd-select-menu right">
                        <a href="{{ path('app_produits', tri == 'asc' ? routeParams : routeParams|merge({ tri: 'asc' })) }}" class="{{ tri == 'asc' ? 'active' : '' }}">Prix croissant</a>
                        <a href="{{ path('app_produits', tri == 'desc' ? routeParams : routeParams|merge({ tri: 'desc' })) }}" class="{{ tri == 'desc' ? 'active' : '' }}">Prix décroissant</a>
                        <span class="prd-select-sep" role="separator"></span>
                        {% if tri %}
                            {# Trier par prix n'a de sens que sur ce qui est encore
                               à vendre : le filtre est imposé, donc verrouillé ici. #}
                            <span class="prd-select-locked active">Uniquement disponibles</span>
                        {% else %}
                            <a href="{{ path('app_produits', dispo ? routeParams : routeParams|merge({ dispo: '1' })) }}" class="{{ dispo ? 'active' : '' }}">Uniquement disponibles</a>
                        {% endif %}
                    </div>
                </div>
            </div>

            {# ---- Carte cadeau (bandeau discret) ---- #}
            <a href="{{ path('app_carte_cadeau') }}" class="prd-gift nhp-reveal">
                <span class="prd-gift-ico" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4"/><path d="M5 12v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8M12 8v13M12 8s-2.5-5-5.5-5A2.5 2.5 0 0 0 6 8m6 0s2.5-5 5.5-5A2.5 2.5 0 0 1 18 8"/></svg>
                </span>
                <span class="prd-gift-txt"><b>Une idée cadeau ?</b> Carte de 50 à 500 € ou atelier de création à offrir — personnalisée, valable 12 mois.</span>
                <svg class="prd-gift-arrow" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </a>

            {# ---- Grille ---- #}
            {% if products is empty %}
                <div class="prd-empty nhp-reveal">
                    {% if currentVariante is not null %}
                        Aucun <span class="hl">{{ filtreLabel|lower }}</span> de type <span class="hl">{{ filtreTypeCouteau|lower }}</span> en variante <span class="hl">{{ filtreVariante|lower }}</span> pour le moment. Passez en boutique !
                    {% elseif currentCouteau is not null %}
                        Aucun <span class="hl">{{ filtreLabel|lower }}</span> de type <span class="hl">{{ filtreTypeCouteau|lower }}</span> disponible. Passez en boutique !
                    {% elseif currentFilter is not null %}
                        Aucun produit de type <span class="hl">{{ filtreLabel|lower }}</span> disponible. Passez en boutique !
                    {% else %}
                        Aucune pièce disponible en ligne pour le moment. Passez en boutique !
                    {% endif %}
                </div>
            {% else %}
                <div class="prd-grid" id="prd-grid">
                    {% for product in products %}
                        {{ include('accueil/_product_card_v2.html.twig', { product: product, slide: false, detailRoute: 'app_produit' }) }}
                    {% endfor %}
                </div>
                {# Apparition en cascade : la 1re ligne est rendue telle quelle (sinon un vide
                   s'installe en haut de grille au chargement), les lignes suivantes se révèlent
                   au scroll. Script posé ici, juste après la grille, pour masquer les cartes
                   concernées avant leur premier rendu. #}
                <script>
                (function () {
                    var grid = document.getElementById("prd-grid");
                    if (!grid || !("IntersectionObserver" in window)) return;
                    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

                    var cards = Array.prototype.slice.call(grid.querySelectorAll(".pcard"));
                    var firstTop = cards.length ? cards[0].offsetTop : 0;
                    var rowTop = firstTop, col = 0, pending = [];

                    cards.forEach(function (card) {
                        if (card.offsetTop - firstTop < 4) return;   // 1re ligne : affichée d'emblée
                        if (Math.abs(card.offsetTop - rowTop) < 4) { col++; } else { rowTop = card.offsetTop; col = 0; }
                        card.style.animationDelay = (col * 0.06).toFixed(2) + "s";
                        card.classList.add("prd-anim");
                        pending.push(card);
                    });
                    if (!pending.length) return;

                    var io = new IntersectionObserver(function (entries) {
                        entries.forEach(function (entry) {
                            if (!entry.isIntersecting) return;
                            entry.target.classList.add("is-in");
                            io.unobserve(entry.target);
                        });
                    }, { threshold: 0.15, rootMargin: "0px 0px -5% 0px" });
                    pending.forEach(function (card) { io.observe(card); });
                })();
                </script>

                {# ---- Compteur + pagination ---- #}
                <div class="prd-pagination">
                    <p class="prd-count" aria-live="polite">
                        <b>{{ affiches }}</b>/{{ total }} produit{{ total > 1 ? 's' }}
                    </p>

                    {% if pages > 1 %}
                        <nav class="prd-pager" aria-label="Pages de résultats">
                            {% if page > 1 %}
                                <a class="prd-pager-btn" rel="prev"
                                   href="{{ path('app_produits', page - 1 > 1 ? navParams|merge({ page: page - 1 }) : navParams) }}">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
                                    Précédent
                                </a>
                            {% else %}
                                <span class="prd-pager-btn is-off" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
                                    Précédent
                                </span>
                            {% endif %}

                            <span class="prd-pager-nums">
                                {# Fenêtre glissante : 1 … page-1 page page+1 … dernière.
                                   Les « … » ne se posent qu'aux deux charnières (2 et
                                   avant-dernière), quand elles sortent de la fenêtre. #}
                                {% for n in 1..pages %}
                                    {% if n == 1 or n == pages or (n >= page - 1 and n <= page + 1) %}
                                        {% if n == page %}
                                            <span class="prd-pager-num is-current" aria-current="page">{{ n }}</span>
                                        {% else %}
                                            <a class="prd-pager-num" href="{{ path('app_produits', n > 1 ? navParams|merge({ page: n }) : navParams) }}">{{ n }}</a>
                                        {% endif %}
                                    {% elseif n == 2 or n == pages - 1 %}
                                        <span class="prd-pager-gap" aria-hidden="true">…</span>
                                    {% endif %}
                                {% endfor %}
                            </span>

                            {% if page < pages %}
                                <a class="prd-pager-btn" rel="next" href="{{ path('app_produits', navParams|merge({ page: page + 1 })) }}">
                                    Suivant
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
                                </a>
                            {% else %}
                                <span class="prd-pager-btn is-off" aria-hidden="true">
                                    Suivant
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>
                                </span>
                            {% endif %}
                        </nav>
                    {% endif %}
                </div>
            {% endif %}

        </div>
    </section>

</main>
{% endblock %}

{% block other_javascripts %}
    <script src="{{ asset('scripts/ds-v2-app.js') }}" defer></script>
    <script>
    (function () {
        // Dropdowns filtres / tri
        var selects = document.querySelectorAll("[data-prd-select]");
        selects.forEach(function (sel) {
            var btn = sel.querySelector("[data-prd-toggle]");
            if (!btn) return;
            btn.addEventListener("click", function (e) {
                e.stopPropagation();
                var wasOpen = sel.classList.contains("is-open");
                selects.forEach(function (s) { s.classList.remove("is-open"); });
                sel.classList.toggle("is-open", !wasOpen);
            });
        });
        document.addEventListener("click", function () {
            selects.forEach(function (s) { s.classList.remove("is-open"); });
        });
        // Tri et filtre « disponibles » sont passés côté serveur (ils doivent
        // porter sur tout le catalogue, pas sur les 20 pièces de la page).
    })();
    </script>
{% endblock %}