@props([
    'before' => null,
    'after' => null,
    'beforeLabel' => null,
    'afterLabel' => null,
    'alt' => '',
])

@php($sliderId = 'compare-'.Str::random(6))

{{--
    Before / after comparison — the honest way to show what an assignment
    changed. The reveal is a clip-path on a full-size overlay, so no width maths
    is needed and it stays exact at every breakpoint. Dragging is a convenience;
    the range input underneath is the real control, so the comparison is fully
    operable from the keyboard.
--}}
<figure x-data="compareSlider"
        {{ $attributes->merge(['class' => 'relative select-none overflow-hidden rounded-2xl bg-surface-muted']) }}
        @pointerdown="dragging = true; move($event)"
        @pointermove="move($event)"
        @pointerup.window="dragging = false"
        @pointercancel.window="dragging = false">

    {{-- "After" is the base layer; "before" is clipped over the top of it. --}}
    <img src="{{ image_url($after) }}" alt="{{ $alt }}" loading="lazy" decoding="async"
         class="block aspect-16/10 w-full object-cover" draggable="false">

    <img src="{{ image_url($before) }}" alt="" aria-hidden="true" loading="lazy" decoding="async"
         class="absolute inset-0 size-full object-cover" draggable="false"
         :style="`clip-path: inset(0 ${100 - position}% 0 0)`">

    <div class="pointer-events-none absolute inset-y-0 w-0.5 bg-white" :style="`left: ${position}%`">
        <span class="absolute top-1/2 flex size-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-0.5 rounded-full bg-white text-primary shadow-raised">
            <x-icon name="chevron-left" class="size-3" />
            <x-icon name="chevron-right" class="size-3" />
        </span>
    </div>

    @if ($beforeLabel)
        <span class="pointer-events-none absolute left-4 top-4"><x-badge variant="on-dark">{{ $beforeLabel }}</x-badge></span>
    @endif

    @if ($afterLabel)
        <span class="pointer-events-none absolute right-4 top-4"><x-badge variant="on-dark">{{ $afterLabel }}</x-badge></span>
    @endif

    <label class="sr-only" for="{{ $sliderId }}">{{ __('Reveal the before image') }}</label>
    <input id="{{ $sliderId }}" type="range" min="0" max="100" step="1" x-model.number="position"
           class="absolute inset-x-0 bottom-4 mx-auto block w-2/3 cursor-ew-resize accent-white"
           :aria-valuetext="`${Math.round(position)}%`">
</figure>