@props(['product'])

@php
    $shots = $product->screenshots->values();
    $urls = $shots->map->url->all();
    $tiles = $shots->slice(1, 3)->values();
    $more = max(0, $shots->count() - 4);
@endphp

@if($shots->isNotEmpty())
    <div data-gallery
         x-data="{ open: false, index: 0, urls: @js($urls),
                   show(i) { this.index = i; this.open = true },
                   next() { this.index = (this.index + 1) % this.urls.length },
                   prev() { this.index = (this.index - 1 + this.urls.length) % this.urls.length } }"
         @keydown.escape.window="open = false"
         @keydown.arrow-right.window="open && next()"
         @keydown.arrow-left.window="open && prev()"
         {{ $attributes }}>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
            <button type="button" @click="show(0)" class="{{ $tiles->isEmpty() ? 'sm:col-span-3' : 'sm:col-span-2 sm:row-span-3' }} block overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
                <img src="{{ $urls[0] }}" alt="{{ $product->title }} screenshot 1" class="w-full h-full object-cover aspect-video sm:aspect-auto">
            </button>
            @foreach($tiles as $i => $shot)
                <button type="button" @click="show({{ $i + 1 }})" class="relative block overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
                    <img src="{{ $shot->url }}" alt="{{ $product->title }} screenshot {{ $i + 2 }}" class="w-full h-full object-cover aspect-video">
                    @if($loop->last && $more > 0)
                        <span class="absolute inset-0 flex items-center justify-center bg-black/50 text-white font-semibold">+{{ $more }} more</span>
                    @endif
                </button>
            @endforeach
        </div>

        <div x-show="open" style="display: none" x-transition.opacity
             class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
             @click.self="open = false" role="dialog" aria-modal="true">
            <button type="button" @click="open = false" class="absolute top-4 right-4 text-white text-3xl leading-none" aria-label="Close">&times;</button>
            <button type="button" x-show="urls.length > 1" @click="prev()" class="absolute left-4 text-white text-4xl" aria-label="Previous">&lsaquo;</button>
            <img :src="urls[index]" alt="" class="max-h-full max-w-full object-contain">
            <button type="button" x-show="urls.length > 1" @click="next()" class="absolute right-4 text-white text-4xl" aria-label="Next">&rsaquo;</button>
        </div>
    </div>
@endif