{#
    Actualité Hub grid card.

    Parameters:
    - card (ActualiteHubCardModel or plain array with the same keys): title, slug,
      mainImagePath (nullable), tags ({id, name, slug}[]), publishedAt (display date),
      entity (Page, used only for page_url()).
    - theme (string, optional): "dark" (default) or "light" — light mode sets
      card text color to $color-primary-light (#F9F2EB) for use on dark backgrounds.

    `data-tags` carries a JSON array of tag slugs — this is the contract read by
    assets/ts/pages/actualite-hub-filter.ts to decide visibility on filter interaction.
    Kept as a dedicated partial (not a fork of the generic components/_card.html.twig)
    since the hub card needs tag pills + a data-tags contract that the generic card
    doesn't have.
#}
{% set tagSlugs = card.tags|map(t => t.slug) %}
<a href="{{ page_url(card.entity, card.entity.parent) }}"
   class="actualite-hub-page__card{% if theme|default('dark') == 'light' %} actualite-hub-page__card--light{% endif %}"
   data-tags="{{ tagSlugs|json_encode }}">
    <div class="actualite-hub-page__card-image"{{ image_frame_attrs({image: card.mainImagePath, imageDark: card.mainImageDarkPath|default(''), imageFrame: card.mainImageFrame|default(null), imageDarkFrame: card.mainImageDarkFrame|default(null)}, 'image', false, false) }}>
        {% if card.mainImagePath %}
            {% include 'components/_themed_img.html.twig' with {light: card.mainImagePath, dark: card.mainImageDarkPath|default(''), alt: card.title, class: 'actualite-hub-page__card-img', loading: 'lazy'} only %}
        {% else %}
            <div class="actualite-hub-page__card-img actualite-hub-page__card-img--placeholder" aria-hidden="true"></div>
        {% endif %}
    </div>

    <div class="actualite-hub-page__card-meta">
        {% if card.tags is not empty %}
            <div class="actualite-hub-page__card-tags">
                {% for tag in card.tags %}
                    {% include 'components/_tag.html.twig' with {
                        label: tag.name,
                        class: 'tag--light',
                        disabled: true
                    } only %}
                {% endfor %}
            </div>
        {% endif %}

        <div class="actualite-hub-page__card-date">{{ card.publishedAt|localized_date }}</div>
    </div>

    <h2 class="actualite-hub-page__card-title">{{ card.title }}</h2>
</a>