@extends('theme::layouts.app')

@section('title', $title)

@section('content')
    <main class="flex-grow w-full">
        @include('theme::partials.breadcrumbs')

        <div class="max-w-[1440px] mx-auto px-6 lg:px-10 py-10">
            <div class="mb-10">
                <div
                    class="flex flex-col md:flex-row md:items-end justify-between gap-2 pb-2 border-b border-border-light dark:border-border-dark">
                <div>
                    <h1 class="text-3xl font-bold text-text-main dark:text-white mb-2">{{ $category->name }}</h1>
                    @if($category->description)
                        <p class="text-text-muted dark:text-gray-400 mb-8 max-w-2xl">{{ $category->description }}</p>
                    @endif
                </div>
            </div>
        </div>
        <div class="flex flex-col lg:flex-row gap-12">
            <div class="flex-grow lg:w-2/3">
                @include('theme::partials.blog.posts-loop')
            </div>
            <aside class="lg:w-1/3 space-y-10">
                @include('theme::partials.blog.widgets.search')
                @include('theme::partials.blog.widgets.categories')
                @include('theme::partials.blog.widgets.popular-posts')
                @include('theme::partials.blog.widgets.newsletter')
            </aside>
        </div>
    </div>
    </main>
@endsection