@extends('layouts.admin')
@section('title', $meta['title'].' — Panduan')
@section('page-title', 'Panduan')

@section('content')
<div class="lg:grid lg:grid-cols-[16rem_1fr] lg:gap-8">
    {{-- ToC --}}
    <aside class="mb-6 lg:mb-0">
        <div class="lg:sticky lg:top-20">
            @include('admin.guide._toc', ['groups' => $groups, 'current' => $slug])
        </div>
    </aside>

    {{-- Konten topik --}}
    <div class="max-w-3xl">
        <div class="mb-6 flex items-center gap-3 border-b border-outline/60 pb-5">
            <span class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-primary/10 text-primary">
                <x-icon :name="$meta['icon']" class="w-6 h-6"/>
            </span>
            <div>
                <p class="text-[11px] font-bold uppercase tracking-wider text-muted">{{ $meta['group'] }}</p>
                <h2 class="text-2xl font-extrabold tracking-tight">{{ $meta['title'] }}</h2>
            </div>
        </div>

        <article class="guide-prose">
            @include("admin.guide.topics.$slug")
        </article>

        {{-- Prev / Next --}}
        <div class="mt-10 grid gap-3 border-t border-outline/60 pt-6 sm:grid-cols-2">
            @if($prev)
            <a href="{{ route('admin.guide.show', $prev['slug']) }}" class="card flex items-center gap-3 p-4 hover:border-primary/40">
                <x-icon name="arrow-left" class="w-5 h-5 shrink-0 text-muted"/>
                <span class="min-w-0"><span class="block text-xs text-muted">Sebelumnya</span>
                    <span class="block truncate font-semibold">{{ $prev['title'] }}</span></span>
            </a>
            @else<span></span>@endif
            @if($next)
            <a href="{{ route('admin.guide.show', $next['slug']) }}" class="card flex items-center justify-end gap-3 p-4 text-right hover:border-primary/40">
                <span class="min-w-0"><span class="block text-xs text-muted">Selanjutnya</span>
                    <span class="block truncate font-semibold">{{ $next['title'] }}</span></span>
                <x-icon name="arrow-right" class="w-5 h-5 shrink-0 text-muted"/>
            </a>
            @endif
        </div>
    </div>
</div>
@endsection