{#
    About page - one "C'est quoi galta ?" item: photo (left) + text (right), as a single unit.

    Rendered by _about-galta.html.twig for every saved item AND (editMode only) for the hidden
    <template> that RepeatableObjectListEditor clones when "Ajouter un bloc" is clicked, so the
    editor markup can't drift from the real render. For the template, `item` is `{}` and
    `index` is the `__INDEX__` sentinel.

    The photo is always 16/9 (CSS): no ratio setting (`allowRatio` = false), only the Été / Hiver framing.

    Field names follow the `galtaItems[N][sub]` convention parsed by ContentSerializer.ts.
    The item's stable `id` travels in a hidden `data-editable-value` element (edit mode): it
    pairs FR/EN items so their images stay shared (see LocaleImageOverlay).

    Parameters:
    - item (array): `{id, text, image, imageDark, imagePath, imageDarkPath, imageFrame, imageDarkFrame}`
    - index (int|string): position in the list (field-name index)
    - editMode (bool)
#}
{% set editMode = editMode|default(false) %}
{% set hasImage = item.image|default('') or item.imageDark|default('') %}
<article class="about-galta__item"{% if editMode %} data-repeatable-item="true"{% endif %}>
    {% if editMode %}
        <span hidden data-editable-value="true" data-field="galtaItems[{{ index }}][id]" data-value="{{ item.id|default('') }}"></span>
        <div class="about-galta__item-controls">
            <span class="about-galta__item-handle" data-repeatable-item-handle="true" title="Déplacer" aria-label="Déplacer ce bloc">&#10303;</span>
            <button type="button" class="about-galta__item-remove" data-repeatable-item-remove="true" aria-label="Supprimer ce bloc">&#128465;</button>
        </div>
    {% endif %}

    {% if hasImage or editMode %}
        <div class="about-galta__image{% if editMode and not hasImage %} is-empty-image{% endif %}"{{ image_frame_attrs(item, 'image', editMode, false) }}{% if editMode %}
            data-editable-image="true"
            data-field="galtaItems[{{ index }}][image]"
            data-media-id="{{ item.image|default('') }}" data-media-id-dark="{{ item.imageDark|default('') }}"{% endif %}>
            {% if editMode and not hasImage %}
                <span class="editable-image__placeholder">
                    <span class="editable-image__placeholder-icon">+</span>
                    <span class="editable-image__placeholder-label">Ajouter une image</span>
                </span>
            {% endif %}
            {% include 'components/_themed_img.html.twig' with {light: item.imagePath|default(''), dark: item.imageDarkPath|default(''), alt: '', class: 'about-galta__img'} only %}
        </div>
    {% endif %}

    {% if item.text|default('') or editMode %}
        <div class="about-galta__col">
            <span class="about-galta__divider" aria-hidden="true"></span>
            <div class="about-galta__text"{% if editMode %} data-editable="true" data-field="galtaItems[{{ index }}][text]" data-placeholder="Texte"{% endif %}>{{ item.text|default('')|raw }}</div>
        </div>
    {% endif %}
</article>