@props([
    'before' => null,
    'after' => null,
    'beforeLabel' => 'Antes',
    'afterLabel' => 'Después',
    'label' => null,
])

@php
    $ariaLabel = $label ?: 'Comparación de antes y después';
@endphp

@if (filled($before) && filled($after))
    <div data-before-after
         x-data="beforeAfterSlider"
         @pointerdown="start($event)"
         @pointermove.window="move($event)"
         @pointerup.window="stop()"
         @pointercancel.window="stop()"
         role="group"
         aria-label="{{ $ariaLabel }}"
         {{ $attributes->merge(['class' => 'relative select-none overflow-hidden rounded-none bg-surface-raised']) }}>
        {{-- After image is the base layer; the before image is clipped on top. --}}
        <img src="{{ $after }}" alt="{{ $afterLabel }}" width="1200" height="800" loading="lazy"
             class="block h-auto w-full object-cover">

        <div class="absolute inset-0 overflow-hidden"
             :style="'clip-path: inset(0 ' + (100 - position) + '% 0 0)'">
            <img src="{{ $before }}" alt="{{ $beforeLabel }}" width="1200" height="800" loading="lazy"
                 class="h-full w-full object-cover">
        </div>

        {{-- Divider line. --}}
        <div class="pointer-events-none absolute inset-y-0 z-10 w-px -translate-x-1/2 bg-white/80"
             :style="'left: ' + position + '%'" aria-hidden="true"></div>

        {{-- Keyboard-accessible handle. --}}
        <button type="button"
                role="slider"
                tabindex="0"
                aria-label="{{ $ariaLabel }}"
                aria-valuemin="0"
                aria-valuemax="100"
                :aria-valuenow="Math.round(position)"
                aria-valuetext="{{ $beforeLabel }} / {{ $afterLabel }}"
                @keydown="keydown($event)"
                :style="'left: ' + position + '%'"
                class="absolute top-0 z-20 flex h-full w-10 -translate-x-1/2 cursor-ew-resize items-center justify-center bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
                style="touch-action: none;">
            <span class="flex h-10 w-10 items-center justify-center rounded-none border border-line bg-surface/80 text-on-surface backdrop-blur-sm" aria-hidden="true">
                <x-icon name="chevron-down" :size="18" class="rotate-90" />
            </span>
        </button>

        <span class="absolute bottom-3 left-3 rounded-none bg-surface/70 px-2 py-1 font-sans text-xs font-medium uppercase tracking-[0.14em] text-on-surface">
            {{ $beforeLabel }}
        </span>
        <span class="absolute bottom-3 right-3 rounded-none bg-surface/70 px-2 py-1 font-sans text-xs font-medium uppercase tracking-[0.14em] text-on-surface">
            {{ $afterLabel }}
        </span>
    </div>
@endif