{#
    Generic two-column list layout: left column scrolls (repeatable items), right column
    is a single image, sticky for the whole list height. Shared shell reused via
    {% include %} as-is (Expertise page's fixed-count items) or {% embed %} with the
    `items`/`image` blocks overridden (ProjectDetail's repeatable `paragraphs-image` block).

    Default block bodies below implement the Expertise page usage:
    - `items`: loops `content.items`, includes `components/_expertise-item.html.twig`
    - `image`: `content.itemsImage` (media id) / `itemsImagePath` (resolved src)
#}
<section class="expertise-list">
    <div class="expertise-list__items">
        {% block items %}
            {% for item in content.items|default([]) %}
                {% if item.title|default(false) or item.subtitle|default(false) or item.content|default(false) or editMode|default(false) %}
                    {% include 'components/_expertise-item.html.twig' with { item: item, index: loop.index } %}
                {% endif %}
            {% endfor %}
        {% endblock %}
    </div>

    <div class="expertise-list__image-col">
        {% block image %}
            <div class="expertise-list__image{% if editMode|default(false) and not (content.itemsImage|default(false) or content.itemsImageDark|default(false)) %} is-empty-image{% endif %}"{{ image_frame_attrs(content|default({}), 'itemsImage', editMode|default(false)) }}{% if editMode|default(false) %}
                data-editable-image="true"
                data-field="itemsImage"
                data-media-id="{{ content.itemsImage|default('') }}" data-media-id-dark="{{ content.itemsImageDark|default('') }}"{% endif %}>
                {% if editMode|default(false) and not (content.itemsImage|default(false) or content.itemsImageDark|default(false)) %}
                    <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: itemsImagePath|default(''), dark: itemsImageDarkPath|default(''), alt: '', class: 'expertise-list__img'} only %}
            </div>
        {% endblock %}
    </div>
</section>