@props([
    'imageUrls' => [],
])

@php
    $imageUrls = is_array($imageUrls) ? $imageUrls : (isset($imageUrl) ? [$imageUrl] : []);
@endphp
@if(count($imageUrls) > 0)
<div class="fi-fo-field-wrp flex flex-wrap gap-2 items-center" x-data="{ open: false, currentSrc: '', currentAlt: @js(__('panels.requests.preview_image')) }">
    @foreach($imageUrls as $url)
        <button
            type="button"
            data-preview-src="{{ e($url) }}"
            data-preview-alt="{{ e(__('panels.requests.additional_image')) }}"
            @click="currentSrc = $event.currentTarget.dataset.previewSrc; currentAlt = $event.currentTarget.dataset.previewAlt; open = true"
            class="focus:outline-none focus:ring-2 focus:ring-primary-500 rounded overflow-hidden flex-shrink-0 cursor-pointer"
            style="height: 2.5rem; width: 2.5rem;"
        >
            <img
                src="{{ e($url) }}"
                alt=""
                class="max-w-none object-cover rounded ring-2 ring-white dark:ring-gray-900 hover:opacity-90 w-full h-full pointer-events-none"
                loading="lazy"
            />
        </button>
    @endforeach

    {{-- Modal overlay --}}
    <template x-if="open">
        <div
            class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/50 dark:bg-gray-900/80"
            @click.self="open = false"
            @keydown.escape.window="open = false"
        >
            <div
                class="relative max-w-4xl max-h-[90vh] w-full bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden"
                @click.stop
            >
                <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300" x-text="currentAlt"></span>
                    <button
                        type="button"
                        @click="open = false"
                        class="rounded-lg p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-600 dark:hover:text-gray-300"
                    >
                        @svg('heroicon-o-x-mark', 'w-5 h-5')
                    </button>
                </div>
                <div class="p-4 overflow-auto max-h-[calc(90vh-4rem)] flex items-center justify-center">
                    <img
                        x-bind:src="currentSrc"
                        x-bind:alt="currentAlt"
                        class="max-w-full max-h-[80vh] object-contain rounded-lg"
                    />
                </div>
            </div>
        </div>
    </template>
</div>
@endif