@php
    $deletable = $deletable ?? false;
    $deleteRouteName = $deleteRouteName ?? null;
    $post = $post ?? null;
@endphp

@if ($images->isNotEmpty())
    <div class="mt-5 grid gap-3 {{ $images->count() === 1 ? 'grid-cols-1' : 'grid-cols-2 md:grid-cols-3' }}">
        @foreach ($images as $image)
            <div class="group relative overflow-hidden rounded-lg border border-blue-100 bg-blue-50 dark:border-blue-900/50 dark:bg-blue-950/30">
                <a href="{{ $image->imageUrl() }}" target="_blank" rel="noopener noreferrer" title="Open image larger">
                    <img src="{{ $image->imageUrl() }}" alt="{{ $image->original_name ?: 'Community post image' }}" class="aspect-video w-full object-cover transition duration-300 group-hover:scale-105">
                </a>

                @if ($deletable && $deleteRouteName && $post)
                    <form method="POST" action="{{ route($deleteRouteName, [$post, $image]) }}" class="absolute right-2 top-2" onsubmit="return confirm('Delete this image?');">
                        @csrf
                        @method('DELETE')
                        <button class="rounded-full bg-red-600 px-3 py-1 text-xs font-black text-white shadow-lg hover:bg-red-700">
                            Delete
                        </button>
                    </form>
                @endif
            </div>
        @endforeach
    </div>
@endif