@extends('layouts.app')

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

@section('content')
<div class="container">
    <div class="row">
        <div class="col-12">
            <h1 class="mb-4">{{ $category->name }}</h1>
            @if($category->description)
            <p class="lead">{{ $category->description }}</p>
            @endif
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-8">
            @if($posts->count() > 0)
                @foreach($posts as $post)
                <article class="mb-4">
                    <div class="card">
                        <div class="card-body">
                            <h3 class="card-title">{{ $post->title }}</h3>
                            <p class="card-text">{{ $post->excerpt ?? Str::limit($post->content, 200) }}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <a href="{{ url('/post/' . $post->slug) }}" class="btn btn-outline-primary">Read More</a>
                                <small class="text-muted">{{ $post->published_at->diffForHumans() }}</small>
                            </div>
                        </div>
                    </div>
                </article>
                @endforeach
                
                {{ $posts->links() }}
            @else
                <div class="alert alert-info">
                    <h4>No posts found</h4>
                    <p>There are no posts in this category yet.</p>
                </div>
            @endif
        </div>
        
        <!-- Sidebar -->
        <div class="col-md-4">
            <!-- Other Categories -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5>Other Categories</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        @foreach($otherCategories as $otherCategory)
                        <li class="mb-2">
                            <a href="{{ url('/category/' . $otherCategory->slug) }}" class="text-decoration-none">
                                {{ $otherCategory->name }}
                            </a>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            
            <!-- Popular Posts -->
            <div class="card">
                <div class="card-header">
                    <h5>Popular Posts</h5>
                </div>
                <div class="card-body">
                    @foreach($popularPosts as $popularPost)
                    <div class="mb-3">
                        <h6 class="mb-1">
                            <a href="{{ url('/post/' . $popularPost->slug) }}" class="text-decoration-none">
                                {{ $popularPost->title }}
                            </a>
                        </h6>
                        <small class="text-muted">{{ $popularPost->published_at->diffForHumans() }}</small>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection