{# Widget « Avant / Après » — comparateur d'images avec curseur.

   Les deux images doivent avoir les mêmes proportions : l'image « Après »
   définit la hauteur, l'image « Avant » la recouvre (object-fit: cover) et
   n'en révèle qu'une partie via clip-path pilotée par le curseur. #}

{% if beforeImage and afterImage %}
<div class="izi-ba{{ rounded ? ' izi-ba--rounded' : '' }}" id="izi-ba-{{ widgetId }}" style="--ba-pos: {{ startPosition }}%;">
    <img class="izi-ba__after" src="{{ afterImage }}" alt="{{ afterLabel }}" loading="lazy">
    <img class="izi-ba__before" src="{{ beforeImage }}" alt="{{ beforeLabel }}" loading="lazy">
    <span class="izi-ba__divider" aria-hidden="true">
        <span class="izi-ba__handle"><i class="fa-solid fa-arrows-left-right"></i></span>
    </span>
    <span class="izi-ba__label izi-ba__label--before">{{ beforeLabel }}</span>
    <span class="izi-ba__label izi-ba__label--after">{{ afterLabel }}</span>
    <input class="izi-ba__range" type="range" min="0" max="100" value="{{ startPosition }}"
           aria-label="Comparer {{ beforeLabel }} et {{ afterLabel }}">
</div>

<style>
    .izi-ba {
        position: relative;
        max-width: 1000px;
        margin: 0 auto;
        overflow: hidden;
        user-select: none;
    }

    .izi-ba--rounded { border-radius: var(--radius-lg, 12px); }

    .izi-ba__after {
        display: block;
        width: 100%;
        height: auto;
    }

    .izi-ba__before {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
    }

    .izi-ba__divider {
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--ba-pos, 50%);
        width: 3px;
        margin-left: -1.5px;
        background: #ffffff;
        box-shadow: 0 0 8px rgba(15, 23, 42, 0.4);
        pointer-events: none;
    }

    .izi-ba__handle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #ffffff;
        color: #1e293b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.35);
    }

    .izi-ba__label {
        position: absolute;
        bottom: 14px;
        padding: 4px 12px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.7);
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        pointer-events: none;
    }

    .izi-ba__label--before { left: 14px; }
    .izi-ba__label--after { right: 14px; }

    .izi-ba__range {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: ew-resize;
        touch-action: none;
    }
</style>

<script>
    (function () {
        var root = document.getElementById('izi-ba-{{ widgetId }}');
        if (!root) return;
        root.querySelector('.izi-ba__range').addEventListener('input', function () {
            root.style.setProperty('--ba-pos', this.value + '%');
        });
    })();
</script>
{% else %}
    <!-- Widget avant/après : images non configurées -->
{% endif %}