@extends('layouts.app')

@section('content')
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-3xl font-bold text-indigo-700">My Readlist</h1>
    </div>

    @if (session('success'))
        <div class="bg-green-50 text-green-800 border border-green-200 rounded-md px-4 py-2 mb-4">
            {{ session('success') }}
        </div>
    @endif

    @if($books->count() === 0)
        <div class="bg-white rounded-lg shadow p-6 text-center text-gray-600">
            Your readlist is empty. Browse <a class="text-indigo-600 hover:underline" href="{{ route('books.index') }}">all books</a> to add some.
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($books as $book)
                <div class="bg-white rounded-lg shadow overflow-hidden">
                    @if($book->cover_image)
                        <img src="{{ $book->cover_image }}" alt="{{ $book->title }} cover" class="w-full h-48 object-cover" />
                    @else
                        <div class="w-full h-48 bg-gray-200 flex items-center justify-center text-gray-500">No Cover</div>
                    @endif
                    <div class="p-4">
                        <h2 class="text-lg font-semibold"><a href="{{ route('books.show', $book) }}" class="hover:underline">{{ $book->title }}</a></h2>
                        <p class="text-sm text-gray-600">
                            @if($book->authors && $book->authors->count())
                                {{ $book->authors->pluck('name')->join(', ') }}
                            @elseif($book->author)
                                {{ $book->author }}
                            @endif
                        </p>
                        <form action="{{ route('readlist.destroy', $book) }}" method="POST" class="mt-4">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="px-3 py-2 text-sm bg-red-50 text-red-700 hover:bg-red-100 rounded-md">Remove</button>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="mt-6">
            {{ $books->links() }}
        </div>
    @endif
@endsection