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

{#
    Projects List page ("projects_list" template)

    Data provided by ProjectsListPageEnricher:
    - title/slug/metaTitle/metaDescription: this hub page's own localized fields
    - content.sections: optional intro text blocks (rendered above the grid)
    - projects (Page[]): published "project_detail" children, server-sorted by
      createdAt DESC. Each exposes title/category/content (featuredImage, description).
    - projectImagePaths (array<string, string>): project id => resolved featuredImage URL
      (content.featuredImage is a Media UUID, not a URL — see
      ProjectsListPageEnricher::resolveProjectImagePaths()).
    - projectCategories (array<string, string>): project id => category tag slug (see
      App\Helper\ProjectCategoryHelper — category is a reserved Page<->Tag relation, not
      a Page column anymore).
    - projectSubtitles (array<string, string>): project id => localized hero subtitle
      (content.subtitle is JSON content, not a Page column — see
      ProjectsListPageEnricher::resolveProjectSubtitles())
    - categoryLabels (array<string, string>): category slug => localized display label
      (see App\Helper\ProjectCategoryHelper::getLabels()), shared with HomePageEnricher
      so project card tags read identically on both pages.

    Filtering is 100% client-side (no fetch/XHR) via assets/projects-list.ts +
    ProjectsListFilter, which reads each card's `data-category` attribute and the
    filter-pill bar's clicks. Single-select (a project has exactly one category),
    see ProjectsListFilterState for the contract.
#}

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

{% block meta %}
    <meta name="description" content="{{ metaDescription ?? 'Découvrez notre portfolio de projets' }}">
    <link rel="canonical" href="{{ app.request.uri }}">
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('projects-list') }}
{% endblock %}

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

        {% if projects is not empty %}
            <div class="projects-list-page__filter" data-projects-list-filter="true" role="group" aria-label="{{ app.request.locale == 'en' ? 'Filter by category' : 'Filtrer par catégorie' }}">
                {% include 'components/_tag.html.twig' with {
                    label: app.request.locale == 'en' ? 'All' : 'Tous',
                    active: true,
                    class: 'tag--all',
                    attrs: 'data-filter-reset="true"',
                } %}
                {% for value, label in categoryLabels %}
                    {% include 'components/_tag.html.twig' with {
                        label: label,
                        attrs: 'data-filter-category="' ~ value ~ '"',
                    } %}
                {% endfor %}
            </div>


            <div class="projects-list-page__grid" data-projects-list-grid="true">
                {% for project in projects %}
                    {% include 'components/_project-card.html.twig' with {
                        imagePath: projectImagePaths[project.id] ?? '',
                        imageDarkPath: projectImageDarkPaths[project.id] ?? '',
                        imageFrame: projectImageFrames[project.id].imageFrame ?? null,
                        imageDarkFrame: projectImageFrames[project.id].imageDarkFrame ?? null,
                        title: project.title,
                        subtitle: projectSubtitles[project.id] ?? '',
                        tags: project.tags|map(tag => categoryLabels[tag.slug] ?? tag.name),
                        href: page_url(project, project.parent),
                        attrs: 'data-category="' ~ (projectCategories[project.id] ?? '') ~ '"',
                    } %}
                {% endfor %}
            </div>

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

    {{ include('components/_patrimoine-section.html.twig', {
        content: content,
        imagePath: patrimoineImagePath|default(''),
        imageDarkPath: patrimoineImageDarkPath|default(''),
        edit_mode: editMode|default(false),
    }) }}
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('projects-list') }}
{% endblock %}