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

{% set seo_title = 'Nos plantes — catalogue de la pépinière bio, Yonne et Puisaye' %}
{% set seo_description = 'Fruitiers anciens, arbres et arbustes, aromatiques certifiées bio, haies champêtres, vivaces et grimpantes. Filtrez par exposition, saison de plantation, hauteur adulte et disponibilité.' %}
{% set seo_social_title = 'Tout ce qui pousse à la pépinière' %}
{# Chaque croisement de facettes produirait une adresse de plus : seule la page
   nue entre dans l'index, et la canonique la désigne depuis toutes les autres. #}
{% set seo_noindex = not search.isEmpty %}
{% set canonical = url('plant_index', results.page > 1 ? { page: results.page } : {}) %}
{% if results.page > 1 %}{% set seo_title = seo_title ~ ' — page ' ~ results.page %}{% endif %}
{% set trail = [
    { label: 'Accueil', url: path('home') },
    { label: 'Nos plantes', url: path('plant_index') }
] %}

{% block schema %}
    <script type="application/ld+json">
        {{ {
            '@context': 'https://schema.org',
            '@type': 'CollectionPage',
            'name': 'Le catalogue du Jardin de Bohème',
            'description': seo_description,
            'url': canonical,
            'mainEntity': {
                '@type': 'ItemList',
                'itemListElement': results.items|map((plant, index) => {
                    '@type': 'ListItem',
                    'position': (results.page - 1) * 24 + index + 1,
                    'name': plant.name,
                    'url': url('plant_show', { slug: plant.slug })
                })|values
            }
        }|json_encode(constant('JSON_HEX_TAG') b-or constant('JSON_HEX_AMP') b-or constant('JSON_HEX_APOS') b-or constant('JSON_HEX_QUOT') b-or constant('JSON_UNESCAPED_UNICODE') b-or constant('JSON_UNESCAPED_SLASHES'))|raw }}
    </script>
{% endblock %}

{% block body %}
    <header class="border-b border-line bg-surface-sage">
        <div class="mx-auto max-w-7xl px-4 pt-6 sm:px-6 lg:px-8">
            {{ include('_partials/breadcrumb.html.twig') }}
        </div>
        <div class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
            <p class="eyebrow">Le catalogue</p>
            <h1 class="mt-4 max-w-3xl font-serif text-[2.5rem] leading-[1.08] text-ink sm:text-[3rem]">Tout ce qui pousse ici</h1>
            <p class="mt-5 max-w-2xl font-sans text-[1.02rem] leading-relaxed text-body">
                Une plante appartient à plusieurs familles : un noisetier est un arbuste, un
                plant de haie et un fruitier. Croisez ce que vous savez de votre terrain, et
                laissez le reste ouvert. La vente se fait sur place.
            </p>
        </div>
    </header>

    <div class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
        <div class="grid gap-10 lg:grid-cols-[16rem_1fr]">

            {# ── La colonne des facettes ─────────────────────────────────── #}
            {# Chaque groupe se replie. Un groupe qui porte un filtre s'ouvre de
               lui-même, pour qu'on voie toujours ce qui est en train de filtrer.
               Tout ouvrir donnerait une colonne plus longue que les résultats. #}
            <aside class="lg:sticky lg:top-6 lg:h-max" aria-label="Filtrer le catalogue">
                <div class="rounded-2xl border border-line bg-surface-tint">
                    <form method="get" action="{{ path('plant_index') }}" role="search" class="border-b border-line px-5 py-5">
                        {# Les filtres posés suivent la recherche par nom ; le reste de
                           l'adresse ne voyage pas. #}
                        {% for name, value in app.request.query.all|filter((value, name) => name in constant('App\\Twig\\FacetExtension::PARAMETERS') and name != 'query') %}
                            {% if value is iterable %}
                                {% for item in value|filter(item => item is not iterable) %}<input type="hidden" name="{{ name }}[]" value="{{ item }}">{% endfor %}
                            {% elseif value is not iterable %}
                                <input type="hidden" name="{{ name }}" value="{{ value }}">
                            {% endif %}
                        {% endfor %}
                        <label for="catalogue-recherche" class="block font-sans text-[0.78rem] font-semibold uppercase tracking-wider text-subtle">Chercher</label>
                        <div class="mt-2 flex gap-2">
                            <input type="search" id="catalogue-recherche" name="query" value="{{ search.query }}"
                                   placeholder="menthe, pommier, charme…"
                                   class="w-full rounded-lg border border-line bg-surface px-3 py-2 font-sans text-sm text-ink placeholder:text-subtle focus:border-brand focus:outline-none">
                            <button type="submit" class="shrink-0 rounded-lg bg-brand-cta px-3 py-2 font-sans text-sm font-semibold text-white transition hover:bg-brand-ink">
                                <span class="sr-only">Chercher</span>
                                <svg class="h-4 w-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><circle cx="7" cy="7" r="4.5"/><path d="m10.5 10.5 4 4"/></svg>
                            </button>
                        </div>
                    </form>

                    {% macro facet(label, url, active) %}
                        <li>
                            <a href="{{ url }}" {{ active ? 'aria-current="true"' : '' }}
                               class="flex items-center gap-2 rounded-lg px-2 py-1.5 font-sans text-[0.88rem] transition {{ active ? 'font-semibold text-brand-ink' : 'text-body hover:bg-surface hover:text-brand-ink' }}">
                                <span class="grid h-4 w-4 shrink-0 place-items-center rounded border {{ active ? 'border-brand-cta bg-brand-cta text-white' : 'border-line bg-surface' }}" aria-hidden="true">
                                    {% if active %}<svg class="h-2.5 w-2.5" viewBox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="2"><path d="m1 5 3.5 3.5L11 1.5"/></svg>{% endif %}
                                </span>
                                {{ label }}
                            </a>
                        </li>
                    {% endmacro %}

                    {% macro group(title, summary) %}
                        <summary class="flex cursor-pointer list-none items-center justify-between gap-2 px-5 py-3.5 font-sans text-[0.82rem] font-semibold uppercase tracking-wider text-subtle transition hover:text-brand-ink">
                            <span>{{ title }}</span>
                            <span class="flex items-center gap-2">
                                {% if summary %}<span class="font-sans text-[0.75rem] font-normal normal-case tracking-normal text-brand-ink">{{ summary }}</span>{% endif %}
                                <svg class="h-3 w-3 shrink-0 transition group-open:rotate-180" viewBox="0 0 12 8" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="m1 1.5 5 5 5-5"/></svg>
                            </span>
                        </summary>
                    {% endmacro %}
                    {% macro pill(label, url) %}
                        <a href="{{ url }}" class="inline-flex items-center gap-1.5 rounded-full border border-line bg-surface-tint px-3 py-1.5 font-sans text-[0.82rem] text-body hover:border-brand">
                            {{ label }} <span aria-hidden="true">×</span><span class="sr-only">, retirer ce filtre</span>
                        </a>
                    {% endmacro %}
                    {% import _self as macros %}

                    <details class="group border-b border-line" {{ search.family or search.isEmpty ? 'open' : '' }}>
                        {{ macros.group('Famille', search.family ? search.family.name : null) }}
                        <ul class="space-y-0.5 px-3 pb-4">
                            {% for family in families %}
                                {{ macros.facet(family.name, facet_url('family', family.slug), facet_active('family', family.slug)) }}
                                {% for child in family.children|filter(c => c.published) %}
                                    <li class="pl-6">
                                        <a href="{{ facet_url('family', child.slug) }}"
                                           class="flex items-center gap-2 rounded-lg px-2 py-1 font-sans text-[0.82rem] transition {{ facet_active('family', child.slug) ? 'font-semibold text-brand-ink' : 'text-muted hover:text-brand-ink' }}">{{ child.name }}</a>
                                    </li>
                                {% endfor %}
                            {% endfor %}
                        </ul>
                    </details>

                    <details class="group border-b border-line" {{ search.organic or search.inStock ? 'open' : '' }}>
                        {{ macros.group('La pépinière', search.organic or search.inStock ? 'filtré' : null) }}
                        <ul class="space-y-0.5 px-3 pb-4">
                            {{ macros.facet('Certifié bio Ecocert', facet_url('organic', '1'), search.organic) }}
                            {{ macros.facet('Disponible en pépinière', facet_url('stock', '1'), search.inStock) }}
                        </ul>
                    </details>

                    <details class="group border-b border-line" {{ search.criteria|length ? 'open' : '' }}>
                        {{ macros.group('Ce que vous cherchez', search.criteria|length ? 'filtré' : null) }}
                        <ul class="space-y-0.5 px-3 pb-4">
                            {% for criterion in criteria %}
                                {{ macros.facet(criterion.name, facet_url('criteria', criterion.slug, true), facet_active('criteria', criterion.slug)) }}
                            {% endfor %}
                        </ul>
                    </details>

                    <details class="group border-b border-line" {{ search.exposure ? 'open' : '' }}>
                        {{ macros.group('Exposition', search.exposure ? search.exposure.label : null) }}
                        <ul class="space-y-0.5 px-3 pb-4">
                            {% for exposure in enum('App\\Entity\\Enum\\Exposure').cases %}
                                {{ macros.facet(exposure.label, facet_url('exposure', exposure.value), facet_active('exposure', exposure.value)) }}
                            {% endfor %}
                        </ul>
                    </details>

                    <details class="group border-b border-line" {{ search.plantingSeason ? 'open' : '' }}>
                        {{ macros.group('À planter', search.plantingSeason ? search.plantingSeason.label : null) }}
                        <ul class="space-y-0.5 px-3 pb-4">
                            {% for season in enum('App\\Entity\\Enum\\Season').cases %}
                                {{ macros.facet(season.preposition|capitalize, facet_url('season', season.value), facet_active('season', season.value)) }}
                            {% endfor %}
                        </ul>
                    </details>

                    <details class="group" {{ search.maxHeight ? 'open' : '' }}>
                        {{ macros.group('Hauteur adulte', search.maxHeight ? 'moins de ' ~ search.maxHeight|plant_size : null) }}
                        <ul class="space-y-0.5 px-3 pb-4">
                            {% for height in heights %}
                                {{ macros.facet('Moins de ' ~ height|plant_size, facet_url('height', height), facet_active('height', height)) }}
                            {% endfor %}
                        </ul>
                    </details>
                </div>
            </aside>

            {# ── Les résultats ───────────────────────────────────────────── #}
            <div>
                {% if not search.isEmpty %}
                    <div class="mb-6 flex flex-wrap items-center gap-2">
                        {% if search.query %}{{ macros.pill('« ' ~ search.query ~ ' »', facet_url('query')) }}{% endif %}
                        {% if search.family %}{{ macros.pill(search.family.name, facet_url('family')) }}{% endif %}
                        {% for criterion in search.criteria %}{{ macros.pill(criterion.name, facet_url('criteria', criterion.slug, true)) }}{% endfor %}
                        {% if search.exposure %}{{ macros.pill(search.exposure.label, facet_url('exposure')) }}{% endif %}
                        {% if search.plantingSeason %}{{ macros.pill('À planter ' ~ search.plantingSeason.preposition, facet_url('season')) }}{% endif %}
                        {% if search.maxHeight %}{{ macros.pill('Moins de ' ~ search.maxHeight|plant_size, facet_url('height')) }}{% endif %}
                        {% if search.organic %}{{ macros.pill('Certifié bio', facet_url('organic')) }}{% endif %}
                        {% if search.inStock %}{{ macros.pill('Disponible', facet_url('stock')) }}{% endif %}
                        <a href="{{ path('plant_index') }}" class="font-sans text-[0.82rem] text-brand-ink underline underline-offset-4">Tout effacer</a>
                    </div>
                {% endif %}

                {% if results.items|length %}
                    <div class="grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
                        {% for plant in results.items %}
                            {{ include('_partials/plant-card.html.twig', { plant: plant }) }}
                        {% endfor %}
                    </div>

                    {{ include('_partials/pagination.html.twig', {
                        pagination: results,
                        route: 'plant_index',
                        params: app.request.query.all|filter((value, key) => key != 'page')
                    }) }}
                {% else %}
                    <div class="rounded-2xl border border-line bg-surface-tint px-7 py-8">
                        <h2 class="font-serif text-xl text-ink">Rien ne répond à tous ces critères</h2>
                        <p class="mt-3 font-sans text-[0.95rem] leading-relaxed text-body">
                            Retirez-en un, en commençant par la hauteur ou la saison. Ce qui manque au
                            catalogue existe parfois en pépinière sans avoir sa fiche : demandez-nous.
                        </p>
                        <div class="mt-5 flex flex-wrap gap-3">
                            <a href="{{ path('plant_index') }}" class="inline-flex items-center rounded-full border border-line bg-surface px-5 py-2.5 font-sans text-sm text-brand-ink transition hover:border-brand">Repartir de zéro</a>
                            <a href="{{ path('contact') }}" class="inline-flex items-center rounded-full bg-brand-cta px-5 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-brand-ink">Nous demander</a>
                        </div>
                    </div>
                {% endif %}

                <nav class="mt-14 border-t border-line pt-8" aria-label="Les familles du catalogue">
                    <h2 class="font-serif text-lg text-ink">Chaque famille a sa page</h2>
                    <p class="mt-2 max-w-2xl font-sans text-[0.9rem] leading-relaxed text-muted">
                        On y explique ce qui distingue les variétés entre elles, ce qui se plante à
                        quelle saison et ce que nous produisons nous-mêmes.
                    </p>
                    <ul class="mt-4 flex flex-wrap gap-2">
                        {% for family in families %}
                            <li>
                                <a href="{{ path('category_show', { slug: family.slug }) }}" class="inline-flex rounded-full border border-line bg-surface px-4 py-2 font-sans text-[0.85rem] text-body transition hover:border-brand hover:text-brand-ink">{{ family.name }}</a>
                            </li>
                        {% endfor %}
                    </ul>

                    <h2 class="mt-10 font-serif text-lg text-ink">Nos sélections</h2>
                    <p class="mt-2 max-w-2xl font-sans text-[0.9rem] leading-relaxed text-muted">
                        Ce qu'on demande à une plante plutôt que ce qu'elle est : tenir à l'ombre,
                        nourrir les abeilles, garder son feuillage l'hiver, cacher un vis-à-vis.
                    </p>
                    <ul class="mt-4 flex flex-wrap gap-2">
                        {% for criterion in criteria %}
                            <li>
                                <a href="{{ path('trait_show', { slug: criterion.slug }) }}" class="inline-flex rounded-full border border-line bg-surface px-4 py-2 font-sans text-[0.85rem] text-body transition hover:border-brand hover:text-brand-ink">{{ criterion.name }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <div class="pb-16">{{ include('_partials/cta.html.twig') }}</div>
{% endblock %}