<div>
    @if ($podeGerenciar)
        <button type="button" wire:click="abrir" class="btn-secondary">
            <x-heroicon name="adjustments-horizontal" class="h-5 w-5" />
            Gerenciar subcategorias
        </button>
    @endif

    @if ($modalAberto)
        <div class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm">
            <div class="max-h-[92vh] w-full max-w-3xl overflow-y-auto rounded-lg border border-slate-200 bg-white p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <h2 class="text-xl font-bold text-slate-950 dark:text-white">Subcategorias de {{ $departamento->nome }}</h2>
                        <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Organize os agrupamentos de artigos deste departamento.</p>
                    </div>
                    <button type="button" wire:click="$set('modalAberto', false)" class="rounded-lg p-2 text-slate-500 transition hover:bg-slate-100 dark:hover:bg-slate-800">Fechar</button>
                </div>

                <form wire:submit.prevent="salvar" class="mt-6 rounded-lg border border-slate-200 p-4 dark:border-slate-800">
                    <div class="grid gap-3 md:grid-cols-[minmax(0,1fr)_160px_auto] md:items-end">
                        <div>
                            <label class="mb-2 block text-sm font-semibold text-slate-700 dark:text-slate-200">Nome</label>
                            <input wire:model.defer="nome" type="text" class="form-control" maxlength="120" placeholder="Ex: Emissao CT-e">
                            <x-input-error :messages="$errors->get('nome')" />
                        </div>

                        <label class="flex items-center gap-3 rounded-lg border border-slate-200 px-4 py-2.5 text-sm font-semibold text-slate-700 dark:border-slate-800 dark:text-slate-200">
                            <input wire:model.defer="ativo" type="checkbox" class="rounded border-slate-300 text-primary-600 focus:ring-primary-500">
                            Ativa
                        </label>

                        <div class="flex gap-2">
                            @if ($subcategoriaEditandoId)
                                <button type="button" wire:click="cancelarEdicao" class="btn-secondary px-3">Cancelar</button>
                            @endif
                            <button type="submit" class="btn-primary">{{ $subcategoriaEditandoId ? 'Salvar' : 'Criar' }}</button>
                        </div>
                    </div>
                </form>

                <div class="mt-5 space-y-2">
                    @forelse ($subcategorias as $subcategoria)
                        <div class="flex flex-col gap-3 rounded-lg border border-slate-200 p-3 dark:border-slate-800 sm:flex-row sm:items-center sm:justify-between">
                            <div class="min-w-0">
                                <div class="flex flex-wrap items-center gap-2">
                                    <h3 class="truncate text-sm font-bold text-slate-950 dark:text-white">{{ $subcategoria->nome }}</h3>
                                    <x-badge :variant="$subcategoria->ativo ? 'success' : 'warning'">{{ $subcategoria->ativo ? 'Ativa' : 'Inativa' }}</x-badge>
                                </div>
                                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ $subcategoria->artigos_count }} artigos vinculados</p>
                            </div>

                            <div class="flex flex-wrap gap-2">
                                <button type="button" wire:click="editar({{ $subcategoria->id }})" class="btn-secondary px-3 py-1.5">Editar</button>
                                <button type="button" wire:click="alternarAtivo({{ $subcategoria->id }})" class="btn-secondary px-3 py-1.5">{{ $subcategoria->ativo ? 'Inativar' : 'Ativar' }}</button>
                                <button type="button"
                                        x-data
                                        x-on:click="if (confirm('Excluir esta subcategoria? Os artigos vinculados ficarao sem subcategoria.')) { $wire.excluir({{ $subcategoria->id }}) }"
                                        class="inline-flex items-center justify-center rounded-lg border border-rose-300 bg-white px-3 py-1.5 text-sm font-semibold text-rose-700 transition hover:bg-rose-50 dark:border-rose-800 dark:bg-slate-950 dark:text-rose-300 dark:hover:bg-rose-950/30">
                                    Excluir
                                </button>
                            </div>
                        </div>
                    @empty
                        <div class="rounded-lg border border-dashed border-slate-300 p-6 text-center dark:border-slate-700">
                            <h3 class="text-sm font-bold text-slate-950 dark:text-white">Nenhuma subcategoria cadastrada</h3>
                            <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Crie a primeira subcategoria para liberar a listagem de artigos deste departamento.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    @endif
</div>
