{#
    ProjectDetail content block - paragraphs (repeatable) + image. 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.{paragraphs[], image, imagePath}`
      (`paragraphs[]` = `{title, subtitle, text}[]`; `image` = media UUID for the editor's
      data-media-id, `imagePath` = resolved file path for <img src>, set by
      ProjectDetailPageEnricher's generic `fields.image` -> `fields.imagePath` resolution)

    Two-column layout (repeatable list left, sticky image right) reuses the Expertise page's
    `components/_expertise-list.html.twig` shell via {% embed %}, overriding its `items` and
    `image` blocks - same grid/sticky/aspect-ratio visual as Expertise's list (see
    assets/styles/components/_expertise-list.scss, imported by both assets/expertise.ts and
    assets/project-detail.ts). Only the paragraph-specific typography/remove-button/add-button
    styling stays block-local (`.project-detail-block-paragraphs-image__paragraph*` /
    `__add`, in assets/styles/pages/_project-detail.scss).

    Left column's paragraph list is RepeatableObjectListEditor-managed in edit mode
    (assets/admin/editor/RepeatableObjectListEditor.ts), instantiated per-block-instance by
    BlockListEditor.bindBlockControls() (mirrors bindGalleryControls()'s block-scoping).
    `data-field="paragraphs[N][title|subtitle|text]"`, index-contiguous.

    The paragraph item's hidden <template> lives NESTED inside this block's own hidden
    block-level <template> (templates/projects/detail.html.twig's
    `project-detail-block-template-paragraphs-image` fragment) - verified that
    BlockListEditor.addBlock()'s `cloneNode(true)` on the outer template's `.content`
    correctly preserves this inner <template>'s `.content` (jsdom/browsers clone template
    contents recursively per the HTML spec's template cloning steps), see
    tests/frontend/admin/editor/BlockListEditor.test.ts.
#}
<div class="actualite-block project-detail-block-paragraphs-image"{% if editMode|default(false) %} data-section="{{ block.id }}" data-section-type="paragraphs-image"{% endif %}>
    {% if editMode|default(false) %}
        {{ include('components/_actualite-block-controls.html.twig', { showMobilePositionToggle: false }) }}
    {% endif %}

    {% embed 'components/_expertise-list.html.twig' %}
        {% block items %}
            <div class="project-detail-block-paragraphs-image__paragraphs" data-paragraphs-list="true" data-repeatable-list="true" data-repeatable-list-prefix="paragraphs">
                {% for paragraph in block.fields.paragraphs|default([]) %}
                    <div class="project-detail-block-paragraphs-image__paragraph"{% if editMode|default(false) %} data-repeatable-item="true"{% endif %}>
                        <h3 class="project-detail-block-paragraphs-image__paragraph-title"{% if editMode|default(false) %} data-editable="true" data-editor-type="simple" data-field="paragraphs[{{ loop.index0 }}][title]" data-placeholder="Titre"{% endif %}>{{ paragraph.title|default('') }}</h3>
                        {% if (paragraph.subtitle is defined and paragraph.subtitle) or editMode|default(false) %}
                            <p class="project-detail-block-paragraphs-image__paragraph-subtitle"{% if editMode|default(false) %} data-editable="true" data-editor-type="simple" data-field="paragraphs[{{ loop.index0 }}][subtitle]" data-placeholder="Sous-titre"{% endif %}>{{ paragraph.subtitle|default('') }}</p>
                        {% endif %}
                        <div class="project-detail-block-paragraphs-image__paragraph-text"{% if editMode|default(false) %} data-editable="true" data-field="paragraphs[{{ loop.index0 }}][text]" data-placeholder="Texte"{% endif %}>{{ paragraph.text|default('')|raw }}</div>
                        {% if editMode|default(false) %}
                            <button type="button" class="project-detail-block-paragraphs-image__paragraph-remove" data-repeatable-item-remove="true" aria-label="Supprimer ce paragraphe">&#128465;</button>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>

            {% if editMode|default(false) %}
                <button type="button" class="actualite-block__control actualite-block__control--add project-detail-block-paragraphs-image__add" data-repeatable-list-add="true">
                    + Ajouter un paragraphe
                </button>

                <template data-paragraph-item-template="true">
                    <div class="project-detail-block-paragraphs-image__paragraph" data-repeatable-item="true">
                        <h3 class="project-detail-block-paragraphs-image__paragraph-title" data-editable="true" data-editor-type="simple" data-field="paragraphs[__INDEX__][title]" data-placeholder="Titre"></h3>
                        <p class="project-detail-block-paragraphs-image__paragraph-subtitle" data-editable="true" data-editor-type="simple" data-field="paragraphs[__INDEX__][subtitle]" data-placeholder="Sous-titre"></p>
                        <div class="project-detail-block-paragraphs-image__paragraph-text" data-editable="true" data-field="paragraphs[__INDEX__][text]" data-placeholder="Texte"></div>
                        <button type="button" class="project-detail-block-paragraphs-image__paragraph-remove" data-repeatable-item-remove="true" aria-label="Supprimer ce paragraphe">&#128465;</button>
                    </div>
                </template>
            {% endif %}
        {% endblock %}

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