@props(['departamento', 'subcategorias'])

<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
    @forelse ($subcategorias as $subcategoria)
        <a href="{{ route('wiki.subcategoria', [$departamento->slug, $subcategoria->slug]) }}" class="group rounded-lg border border-slate-200 bg-white p-5 shadow-soft transition hover:-translate-y-1 hover:border-primary-300 hover:shadow-lg dark:border-slate-800 dark:bg-slate-900 dark:hover:border-primary-700">
            <div class="flex items-start justify-between gap-4">
                <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-accent-50 text-accent-700 transition group-hover:bg-accent-500 group-hover:text-slate-950 dark:bg-slate-800 dark:text-accent-300">
                    <x-heroicon name="folder-open" class="h-7 w-7" />
                </span>

                <span class="rounded-full border border-slate-200 px-2.5 py-1 text-xs font-bold text-slate-500 dark:border-slate-800 dark:text-slate-400">
                    {{ $subcategoria->artigos_count }} artigos
                </span>
            </div>

            <h2 class="mt-5 text-lg font-bold text-slate-950 group-hover:text-primary-700 dark:text-white dark:group-hover:text-primary-300">{{ $subcategoria->nome }}</h2>
            <p class="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-400">Abrir artigos de {{ $departamento->nome }} nesta subcategoria.</p>
        </a>
    @empty
        <div class="col-span-full rounded-lg border border-dashed border-slate-300 bg-white p-10 text-center dark:border-slate-700 dark:bg-slate-900">
            <h2 class="text-lg font-bold text-slate-950 dark:text-white">Nenhuma subcategoria cadastrada</h2>
            <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Este departamento ainda nao possui subcategorias ativas.</p>
        </div>
    @endforelse
</div>