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

{% set seo = trait %}
{% set seo_title = trait.resolveTitle %}
{% set trail = [
    { label: 'Accueil', url: path('home') },
    { label: 'Nos plantes', url: path('plant_index') },
    { label: trait.name, url: path('trait_show', { slug: trait.slug }) }
] %}

{% block schema %}
    <script type="application/ld+json">
        {{ {
            '@context': 'https://schema.org',
            '@type': 'CollectionPage',
            'name': trait.heading,
            'description': trait.metaDescription,
            'url': url('trait_show', { slug: trait.slug }),
            'mainEntity': {
                '@type': 'ItemList',
                'itemListElement': results.items|map((plant, index) => {
                    '@type': 'ListItem',
                    'position': 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>
        {# Deux colonnes seulement quand il y a une photo à poser à côté : sans
           elle, la grille laisserait la moitié de l'écran vide. #}
        <div class="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 lg:px-8 {{ trait.image ? 'lg:grid-cols-[1.3fr_1fr] lg:items-center' : '' }}">
            <div>
                <p class="eyebrow">Sélection</p>
                <h1 class="mt-4 font-serif text-[2.5rem] leading-[1.1] text-ink sm:text-[3rem]">{{ trait.heading }}</h1>
                {% if trait.intro %}<p class="mt-6 max-w-2xl font-sans text-[1.02rem] leading-relaxed text-body">{{ trait.intro }}</p>{% endif %}
            </div>
            {% if trait.image %}
                <div class="overflow-hidden rounded-2xl border border-line">
                    {{ include('_partials/photo.html.twig', { media: trait.image, filter: 'hero', ratio: '3 / 2', loading: 'eager', sizes: '(min-width: 1024px) 40vw, 100vw' }) }}
                </div>
            {% endif %}
        </div>
    </header>

    <section class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
        {% if trait.body %}
            <div class="prose-jardin mb-14 max-w-2xl">{{ trait.body|rich }}</div>
        {% endif %}

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

            {{ include('_partials/pagination.html.twig', {
                pagination: results,
                route: 'trait_show',
                params: { slug: trait.slug }
            }) }}
            <p class="mt-12 font-sans text-[0.9rem] text-muted">
                <a href="{{ path('plant_index', filters) }}" class="text-brand-ink underline underline-offset-4">Croiser cette sélection avec d'autres critères</a>
                dans le catalogue : exposition, hauteur adulte, famille.
            </p>
        {% else %}
            <p class="rounded-xl border border-line bg-surface-tint px-7 py-8 font-sans text-[0.95rem] text-body">
                Cette sélection se remplit au fil des fiches. Demandez-nous ce que nous avons
                en ce moment, la réponse change chaque saison.
            </p>
        {% endif %}
    </section>

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