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

@section('meta_title', 'Tag: '.$tag->title.' - '.getSetting('web_name', config('app.name')))
@section('meta_description', 'Arsip artikel dengan tag '.$tag->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">Tag: {{ $tag->title }}</span></li>
            </ul>
        </div>
    </div>
@endsection

@section('content')
    <div class="section panel overflow-hidden">
        <div class="section-outer panel py-6 lg:py-9">
            <div class="container max-w-xl">
                <div class="section-inner panel vstack gap-4 lg:gap-6">
                    <header class="page-header vstack justify-center items-center gap-2 text-center max-w-650px mx-auto">
                        <h1 class="h3 md:h2 m-0">Tag: {{ $tag->title }}</h1>
                        <p class="fs-6 opacity-70 m-0">Artikel dengan tag {{ $tag->title }}.</p>
                    </header>
                    <div class="row child-cols-12 lg:child-cols g-4 xl:g-6">
                        <div class="col-12 lg:col-8">
                            <div class="row child-cols-12 sm:child-cols-2 gx-3 gy-4">
                                @forelse ($posts as $post)
                                    <div>
                                        @include('frontend.default.partials.post-card', ['post' => $post])
                                    </div>
                                @empty
                                    <div class="col-12">
                                        <div class="panel p-3 rounded border bg-white dark:bg-gray-900 dark:border-gray-700">Belum ada artikel dengan tag ini.</div>
                                    </div>
                                @endforelse
                            </div>
                            @include('frontend.default.partials.pagination', ['paginator' => $posts])
                        </div>
                        <div class="col-12 lg:col-4">
                            @include('frontend.default.partials.sidebar')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection