@if ($record->exists)
    <div class="mt-8 max-w-5xl space-y-5">

        <div class="admin-card p-5 sm:p-6">
            <h2 class="mb-1 text-base">Add photos & video</h2>
            <p class="mb-5 text-sm text-text-muted">Uploads are added to this album immediately.</p>

            <form action="{{ route('admin.albums.items.store', $record) }}" method="POST" enctype="multipart/form-data"
                  class="grid gap-5 sm:grid-cols-2">
                @csrf

                <x-form.file name="photos[]" label="Photos" :preview="false" accept="image/*" multiple
                             hint="Select several files at once." class="sm:col-span-2" />

                <x-form.input name="video_url" type="url" label="Video link" placeholder="https://youtube.com/watch?v=…" />
                <x-form.file name="video_file" label="Or upload a video" :preview="false" accept="video/mp4,video/webm" />

                <x-form.input name="caption" label="Caption applied to these items" class="sm:col-span-2" />

                <div class="sm:col-span-2">
                    <button type="submit" class="btn-primary">Add to album</button>
                </div>
            </form>
        </div>

        <div class="admin-card p-5 sm:p-6">
            <h2 class="mb-4 text-base">Album contents ({{ $items->count() }})</h2>

            @if ($items->isEmpty())
                <p class="text-sm text-text-muted">This album is empty.</p>
            @else
                <div class="grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-6">
                    @foreach ($items as $item)
                        <div class="group relative aspect-4/3 overflow-hidden rounded-lg border border-border bg-surface-muted">
                            @if ($item->isVideo())
                                <div class="flex size-full flex-col items-center justify-center gap-1 bg-dark p-2 text-white">
                                    <x-icon name="play" class="size-6" />
                                    <span class="truncate text-[10px]">{{ $item->type === 'video_embed' ? 'Embed' : 'Upload' }}</span>
                                </div>
                            @else
                                <img src="{{ thumb_url($item->path) }}" alt="{{ $item->caption }}" class="size-full object-cover">
                            @endif

                            <form action="{{ route('admin.albums.items.destroy', [$record, $item]) }}" method="POST"
                                  class="absolute right-1.5 top-1.5" onsubmit="return confirm('Remove this item?')">
                                @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 item">
                                    <x-icon name="trash" class="size-3.5" />
                                </button>
                            </form>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
@endif