@extends('layouts.nova')

@php($gridV2 = request()->query('grid') === 'v2')

@section('content')
    <div class="container mx-auto py-8">
        <h1 class="text-2xl font-semibold mb-4">Favourites</h1>

        <div class="mb-4 flex items-center justify-between">
            <div class="text-sm text-muted">Showing your favourites</div>
            <div>
                <form method="GET" class="inline">
                    <label class="text-sm mr-2">Sort</label>
                    <select name="sort" onchange="this.form.submit()" class="rounded bg-panel px-2 py-1 text-sm">
                        <option value="newest" {{ ($sort ?? 'newest') === 'newest' ? 'selected' : '' }}>Newest first</option>
                        <option value="oldest" {{ ($sort ?? '') === 'oldest' ? 'selected' : '' }}>Oldest first</option>
                    </select>
                </form>
            </div>
        </div>

        @if($artworks->isEmpty())
            <p class="text-sm text-gray-500">You have no favourites yet.</p>
        @else
            <section data-nova-gallery data-gallery-type="dashboard-favorites">
                <div class="{{ $gridV2 ? 'gallery' : 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6' }}" data-gallery-grid>
                    @foreach($artworks as $art)
                        <div class="relative gallery-item">
                            <x-artwork-card :art="$art" />
                            <div class="absolute right-2 top-2 z-40">
                                <form method="POST" action="{{ route('dashboard.favorites.destroy', ['artwork' => $art->id]) }}" onsubmit="return confirm('Really remove from favourites?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="rounded-md border border-white/15 bg-black/60 px-2 py-1 text-xs text-red-300 hover:text-red-200">Remove</button>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mt-6" data-gallery-pagination>{{ $artworks->links() }}</div>
                <div class="hidden" data-gallery-skeleton-template aria-hidden="true">
                    <x-skeleton.artwork-card />
                </div>
                <div class="hidden mt-8" data-gallery-skeleton></div>
            </section>
        @endif
    </div>
@endsection