@extends('layouts.blog')

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

@section('content')
    <div class="mb-8">
        <h1 class="text-3xl font-bold mb-2">Category: {{ $category->name }}</h1>
        @if($category->description)
            <p class="text-gray-600">{{ $category->description }}</p>
        @endif
    </div>
    
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        @forelse ($posts as $post)
            <article class="bg-white rounded-lg shadow-sm overflow-hidden">
                @if($post->banner_url)
                    <a href="{{ route('blog.show', $post) }}">
                        <img src="{{ $post->banner_url }}" alt="{{ $post->title }}" class="w-full h-48 object-cover">
                    </a>
                @endif
                <div class="p-6">
                    <div class="mb-3">
                        <time datetime="{{ $post->published_at }}" class="text-gray-500 text-sm">
                            {{ $post->published_at->format('M d, Y') }}
                        </time>
                    </div>
                    <h2 class="text-xl font-bold mb-3">
                        <a href="{{ route('blog.show', $post) }}" class="hover:text-indigo-600">
                            {{ $post->title }}
                        </a>
                    </h2>
                    <p class="text-gray-600 mb-4">{{ $post->excerpt }}</p>
                    <div class="flex items-center">
                        <img src="{{ $post->author->photo }}" alt="{{ $post->author->name }}" class="w-8 h-8 rounded-full mr-3">
                        <a href="{{ route('blog.author', $post->author) }}" class="text-sm font-medium hover:text-indigo-600">
                            {{ $post->author->name }}
                        </a>
                    </div>
                </div>
            </article>
        @empty
            <p class="text-gray-600">No posts found in this category.</p>
        @endforelse
    </div>
    
    {{ $posts->links() }}
@endsection