@php
    use GalleryJsonMedia\JsonMedia\Contracts\HasMedia;
        /** @var HasMedia $record */
        $record = $getRecord();
@endphp
<div class="flex gap-x-1 items-center max-w-max" x-data="{ open: false, currentSrc: '', currentAlt: '' }" @click.stop>
    @if(($record) and !$record->hasDocuments($getName()))
        @if(!$hasAvatars())
            {{ $record->getFirstMedia($getName())?->withImageProperties($getThumbWidth(),$getThumbHeight()) }}
        @else
            <div class="flex -space-x-3 p-2 overflow-hidden" style="max-height: {{ $getThumbHeight()+16 }}px">
                @foreach(collect($record->getMedias($getName()))->take($getMaxAvatars())->all() as $media)
                    @php
                        $thumbUrl = $media->getCropUrl($getThumbWidth(), $getThumbHeight());
                        $fullUrl = method_exists($media, 'getUrl') ? $media->getUrl() : $thumbUrl;
                    @endphp
                    <button
                        type="button"
                        data-preview-src="{{ e($fullUrl) }}"
                        data-preview-alt="{{ e($media->getCustomProperty('alt') ?? '') }}"
                        class="inline-block rounded-full ring-2 ring-white object-cover cursor-pointer hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-primary-500"
                        style="width: {{ $getThumbWidth() }}px; height: {{ $getThumbHeight() }}px;"
                        @click.stop="currentSrc = $event.currentTarget.dataset.previewSrc; currentAlt = $event.currentTarget.dataset.previewAlt; open = true"
                    >
                        <img class="inline-block rounded-full ring-2 ring-white object-cover w-full h-full pointer-events-none" src="{{ $thumbUrl }}"
                             alt="{{ $media->getCustomProperty('alt') }}" width="{{ $getThumbWidth() }}"
                             height="{{ $getThumbHeight() }}"
                             loading="lazy"
                        />
                    </button>
                @endforeach
            </div>
            @if(($nb = ($record->mediasCount($getName()) - collect($record->getMedias($getName()))->take($getMaxAvatars())->count())) > 0)
                <x-filament::badge color="info" size="xs">+ {{ $nb }}</x-filament::badge>
            @endif

            {{-- Preview modal: only in DOM when open, so never visible on load --}}
            <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 || '{{ __('panels.requests.preview_image') }}'"></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>
        @endif
    @endif
</div>