{#
    About page - "C'est quoi galta ?" section: an unlimited list of photo + text items
    (components/_about-galta-item.html.twig), spread on one line.

    Public: the line is wider than the screen, so assets/about.ts pins `.about-galta__pin` and
    scrubs `[data-horizontal-track]` horizontally with the mouse wheel (HorizontalPinScroll,
    same effect as the home's mountain sections). Without it (reduced motion, nothing to
    scroll) `.about-galta__viewport` is a plain `overflow-x: auto` scroller.

    Edit mode: no pinning, the items are laid out in a grid (like the ProjectDetail gallery)
    and managed by RepeatableObjectListEditor (add / remove / drag & drop via the handle),
    rooted on this <section> (so it must contain exactly one <template>). Max 30 items,
    mirrored by AboutPageContentDto.

    Parameters:
    - galtaItems (array): items enriched by AboutPageEnricher (`imagePath` / `imageDarkPath` resolved)
    - editMode (bool)
#}
{% set editMode = editMode|default(false) %}
<section class="about-galta" id="about-galta">
    <div class="about-galta__pin">
        <p class="about-galta__title">C&rsquo;est quoi galta ?</p>

        <div class="about-galta__viewport"{% if not editMode %} tabindex="0" role="region" aria-label="C&rsquo;est quoi galta ?"{% endif %}>
            <div class="about-galta__track"{% if editMode %} data-repeatable-list="true" data-repeatable-list-prefix="galtaItems" data-repeatable-list-layout="grid" data-repeatable-list-max="30"{% else %} data-horizontal-track{% endif %}>
                {% for item in galtaItems|default([]) %}
                    {% if editMode or item.image|default('') or item.imageDark|default('') or item.text|default('') %}
                        {% include 'components/_about-galta-item.html.twig' with {item: item, index: loop.index0, editMode: editMode} only %}
                    {% endif %}
                {% endfor %}
            </div>
        </div>

        {% if editMode %}
            <button type="button" class="about-galta__add" data-repeatable-list-add="true">+ Ajouter un bloc</button>

            <template>
                {% include 'components/_about-galta-item.html.twig' with {item: {}, index: '__INDEX__', editMode: true} only %}
            </template>
        {% endif %}
    </div>
</section>