@extends('layouts.admin', ['title' => 'Gallery'])

@section('content')
    <div class="rounded-2xl border border-white/10 bg-white/5 p-8">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <div class="text-xl font-semibold">Gallery</div>
                <div class="mt-1 text-sm text-white/60">Upload images and add captions for workshops and projects.</div>
            </div>
            <a href="{{ route('admin.gallery.create') }}" class="rounded-xl bg-white px-5 py-3 text-sm font-semibold text-slate-900 transition hover:bg-white/90">
                Add Image
            </a>
        </div>

        <div class="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            @foreach($items as $item)
                <div class="overflow-hidden rounded-2xl border border-white/10 bg-slate-950/30">
                    <div class="aspect-[4/3] bg-slate-950/40">
                        @php($src = $item->image_path ? public_path('storage/'.$item->image_path) : null)
                        @if($src && file_exists($src))
                            <img class="h-full w-full object-cover" src="{{ asset('storage/'.$item->image_path) }}" alt="{{ $item->title ?: 'Gallery image' }}" loading="lazy">
                        @else
                            <div class="flex h-full w-full items-center justify-center bg-gradient-to-br from-emerald-500/20 via-cyan-500/10 to-fuchsia-500/20">
                                <div class="rounded-full border border-white/10 bg-slate-950/40 px-4 py-2 text-xs text-white/70">Missing image</div>
                            </div>
                        @endif
                    </div>
                    <div class="p-4">
                        <div class="flex items-center justify-between gap-3">
                            <div class="text-sm font-semibold">{{ $item->title ?: 'Untitled' }}</div>
                            <a href="{{ route('admin.gallery.edit', $item) }}" class="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs font-semibold hover:bg-white/10">Edit</a>
                        </div>
                        @if($item->caption)
                            <div class="mt-1 text-xs text-white/60">{{ $item->caption }}</div>
                        @endif
                        <div class="mt-3 text-xs text-white/50">Order: {{ $item->sort_order }} · {{ $item->is_published ? 'Published' : 'Hidden' }}</div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection