<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-primary-600 dark:text-primary-300">Portal</p>
                <h1 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">Módulos corporativos</h1>
                <p class="mt-2 max-w-3xl text-sm leading-6 text-slate-600 dark:text-slate-400">Acesse as áreas do Aquila-System. Nesta fase, a Wiki Corporativa já está funcional e os demais módulos ficam preparados para evolução.</p>
            </div>

            <div class="flex items-center gap-3 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-300">
                <x-user-avatar :user="auth()->user()" size="sm" />
                <span>
                    <span class="font-semibold text-slate-950 dark:text-white">{{ auth()->user()->name }}</span>
                    <span class="mx-2 text-slate-300 dark:text-slate-700">/</span>
                    {{ auth()->user()->departamento->nome ?? 'Sem departamento' }}
                </span>
            </div>
        </div>
    </x-slot>

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
        @forelse ($modulos as $modulo)
            <x-module-card :modulo="$modulo" />
        @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">
                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-lg bg-accent-50 text-accent-700 dark:bg-slate-800 dark:text-accent-300">
                    <x-heroicon name="lock-closed" class="h-7 w-7" />
                </div>
                <h2 class="mt-5 text-lg font-bold text-slate-950 dark:text-white">Nenhum modulo liberado</h2>
                <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Solicite ao Administrador Master a liberacao dos modulos necessarios para o seu perfil.</p>
            </div>
        @endforelse
    </div>
</x-app-layout>
