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

{#
    Actualité Hub page ("actualite_hub" template)

    Data provided by ActualiteHubPageEnricher:
    - title/slug/metaTitle/metaDescription: the hub page's OWN localized fields (via enrichCommonData)
    - cards (ActualiteHubCardModel[]): one per published "actualite" page, server-sorted by
      updatedAt DESC. Each card exposes only title/slug/mainImagePath/tags/updatedAt/entity —
      never content.blocks (see ActualiteHubPageEnricher's PHPDoc for why).
    - availableTags (Tag[]): deduplicated list of tags actually used by >=1 published
      "actualite" page, used to render the filter-pill bar.

    Filtering is 100% client-side (no fetch/XHR) via assets/ts/pages/actualite-hub-filter.ts,
    which reads each card's `data-tags` attribute and the filter-pill bar's clicks. See that
    module for the multi-tag OR-filter contract.
#}

{% block title %}{% if editMode|default(false) %}Édition : {% endif %}{{ metaTitle ?? title }}{% endblock %}

{% block meta %}
    <meta name="description" content="{{ metaDescription ?? '' }}">
    <link rel="canonical" href="{{ app.request.uri }}">
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('actualite-hub') }}
{% endblock %}

{% block body %}
<div class="actualite-hub-page {% if editMode|default(false) %}actualite-hub-page--edit-mode{% endif %}">
    <div class="container">
        {{ include('components/_page_hero.html.twig', {
            title: title,
            edit_mode: editMode|default(false),
        }) }}

        {% if availableTags is not empty %}
            {# Server-rendered filter pills. "Tous"/"All" resets the filter (empty active set). #}
            <div class="actualite-hub-page__filter" data-actualite-hub-filter="true" role="group" aria-label="{{ app.request.locale == 'en' ? 'Filter by tag' : 'Filtrer par tag' }}">
                {% include 'components/_tag.html.twig' with {
                    label: app.request.locale == 'en' ? 'All' : 'Tous',
                    active: true,
                    class: 'tag--all',
                    attrs: 'data-filter-reset="true"',
                } %}
                {% for tag in availableTags %}
                    {% include 'components/_tag.html.twig' with {
                        label: tag.name,
                        attrs: 'data-filter-tag="' ~ tag.slug ~ '"',
                    } %}
                {% endfor %}
            </div>
        {% endif %}

        {% if cards is not empty %}
            <div class="actualite-hub-page__grid" data-actualite-hub-grid="true">
                {% for card in cards %}
                    {% include 'components/_actualite_hub_card.html.twig' with { card } %}
                {% endfor %}
            </div>

            {# Empty-state shown by TS when the active tag filter matches zero cards. Hidden by default. #}
            <div class="actualite-hub-page__empty-state is-hidden" data-actualite-hub-empty-state="true">
                <p>{{ app.request.locale == 'en' ? 'No news matches this filter' : 'Aucune actualité ne correspond à ce filtre' }}</p>
            </div>
        {% else %}
            <div class="actualite-hub-page__empty-state">
                <p>{{ app.request.locale == 'en' ? 'No news available at the moment' : 'Aucune actualité disponible pour le moment' }}</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('actualite-hub') }}
{% endblock %}