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

{% set seo = article %}
{% set seo_title = article.resolveTitle %}
{% set og_type = 'article' %}
{% set is_advice = article.kind.value == 'advice' %}
{% set trail = [
    { label: 'Accueil', url: path('home') },
    { label: is_advice ? 'Conseils' : 'Actualités', url: path(is_advice ? 'advice_index' : 'news_index') },
    { label: article.name, url: path(article.kind.routeName, { slug: article.slug }) }
] %}

{% block schema %}
    <script type="application/ld+json">
        {{ {
            '@context': 'https://schema.org',
            '@type': 'BlogPosting',
            'headline': article.heading,
            'description': article.intro,
            'url': url(article.kind.routeName, { slug: article.slug }),
            'datePublished': article.kind.dated and article.publishedAt ? article.publishedAt|date('Y-m-d') : null,
            'dateModified': article.updatedAt ? article.updatedAt|date('Y-m-d') : null,
            'author': { '@id': url('home') ~ '#pepiniere' },
            'publisher': { '@id': url('home') ~ '#pepiniere' },
            'about': article.categories|map(category => { '@type': 'Thing', 'name': category.name })|values
        }|filter(v => v is not null)|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 %}
    <div class="mx-auto max-w-7xl px-4 pt-6 sm:px-6 lg:px-8">
        {{ include('_partials/breadcrumb.html.twig') }}
    </div>

    <article class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
        <header class="mx-auto max-w-3xl">
            {% if article.season %}<p class="eyebrow">{{ article.season.preposition }}</p>{% endif %}
            <h1 class="mt-4 font-serif text-[2.4rem] leading-[1.12] text-ink sm:text-[3rem]">{{ article.heading }}</h1>
            {% if article.intro %}<p class="mt-6 font-sans text-[1.08rem] leading-relaxed text-body">{{ article.intro }}</p>{% endif %}
            {% if article.kind.dated and article.publishedAt %}
                <p class="mt-6 font-sans text-[0.78rem] text-subtle">
                    Publié le {{ article.publishedAt|format_date(locale='fr', dateFormat='long') }}
                    {%- if article.updatedAt and article.updatedAt > article.publishedAt %}, mis à jour le {{ article.updatedAt|format_date(locale='fr', dateFormat='long') }}{% endif %}
                </p>
            {% endif %}
        </header>

        {% if article.image %}
            <div class="mx-auto mt-10 max-w-4xl overflow-hidden rounded-2xl border border-line">
                {{ include('_partials/photo.html.twig', { media: article.image, filter: 'hero', ratio: '16 / 9', loading: 'eager', sizes: '(min-width: 1024px) 60vw, 100vw' }) }}
            </div>
        {% endif %}

        <div class="prose-jardin mx-auto mt-12 max-w-2xl">{{ article.body|rich }}</div>
    </article>

    {# — Le maillage sortant. Un texte qui ne mène à aucune fiche ne fait venir
         personne, et une liste de noms ne donne envie d'aller nulle part : ce
         qui est nommé dans l'article se montre. — #}
    {% set citedPlants = article.plants|filter(p => p.published) %}
    {% set citedCategories = article.categories|filter(c => c.published) %}
    {% set citedServices = article.services|filter(s => s.published) %}

    {% if citedPlants|length or citedCategories|length or citedServices|length %}
        <section class="border-t border-line bg-surface-tint py-16">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <h2 class="font-serif text-[1.8rem] text-ink">Ce dont il est question</h2>

                {% if citedPlants|length %}
                    <p class="eyebrow mt-8">Les plantes</p>
                    {# Un article cite parfois toute une collection : la carte de
                       catalogue, haute, en ferait un mur qu'on fait défiler sans
                       le lire. Ici la photo tient la colonne de gauche. #}
                    <div class="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                        {% for plant in citedPlants %}
                            <article class="group relative flex items-center gap-4 overflow-hidden rounded-xl border border-line bg-surface pr-4 transition hover:border-brand/40 hover:shadow-lg hover:shadow-ink/5">
                                <div class="w-20 shrink-0 overflow-hidden">
                                    {{ include('_partials/photo.html.twig', { media: plant.image, filter: 'card', ratio: '4 / 5', sizes: '80px', class: 'h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]' }) }}
                                </div>
                                <div class="min-w-0 py-3">
                                    <h3 class="truncate font-serif text-[1rem] leading-snug text-ink">
                                        <a href="{{ path('plant_show', { slug: plant.slug }) }}" class="after:absolute after:inset-0">{{ plant.name }}</a>
                                    </h3>
                                    <p class="truncate font-serif text-[0.82rem] italic text-muted">{{ plant.latinName }}</p>
                                    {% if plant.price %}
                                        <p class="mt-1 font-sans text-[0.78rem] text-muted">{{ plant.price|number_format(2, ',', ' ') }} €{% if plant.priceUnit %} {{ plant.priceUnit }}{% endif %}</p>
                                    {% endif %}
                                </div>
                            </article>
                        {% endfor %}
                    </div>
                {% endif %}

                {% if citedCategories|length %}
                    <p class="eyebrow mt-12">Les familles</p>
                    <div class="mt-5 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
                        {% for category in citedCategories %}
                            <article class="group relative flex h-full flex-col overflow-hidden rounded-lg border border-line bg-surface transition hover:border-brand/40 hover:shadow-lg hover:shadow-ink/5">
                                {{ include('_partials/photo.html.twig', { media: category.image, filter: 'card', ratio: '16 / 10', sizes: '(min-width: 1024px) 25vw, 50vw', class: 'h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]' }) }}
                                <div class="flex flex-1 flex-col p-4">
                                    <h3 class="line-clamp-2 font-serif text-[1.02rem] leading-tight text-ink">
                                        <a href="{{ path('category_show', { slug: category.slug }) }}" class="after:absolute after:inset-0">{{ category.name }}</a>
                                    </h3>
                                    <span class="mt-auto inline-flex items-center gap-1.5 pt-3 font-sans text-[0.72rem] text-muted">
                                        Voir la sélection
                                        <svg class="h-3 w-3" viewBox="0 0 16 12" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M1 6h13M9.5 1.5 14 6l-4.5 4.5"/></svg>
                                    </span>
                                </div>
                            </article>
                        {% endfor %}
                    </div>
                {% endif %}

                {% if citedServices|length %}
                    <p class="eyebrow mt-12">Si vous préférez qu'on s'en charge</p>
                    <div class="mt-5 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                        {% for service in citedServices %}
                            <article class="group relative flex h-full flex-col overflow-hidden rounded-xl border border-line bg-surface transition hover:border-brand/40 hover:shadow-lg hover:shadow-ink/5">
                                {{ include('_partials/photo.html.twig', { media: service.image, filter: 'card', ratio: '16 / 10', sizes: '(min-width: 1024px) 33vw, 100vw', class: 'h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]' }) }}
                                <div class="flex flex-1 flex-col p-6">
                                    <h3 class="line-clamp-2 font-serif text-xl leading-snug text-ink">
                                        <a href="{{ path('service_show', { slug: service.slug }) }}" class="after:absolute after:inset-0">{{ service.name }}</a>
                                    </h3>
                                    {% if service.intro %}<p class="mt-3 line-clamp-3 font-sans text-[0.88rem] leading-relaxed text-muted">{{ service.intro }}</p>{% endif %}
                                </div>
                            </article>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </section>
    {% endif %}

    {% if neighbours|length %}
        <section class="border-t border-line bg-surface-sage py-16">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <h2 class="font-serif text-[1.8rem] text-ink">À lire aussi</h2>
                <div class="mt-8 grid gap-6 md:grid-cols-3">
                    {% for voisin in neighbours %}
                        {{ include('_partials/article-card.html.twig', { article: voisin, sizes: '(min-width: 768px) 33vw, 100vw' }) }}
                    {% endfor %}
                </div>
            </div>
        </section>
    {% endif %}

    <div class="pb-16">
        {{ include('_partials/cta.html.twig', {
            title: 'On en reparle sur place',
            text: "Apportez vos questions, on a les plants sous la main et le temps d'y répondre."
        }) }}
    </div>
{% endblock %}