{#
    ProjectDetail content block - photo gallery (grid). ProjectDetail-only block type, no
    Actualité equivalent - see "Repeatable Block Templates (Exception)" in
    spec-driven-development/rules/section-component-architecture.md.

    Parameters:
    - block (object): block data with `id`, `type`, `fields.{title, images[], imagePaths[]}`
      (`images[]` / `imagesDark[]` = Été / Hiver media UUIDs for the editor's data-media-id /
      data-media-id-dark, index-aligned with `imagePaths[]` / `imageDarkPaths[]` - the resolved
      file paths set by ProjectDetailPageEnricher for <img src>)

    MediaSelectorModal (assets/admin/media/MediaSelectorModal.ts) has no native multi-select
    support (one field = one picked media). Each gallery image is therefore its own
    `[data-editable-image="true"]` slot rather than a bulk picker - "un slot par image +
    bouton ajouter", per the fallback pattern documented in the redesign plan. Every slot
    uses `data-field="images[]"`: the trailing `[]` is ContentSerializer.ts's convention for
    "collect every element sharing this field name, within this block, into a single array"
    (see ContentSerializer.serializeSectioned()), so N slots always serialize to
    `fields.images = [uuid, uuid, ...]` regardless of N (including N=0/1, where a plain
    per-count heuristic would be ambiguous).
#}
<div class="actualite-block project-detail-block-gallery"{% if editMode|default(false) %} data-section="{{ block.id }}" data-section-type="gallery"{% endif %}>
    {% if editMode|default(false) %}
        {{ include('components/_actualite-block-controls.html.twig', { showMobilePositionToggle: false }) }}
    {% endif %}

    {% if (block.fields.title is defined and block.fields.title) or editMode|default(false) %}
        <h2 class="actualite-block__title project-detail-block-gallery__title"{% if editMode|default(false) %} data-editable="true" data-editor-type="simple" data-field="title" data-placeholder="Titre de la galerie"{% endif %}>{{ block.fields.title|default('') }}</h2>
    {% endif %}

    {% if editMode|default(false) %}
        {# Edit mode keeps the plain editable grid - BlockListEditor.ts's add/remove-image
           wiring (data-gallery-grid/-add-image/-remove-image) targets this markup directly.
           The public-facing infinite-swipe slider (below) is display-only, so it isn't the
           right target for the per-image edit affordances. #}
        <div class="project-detail-block-gallery__grid" data-gallery-grid="true">
            {% for image in block.fields.images|default([]) %}
                <div class="project-detail-block-gallery__item is-editable"
                    data-editable-image="true"
                    data-field="images[]"
                    data-media-id="{{ image }}"
                    data-media-id-dark="{{ block.fields.imagesDark[loop.index0]|default('') }}"{{ image_frame_attrs(block.fields, 'images', true, false, loop.index0) }}>
                    {% include 'components/_themed_img.html.twig' with {light: block.fields.imagePaths[loop.index0]|default(''), dark: block.fields.imageDarkPaths[loop.index0]|default(''), alt: block.fields.title|default('Galerie'), class: 'project-detail-block-gallery__img', loading: 'lazy'} only %}
                    <button type="button" class="project-detail-block-gallery__remove" data-gallery-remove-image="true" aria-label="Supprimer cette image">&#128465;</button>
                </div>
            {% endfor %}
        </div>
    {% else %}
        {% set galleryImages = [] %}
        {% for path in block.fields.imagePaths|default([]) %}
            {% set galleryImages = galleryImages|merge([{ path: path, darkPath: block.fields.imageDarkPaths[loop.index0]|default(''), frame: block.fields.imageFrames[loop.index0]|default(null), darkFrame: block.fields.imageDarkFrames[loop.index0]|default(null), alt: block.fields.title|default('Galerie') }]) %}
        {% endfor %}
        {% include 'components/_gallery-slider.html.twig' with { images: galleryImages } %}
    {% endif %}

    {% if editMode|default(false) %}
        <button type="button" class="actualite-block__control actualite-block__control--add project-detail-block-gallery__add" data-gallery-add-image="true">
            + Ajouter une image
        </button>

        {# Hidden single-slot template, cloned by BlockListEditor.ts when "Ajouter une image"
           is clicked - keeps editor markup in sync with the real render partial rather than
           building DOM via TS template literals (same "clone real markup" rule as the
           block-type templates in templates/projects/detail.html.twig). #}
        <template data-gallery-item-template="true">
            <div class="project-detail-block-gallery__item is-editable is-empty-image"
                data-editable-image="true"
                data-field="images[]"
                data-media-id=""
                data-media-id-dark=""
                data-image-frame="" data-image-frame-dark="" data-image-ratio="" data-frame-ratio="false">
                <span class="editable-image__placeholder">
                    <span class="editable-image__placeholder-icon">+</span>
                    <span class="editable-image__placeholder-label">Ajouter une image</span>
                </span>
                <img src="" alt="" loading="lazy" class="project-detail-block-gallery__img">
                <button type="button" class="project-detail-block-gallery__remove" data-gallery-remove-image="true" aria-label="Supprimer cette image">&#128465;</button>
            </div>
        </template>
    {% endif %}
</div>