@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="flex justify-between items-center mb-8">
        <h1 class="text-3xl font-bold text-pink-700 logo-text">Your Love Stories</h1>
        <a href="{{ route('love-story.create') }}" class="btn-romantic px-6 py-2 rounded-lg">
            <i class="fas fa-plus mr-2"></i> Create New
        </a>
    </div>
    
    @if($books && count($books) > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($books as $book)
                <div class="bg-white rounded-lg shadow-md overflow-hidden transform transition hover:-translate-y-1 hover:shadow-lg">
                    <div class="h-48 overflow-hidden">
                        @if($book->cover_image)
                            <img src="{{ asset('storage/' . $book->cover_image) }}" alt="{{ $book->title }}" class="w-full h-full object-cover">
                        @else
                            <div class="bg-pink-100 h-full flex items-center justify-center">
                                <i class="fas fa-book-open text-5xl text-pink-500"></i>
                            </div>
                        @endif
                    </div>
                    <div class="p-6">
                        <h2 class="text-xl font-bold text-pink-700 mb-2">{{ $book->title }}</h2>
                        <p class="text-gray-600 mb-4">By {{ $book->partner1_name }} & {{ $book->partner2_name }}</p>
                        
                        <div class="flex space-x-2">
                            <a href="{{ route('love-story.show', $book->id) }}" class="text-pink-600 hover:text-pink-800 px-3 py-1">
                                <i class="fas fa-eye mr-1"></i> View
                            </a>
                            <a href="{{ route('love-story.edit', $book->id) }}" class="text-pink-600 hover:text-pink-800 px-3 py-1">
                                <i class="fas fa-edit mr-1"></i> Edit
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="text-center py-12 bg-white rounded-lg shadow-md">
            <i class="fas fa-book-open text-5xl text-pink-400 mb-4"></i>
            <h2 class="text-xl font-bold text-pink-700 mb-2">No love stories yet</h2>
            <p class="text-gray-600 mb-4">Create your first love story book to capture your journey together</p>
            <a href="{{ route('love-story.create') }}" class="btn-romantic inline-block px-6 py-2">
                <i class="fas fa-plus mr-2"></i> Create Your First Story
            </a>
        </div>
    @endif
</div>
@endsection