{{-- Shared lightbox markup. Requires an x-data="lightbox" ancestor. --}}
<div x-show="open" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-dark/95 p-4"
     x-trap.noscroll="open"
     @keydown.escape.window="close()" @keydown.arrow-right.window="next()" @keydown.arrow-left.window="prev()"
     role="dialog" aria-modal="true" :aria-label="current?.caption || '{{ __('Image viewer') }}'">

    <button type="button" @click="close()"
            class="absolute right-4 top-4 rounded-full bg-white/10 p-2.5 text-white transition hover:bg-white/20"
            aria-label="{{ __('Close viewer') }}">
        <x-icon name="close" class="size-5" />
    </button>

    <button type="button" @click="prev()" x-show="items.length > 1"
            class="absolute left-4 rounded-full bg-white/10 p-3 text-white transition hover:bg-white/20"
            aria-label="{{ __('Previous image') }}">
        <x-icon name="chevron-left" class="size-5" />
    </button>

    <figure class="max-h-full max-w-5xl" @click.stop>
        <img :src="current?.src" :alt="current?.caption ?? ''" class="max-h-[78vh] w-auto rounded-xl object-contain">

        <figcaption class="mt-4 flex items-center justify-center gap-3 text-sm text-white/70">
            <span x-show="current?.caption" x-text="current?.caption"></span>
            <span x-show="items.length > 1" class="meta-label text-white/50">
                <span x-text="index + 1"></span> / <span x-text="items.length"></span>
            </span>
        </figcaption>
    </figure>

    <button type="button" @click="next()" x-show="items.length > 1"
            class="absolute right-4 rounded-full bg-white/10 p-3 text-white transition hover:bg-white/20"
            aria-label="{{ __('Next image') }}">
        <x-icon name="chevron-right" class="size-5" />
    </button>
</div>