@extends('layouts.public')
@section('title', 'All Blogs')
@section('content')

<section class="hero" style="padding: 4rem 0;">
    <div class="container text-center">
        <h1>All Blogs</h1>
        <form action="{{ route('blogs.index') }}" method="GET" class="hero-search mx-auto">
            <div class="input-group">
                <input type="text" name="q" class="form-control" placeholder="Search blogs…" value="{{ $search ?? '' }}">
                <button class="btn">Search</button>
            </div>
        </form>
    </div>
</section>

<div class="container py-5">
    <div class="row">
        <div class="col-lg-9">
            @if(!empty($search))<p class="text-muted">Showing results for "<strong>{{ $search }}</strong>" — {{ $blogs->total() }} found.</p>@endif
            <div class="row g-4">
                @forelse($blogs as $blog)
                <div class="col-md-6">
                    <article class="blog-card">
                        <a href="{{ route('blogs.show', $blog->slug) }}"><img src="{{ $blog->featuredImageUrl() }}" class="blog-card-img" alt=""></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>
                            <p class="text-muted">{{ \Illuminate\Support\Str::limit($blog->excerpt ?? strip_tags($blog->content), 130) }}</p>
                            <div class="blog-card-meta">
                                <span>{{ $blog->author->name }}</span>
                                <span>{{ $blog->published_at?->format('M d, Y') }}</span>
                            </div>
                        </div>
                    </article>
                </div>
                @empty
                <div class="col-12 text-center text-muted py-5">No blogs found{{ !empty($search) ? ' for that query' : '' }}.</div>
                @endforelse
            </div>
            <div class="mt-4">{{ $blogs->links() }}</div>
        </div>
        <div class="col-lg-3">
            <div class="content-card">
                <h5 class="text-uppercase small">Categories</h5>
                <ul class="list-unstyled small">
                    @foreach($categories as $cat)
                        <li><a href="{{ route('blogs.category', $cat->slug) }}" class="d-block py-1">› {{ $cat->name }}</a></li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</div>

@endsection