@extends('layouts.app')

@section('title', $category->name . ' - Blog')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ $category->name }}</h1>
        @if($category->description)
            <p class="text-gray-600">{{ $category->description }}</p>
        @endif
        <p class="text-sm text-gray-500 mt-2">{{ $posts->total() }} article(s) dans cette catégorie</p>
    </div>

    @if($posts->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            @foreach($posts as $post)
                <article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                    @if($post->featured_image)
                        <img src="{{ asset('storage/' . $post->featured_image) }}" alt="{{ $post->title }}" class="w-full h-48 object-cover">
                    @endif
                    <div class="p-6">
                        <h2 class="text-xl font-semibold mb-2">
                            <a href="{{ route('blog.show', $post) }}" class="text-gray-900 hover:text-red-600 transition-colors">
                                {{ $post->title }}
                            </a>
                        </h2>
                        <p class="text-gray-600 mb-4">{{ Str::limit($post->excerpt, 120) }}</p>
                        <div class="flex items-center justify-between text-sm text-gray-500">
                            <span>{{ $post->published_at->format('d/m/Y') }}</span>
                            <div class="flex flex-wrap gap-1">
                                @foreach($post->categories as $cat)
                                    <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs">
                                        {{ $cat->name }}
                                    </span>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </article>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="flex justify-center">
            {{ $posts->links() }}
        </div>
    @else
        <div class="text-center py-12">
            <p class="text-gray-500 text-lg">Aucun article trouvé dans cette catégorie.</p>
            <a href="{{ route('blog.index') }}" class="inline-block mt-4 bg-red-600 text-white px-6 py-2 rounded hover:bg-red-700 transition-colors">
                Retour au blog
            </a>
        </div>
    @endif

    <!-- Back to blog link -->
    <div class="mt-8 text-center">
        <a href="{{ route('blog.index') }}" class="text-red-600 hover:text-red-800 transition-colors">
            ← Retour au blog
        </a>
    </div>
</div>
@endsection