<x-filament-widgets::widget>
    <x-filament::section :collapsible="true">
        <x-slot name="heading">
            <div class="flex items-center gap-2">
                <x-filament::icon icon="heroicon-o-paper-clip" class="h-5 w-5 text-gray-400" />
                <span>Backfill Documents</span>
            </div>
        </x-slot>

        <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
            @foreach (array_filter($this->record->backfill_images ?? [], 'is_string') as $path)
                <a
                    href="{{ Storage::disk('public')->url($path) }}"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="group hover:border-primary-500 dark:hover:border-primary-500 block overflow-hidden rounded-lg border border-gray-200 transition-colors dark:border-gray-700"
                >
                    <img
                        src="{{ Storage::disk('public')->url($path) }}"
                        alt="Backfill document"
                        class="h-40 w-full object-cover transition-opacity group-hover:opacity-90"
                    />
                </a>
            @endforeach
        </div>
    </x-filament::section>
</x-filament-widgets::widget>
