@extends('layouts.dashboard')

@section('title', 'Gallery')

@section('content')
    <div class="flex items-center justify-between mb-6">
        <h1 class="font-display text-3xl">Gallery</h1>
        <a href="{{ route('dashboard.gallery-photos.create') }}" class="btn btn-dark">Add photo</a>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        @foreach ($photos as $photo)
            <div class="card p-3">
                <img src="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($photo->image_path) }}" alt="{{ $photo->caption }}" class="w-full h-28 object-cover rounded-card mb-2">
                <p class="text-sm truncate">{{ $photo->caption ?: '—' }}</p>
                <p class="text-xs text-muted">{{ $photo->active ? 'Active' : 'Inactive' }}</p>
                @if ($photo->is_placeholder)
                    <span class="placeholder-block !inline !p-1 !text-xs">placeholder</span>
                @endif
                <div class="mt-2 flex justify-between text-sm">
                    <a href="{{ route('dashboard.gallery-photos.edit', $photo) }}" class="underline">Edit</a>
                    <form method="POST" action="{{ route('dashboard.gallery-photos.destroy', $photo) }}" onsubmit="return confirm('Remove this photo?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="underline text-status-danger">Remove</button>
                    </form>
                </div>
            </div>
        @endforeach
    </div>
@endsection