{% extends "base.twig" %}

{% block content %}
    <main class="category-archive">
        <div class="container">
            <div class="full-block category--{{ parent_slug }}">
                <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>
                            {% if not is_parent and category.parent %}
                                <span class="breadcrumb__separator">&rarr;</span>
                                <a class="breadcrumb__cat" href="{{ function('get_category_link', category.parent) }}">{{ function('thalim_cat_name', category.parent) }}</a>
                                <span class="breadcrumb__separator">&rarr;</span>
                                <a class="breadcrumb__cat" href="{{ function('get_category_link', category.term_id) }}"><span class="breadcrumb__current">{{ category|cat_name }}</span></a>
                            {% elseif is_direct %}
                                <span class="breadcrumb__separator">&rarr;</span>
                                <a class="breadcrumb__cat" href="{{ function('get_category_link', category.term_id) }}">{{ category|cat_name }}</a>
                                <span class="breadcrumb__separator">&rarr;</span>
                                <span class="breadcrumb__current">{{ current_language == 'en' ? 'Other' : 'Autre' }}</span>
                            {% else %}
                                <span class="breadcrumb__separator">&rarr;</span>
                                <a class="breadcrumb__cat" href="{{ function('get_category_link', category.term_id) }}"><span class="breadcrumb__current">{{ category|cat_name }}</span></a>
                            {% endif %}
                        </nav>
                        <a href="{{ agenda_toggle_url }}" class="link-button agenda-toggle-btn">
                            {% if view_mode == 'agenda' %}
                                <i class="iconoir-view-grid"></i>{{ current_language == 'en' ? 'Switch to grid view' : 'Passer à la vue grille' }}
                            {% else %}
                                <i class="iconoir-calendar"></i>{{ current_language == 'en' ? 'Switch to agenda view' : 'Passer à la vue agenda' }}
                            {% endif %}
                        </a>
                    </div>
                    <h1 class="category-header__title">
                        {%- if is_direct -%}
                            {{ current_language == 'en' ? 'Other' : 'Autres' }} {{ (category|cat_name)|lower }}
                        {%- else -%}
                            {{ category|cat_name }}
                        {%- endif -%}
                    </h1>
                    {% if term_presentation %}
                        <div class="taxonomy-description">{{ term_presentation|raw }}</div>
                    {% endif %}
                </header>
                {% include 'partials/category-filters.twig' %}
                <div id="grid-sections"{% if view_mode == 'agenda' %} style="display:none"{% endif %}>
                {% if is_parent %}
                    {% for subcategory in subcategories %}
                        {% if subcategory.posts is not empty %}
                            <section class="subcategory-section">
                                <h2 class="subcategory-section__title">{{ subcategory.term|cat_name }}</h2>
                                <div class="post-grid">
                                    {% for post in subcategory.posts %}
                                        {% include 'partials/post-card.twig' with { post: post, card: cards[post.ID], show_category: true, type_only: true } %}
                                    {% endfor %}
                                </div>
                                <div class="category-section-footer">
                                    {% if current_language == 'en' %}
                                        <a href="{{ subcategory.term.link }}" class="link-button"><i class="iconoir-plus-circle"></i>See all {{ (subcategory.term|cat_name)|lower }}</a>
                                    {% else %}
                                        {% set is_fem = subcategory.term.description == 'f' %}
                                        <a href="{{ subcategory.term.link }}" class="link-button"><i class="iconoir-plus-circle"></i>Voir {{ is_fem ? 'toutes les' : 'tous les' }} {{ (subcategory.term|cat_name)|lower }}</a>
                                    {% endif %}
                                </div>
                            </section>
                        {% endif %}
                    {% endfor %}
                    {% if direct_posts is defined and direct_posts is not empty %}
                        <section class="subcategory-section">
                            <h2 class="subcategory-section__title">{{ current_language == 'en' ? 'Other' : 'Autres' }}</h2>
                            <div class="post-grid">
                                {% for post in direct_posts %}
                                    {% include 'partials/post-card.twig' with { post: post, card: cards[post.ID], show_category: true, type_only: true } %}
                                {% endfor %}
                            </div>
                            <div class="category-section-footer">
                                {% if current_language == 'en' %}
                                    <a href="{{ autres_link }}" class="link-button"><i class="iconoir-plus-circle"></i>See all other {{ (category|cat_name)|lower }}</a>
                                {% else %}
                                    <a href="{{ autres_link }}" class="link-button"><i class="iconoir-plus-circle"></i>Voir toutes les autres {{ (category|cat_name)|lower }}</a>
                                {% endif %}
                            </div>
                        </section>
                    {% endif %}
                {% else %}
                    <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, type_only: true } %}
                            {% endfor %}
                        </div>

                        <div id="scroll-sentinel"
                             data-category="{{ category_id }}"
                             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>
                {% endif %}
                </div>

                {# Agenda view — shared by parent and leaf categories #}
                <div class="agenda-view-container{% if view_mode == 'agenda' %} is-active{% endif %}"
                     id="agenda-view"
                     data-category="{{ category_id }}"
                     data-include-children="{{ agenda_include_children }}"
                     data-axe="{{ active_axe }}"
                     data-date-from="{{ active_date_from }}"
                     data-date-to="{{ active_date_to }}">
                    <h2 class="agenda-view-title">Agenda</h2>
                    <div class="agenda-swiper-wrap">
                        <button class="agenda-swiper-prev" aria-label="{{ current_language == 'en' ? 'Previous' : 'Précédent' }}"><i class="iconoir-arrow-left"></i></button>
                        <div class="swiper agenda-swiper">
                            <div class="swiper-wrapper" id="agenda-swiper-wrapper"></div>
                        </div>
                        <button class="agenda-swiper-next" aria-label="{{ current_language == 'en' ? 'Next' : 'Suivant' }}"><i class="iconoir-arrow-right"></i></button>
                    </div>
                    <div id="agenda-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>
                </div>
            </div>
        </div>
    </main>
{% endblock %}