@php
    $record = $getRecord();
    $imageUrls = $record?->additional_image_urls ?? [];
    $previewLabel = __('panels.requests.preview_image');
@endphp
<div class="fi-ta-image flex items-center gap-x-1 max-w-max px-3 py-4" x-data="{ open: false, currentSrc: '', currentAlt: @js($previewLabel) }" @click.stop>
    @foreach(array_slice($imageUrls, 0, 5) as $imageUrl)
        <button
            type="button"
            data-preview-src="{{ e($imageUrl) }}"
            data-preview-alt="{{ e($previewLabel) }}"
            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;"
            @click.stop="currentSrc = $event.currentTarget.dataset.previewSrc; currentAlt = $event.currentTarget.dataset.previewAlt; open = true"
        >
            <img
                src="{{ e($imageUrl) }}"
                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
    @if(count($imageUrls) > 5)
        <span class="text-xs text-gray-500 dark:text-gray-400">+{{ count($imageUrls) - 5 }}</span>
    @endif

    {{-- Preview modal (same structure as gallery column) --}}
    <template x-if="open">
        <div
            class="fixed inset-0 z-[100] 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>