@php
    $images = $getState() ?? [];
    $images = is_array($images) ? array_values(array_filter($images)) : [];
    $urls = array_values(array_map(
        fn ($path) => \Illuminate\Support\Facades\Storage::disk('public')->url($path),
        $images
    ));
    $group = 'gallery-' . md5(implode(',', $urls));
@endphp

@if(count($urls) > 0)
    <div class="grid grid-cols-4 gap-2">
        @foreach($urls as $idx => $url)
            <div
                class="relative cursor-pointer rounded-lg overflow-hidden border border-gray-200 hover:border-primary-400 hover:opacity-80 transition-all shadow-sm group"
                style="aspect-ratio:16/9;"
                data-lb-group="{{ $group }}"
                data-lb-idx="{{ $idx }}"
                data-lb-src="{{ $url }}"
            >
                <img
                    src="{{ $url }}"
                    class="w-full h-full object-cover"
                    alt=""
                    loading="lazy"
                />
                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition duration-200"></div>
            </div>
        @endforeach
    </div>
@else
    <span class="text-sm text-gray-400">-</span>
@endif