@extends('layouts.public')
@section('title', $category->name)
@section('content')
<section class="hero" style="padding: 4rem 0;">
    <div class="container text-center">
        <h1>{{ $category->name }}</h1>
        @if($category->description)<p class="lead">{{ $category->description }}</p>@endif
        <div class="text-muted small">{{ $blogs->total() }} {{ $blogs->total() === 1 ? 'blog' : 'blogs' }}</div>
    </div>
</section>
<div class="container py-5">
    <div class="row g-4">
        @forelse($blogs as $blog)
        <div class="col-md-6 col-lg-4">
            <article class="blog-card">
                <a href="{{ route('blogs.show', $blog->slug) }}"><img src="{{ $blog->featuredImageUrl() }}" class="blog-card-img"></a>
                <div class="blog-card-body">
                    @if($blog->category)<span class="blog-card-category">{{ $blog->category->name }}</span>@endif
                    <h3><a href="{{ route('blogs.show', $blog->slug) }}">{{ $blog->title }}</a></h3>
                    <div class="blog-card-meta"><span>{{ $blog->author->name }}</span><span>{{ $blog->published_at?->format('M d') }}</span></div>
                </div>
            </article>
        </div>
        @empty
        <div class="col-12 text-center text-muted py-5">No blogs in this category yet.</div>
        @endforelse
    </div>
    <div class="mt-4">{{ $blogs->links() }}</div>
</div>
@endsection