@props(['departamentos', 'podeGerenciarDepartamentos' => false])

<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
    @forelse ($departamentos as $departamento)
        <a href="{{ route('wiki.departamento', $departamento->slug) }}" class="group rounded-lg border border-slate-200 bg-white p-4 shadow-soft transition hover:-translate-y-0.5 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-3">
                <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-accent-100 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="$departamento->icone ?: 'building-office-2'" class="h-6 w-6" />
                </span>

                <span class="rounded-full border border-slate-200 px-2 py-0.5 text-[0.7rem] font-bold text-slate-500 dark:border-slate-800 dark:text-slate-400">
                    {{ $departamento->subcategorias_count }} subcategorias
                </span>
            </div>

            <h2 class="mt-3 text-base font-bold text-slate-950 group-hover:text-primary-700 dark:text-white dark:group-hover:text-primary-300">{{ $departamento->nome }}</h2>
            <p class="mt-1.5 line-clamp-2 text-xs leading-5 text-slate-600 dark:text-slate-400">{{ $departamento->descricao ?: 'Departamento sem descricao.' }}</p>

            <div class="mt-4 flex items-center justify-between border-t border-slate-200 pt-3 text-xs font-semibold text-slate-500 dark:border-slate-800 dark:text-slate-400">
                <span>{{ $departamento->artigos_count }} artigos</span>
                <span class="inline-flex items-center gap-1 text-accent-700 dark:text-accent-300">
                    Abrir
                    <x-heroicon name="arrow-right" class="h-4 w-4" />
                </span>
            </div>
        </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">Nenhum departamento ativo</h2>
            <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Cadastre departamentos na propria Wiki para alimentar esta tela.</p>

            @if ($podeGerenciarDepartamentos)
                <a href="{{ route('wiki.departamentos') }}" class="btn-primary mt-5">
                    <x-heroicon name="building-office-2" class="h-5 w-5" />
                    Gerenciar departamentos
                </a>
            @endif
        </div>
    @endforelse
</div>