@extends('layouts.nova')

@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
            <div class="overflow-x-auto bg-panel rounded">
                <table class="min-w-full text-sm">
                    <thead>
                        <tr class="border-b border-panel">
                            <th class="p-2 text-left">Thumb</th>
                            <th class="p-2 text-left">Name</th>
                            <th class="p-2 text-left">Author</th>
                            <th class="p-2 text-left">Published</th>
                            <th class="p-2 text-left">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($artworks as $art)
                            <tr class="border-b border-panel">
                                <td class="p-2 w-24">
                                    <a href="/art/{{ $art->id }}/{{ Illuminate\Support\Str::slug($art->title ?? 'art') }}">
                                        <img src="{{ $art->thumb ?? '/gfx/sb_join.jpg' }}" alt="{{ $art->title }}" class="w-20 h-12 object-cover rounded" />
                                    </a>
                                </td>
                                <td class="p-2">
                                    <a href="/art/{{ $art->id }}/{{ Illuminate\Support\Str::slug($art->title ?? 'art') }}" class="font-medium">{{ $art->title }}</a>
                                </td>
                                <td class="p-2">{{ $art->author }}</td>
                                <td class="p-2">{{ optional($art->published_at)->format('Y-m-d') }}</td>
                                <td class="p-2">
                                    <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="text-sm text-red-500 hover:underline">Remove</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-6">{{ $artworks->links() }}</div>
        @endif
    </div>
@endsection