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

@if(count($imageUrls) > 0)
<div class="fi-ta-image flex items-center gap-x-1 px-3 py-4" onclick="event.preventDefault();event.stopPropagation();var b=event.target.closest('[data-image-preview-url]');if(b&&window.filamentImagePreview)window.filamentImagePreview(b.dataset.imagePreviewUrl,b.dataset.previewLabel);return false;">
    @foreach(array_slice($imageUrls, 0, 5) as $url)
        <button
            type="button"
            data-image-preview-url="{{ e($url) }}"
            data-preview-label="{{ e(__('panels.requests.preview_image')) }}"
            class="focus:outline-none focus:ring-2 focus:ring-primary-500 rounded overflow-hidden flex-shrink-0 cursor-pointer"
        >
            <img
                src="{{ $url }}"
                alt=""
                class="max-w-none object-cover rounded ring-2 ring-white dark:ring-gray-900 hover:opacity-90"
                style="height: 2.5rem; width: 2.5rem;"
                loading="lazy"
            />
        </button>
    @endforeach
    @if(count($imageUrls) > 5)
        <span class="text-xs text-gray-500 dark:text-gray-400">+{{ count($imageUrls) - 5 }}</span>
    @endif
</div>
@endif