{% extends "base.twig" %}

{% block content %}
<main class="category-archive">
    <div class="container">
        <div class="full-block">
            <header class="category-header">
                <div class="category-header-top">
                    <nav class="breadcrumb" aria-label="Fil d'Ariane">
                        <a href="{{ function('home_url', '/') }}">{{ current_language == 'en' ? 'Home' : 'Accueil' }}</a>
                        <span class="breadcrumb__separator">&rarr;</span>
                        <span class="breadcrumb__item">{{ taxonomy_label }}</span>
                        <span class="breadcrumb__separator">&rarr;</span>
                        <span class="breadcrumb__current">{{ term.name | bilingual(current_language) }}</span>
                    </nav>
                </div>
                <h1 class="category-header__title">{{ term.name | bilingual(current_language) }}</h1>
                {% if term_presentation %}
                    <div class="taxonomy-description">{{ term_presentation|raw }}</div>
                {% endif %}
            </header>

            {% include 'partials/category-filters.twig' %}

            <section class="subcategory-section">
                <div class="post-grid" id="post-grid">
                    {% for post in posts %}
                        {% include 'partials/post-card.twig' with { post: post, card: cards[post.ID], show_category: true } %}
                    {% endfor %}
                </div>

                <div id="scroll-sentinel"
                     data-taxonomy="{{ taxonomy_slug }}"
                     data-term="{{ term_id }}"
                     data-filter-cat="{{ active_cat_id }}"
                     data-filter-autres="{{ filter_autres }}"
                     data-axe="{{ active_axe }}"
                     data-date-from="{{ active_date_from }}"
                     data-date-to="{{ active_date_to }}"></div>
                <div id="scroll-spinner" class="scroll-spinner" style="display: none;">
                    <div class="scroll-spinner__dot"></div>
                    <div class="scroll-spinner__dot"></div>
                    <div class="scroll-spinner__dot"></div>
                </div>
            </section>
        </div>
    </div>
</main>
{% endblock %}