@extends('frontend.default.layouts.app')

@php
    $postCount = $posts->total();
@endphp

@section('meta_title', $category->title.' - '.getSetting('web_name', config('app.name')))
@section('meta_description', 'Arsip artikel kategori '.$category->title)

@section('breadcrumbs')
    <div class="breadcrumbs panel z-1 py-2 bg-gray-25 dark:bg-gray-100 dark:bg-opacity-5 dark:text-white">
        <div class="container max-w-xl">
            <ul class="breadcrumb nav-x justify-center gap-1 fs-7 sm:fs-6 m-0">
                <li><a href="{{ route('home') }}">Home</a></li>
                <li><i class="unicon-chevron-right opacity-50"></i></li>
                <li><span class="opacity-50">Category</span></li>
                <li><i class="unicon-chevron-right opacity-50"></i></li>
                <li><span class="opacity-50">{{ $category->title }}</span></li>
            </ul>
        </div>
    </div>
@endsection

@section('content')
    <div class="section py-3 sm:py-6 lg:py-9">
        <div class="section-outer panel">
            <div class="container max-w-xl">
                <div class="section-inner panel vstack gap-3 sm:gap-6 lg:gap-9">
                    <header class="page-header vstack justify-center items-center text-center max-w-500px mx-auto">
                        <h1 class="h4 lg:h1 m-0">{{ $category->title }}</h1>
                        <p class="fs-6 lg:fs-5 opacity-60 m-0">
                            Menampilkan {{ $postCount }} artikel dalam kategori {{ $category->title }}.
                        </p>
                    </header>
                    <div class="row g-4 xl:g-8">
                        <div class="col">
                            <div class="panel text-center">
                                <div class="row child-cols-12 sm:child-cols-6 lg:child-cols-4 xl:child-cols-3 col-match gy-4 xl:gy-6 gx-2 sm:gx-4">
                                    @forelse ($posts as $post)
                                        <div>
                                            @include('frontend.default.partials.post-card', ['post' => $post, 'variant' => 'grid4'])
                                        </div>
                                    @empty
                                        <div class="col-12">
                                            <div class="panel p-3 rounded border bg-white dark:bg-gray-900 dark:border-gray-700 text-start">Belum ada artikel dalam kategori ini.</div>
                                        </div>
                                    @endforelse
                                </div>
                                @include('frontend.default.partials.pagination', ['paginator' => $posts])
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection