{#
    ProjectDetail content block - before/after comparison slider. 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.{beforeImage, afterImage, beforeImagePath, afterImagePath, beforeLabel, afterLabel}`
      (`beforeImage`/`afterImage` = media UUIDs for the editor's data-media-id;
      `beforeImagePath`/`afterImagePath` = resolved file paths for <img src>, set by
      ProjectDetailPageEnricher::resolveBlockImages())

    Interactive drag behavior (Pointer Events, clip-path) lives in
    assets/components/before-after-slider.ts, mounted from assets/project-detail.ts, guarded
    by `[data-before-after-handle]` - works identically in edit mode and public view (decision
    (c) in spec-driven-development/project-detail-redesign.md). This partial only renders the
    static structure + accessibility attributes; layout/positioning is SCSS (follow-up pass).
#}
{% set beforeLabel = block.fields.beforeLabel|default('Avant') %}
{% set afterLabel = block.fields.afterLabel|default('Après') %}
<div class="actualite-block project-detail-block-before-after"{% if editMode|default(false) %} data-section="{{ block.id }}" data-section-type="before-after"{% endif %}>
    {% if editMode|default(false) %}
        {{ include('components/_actualite-block-controls.html.twig', { showMobilePositionToggle: false }) }}
    {% endif %}

    <div class="project-detail-block-before-after__container" data-before-after-container="true">
        <div class="project-detail-block-before-after__layer project-detail-block-before-after__layer--before{% if editMode|default(false) and not (block.fields.beforeImage|default(false) or block.fields.beforeImageDark|default(false)) %} is-empty-image{% endif %}"{{ image_frame_attrs(block.fields|default({}), 'beforeImage', editMode|default(false), false) }}{% if editMode|default(false) %}
            data-editable-image="true"
            data-field="beforeImage"
            data-media-id="{{ block.fields.beforeImage|default('') }}" data-media-id-dark="{{ block.fields.beforeImageDark|default('') }}"{% endif %}>
            {% if editMode|default(false) and not (block.fields.beforeImage|default(false) or block.fields.beforeImageDark|default(false)) %}
                <span class="editable-image__placeholder">
                    <span class="editable-image__placeholder-icon">+</span>
                    <span class="editable-image__placeholder-label">Ajouter l'image "avant"</span>
                </span>
            {% endif %}
            {% include 'components/_themed_img.html.twig' with {light: block.fields.beforeImagePath|default(''), dark: block.fields.beforeImageDarkPath|default(''), alt: beforeLabel, class: 'project-detail-block-before-after__img'} only %}
        </div>

        <div class="project-detail-block-before-after__layer project-detail-block-before-after__layer--after{% if editMode|default(false) and not (block.fields.afterImage|default(false) or block.fields.afterImageDark|default(false)) %} is-empty-image{% endif %}"{{ image_frame_attrs(block.fields|default({}), 'afterImage', editMode|default(false), false) }} data-before-after-after-layer="true"{% if editMode|default(false) %}
            data-editable-image="true"
            data-field="afterImage"
            data-media-id="{{ block.fields.afterImage|default('') }}" data-media-id-dark="{{ block.fields.afterImageDark|default('') }}"{% endif %}>
            {% if editMode|default(false) and not (block.fields.afterImage|default(false) or block.fields.afterImageDark|default(false)) %}
                <span class="editable-image__placeholder">
                    <span class="editable-image__placeholder-icon">+</span>
                    <span class="editable-image__placeholder-label">Ajouter l'image "après"</span>
                </span>
            {% endif %}
            {% include 'components/_themed_img.html.twig' with {light: block.fields.afterImagePath|default(''), dark: block.fields.afterImageDarkPath|default(''), alt: afterLabel, class: 'project-detail-block-before-after__img'} only %}
        </div>

        <span class="project-detail-block-before-after__label project-detail-block-before-after__label--before">{{ beforeLabel }}</span>
        <span class="project-detail-block-before-after__label project-detail-block-before-after__label--after">{{ afterLabel }}</span>

        <div class="project-detail-block-before-after__handle"
            data-before-after-handle="true"
            role="slider"
            tabindex="0"
            aria-label="Comparer avant / après"
            aria-valuemin="0"
            aria-valuemax="100"
            aria-valuenow="50">
            <span class="project-detail-block-before-after__handle-icon" aria-hidden="true"></span>
        </div>
    </div>
</div>