@if ($record->exists && $images->isNotEmpty())
    <div class="mt-8 max-w-5xl">
        <div class="admin-card p-5 sm:p-6">
            <h2 class="mb-4 text-base">Gallery images ({{ $images->count() }})</h2>

            <div class="grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-6">
                @foreach ($images as $image)
                    <div class="group relative aspect-4/3 overflow-hidden rounded-lg border border-border bg-surface-muted">
                        <img src="{{ thumb_url($image->path) }}" alt="{{ $image->caption }}" class="size-full object-cover">

                        <form action="{{ route('admin.media-items.images.destroy', [$record, $image]) }}" method="POST"
                              class="absolute right-1.5 top-1.5" onsubmit="return confirm('Remove this image?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="rounded-full bg-white/90 p-1.5 text-error opacity-0 shadow transition group-hover:opacity-100"
                                    aria-label="Remove image">
                                <x-icon name="trash" class="size-3.5" />
                            </button>
                        </form>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endif