@if($puedeGestionar && !empty($gradebook['categorias']))
    @php
        $flatCategories = [];
        $flattenCategories = function (array $nodes, int $depth = 0) use (&$flattenCategories, &$flatCategories) {
            foreach ($nodes as $node) {
                $flatCategories[] = ['id' => $node['id'], 'nombre' => $node['nombre'], 'depth' => $depth, 'es_raiz' => $node['es_raiz']];
                if (! empty($node['children'])) {
                    $flattenCategories($node['children'], $depth + 1);
                }
            }
        };
        $flattenCategories($gradebook['categorias']);
    @endphp

    <div x-data="{ nuevaCat: false }">
        <div class="eva-section-head mb-2">
            <div>
                <h3 class="text-sm">Categorías e ítems</h3>
                <p class="text-xs text-slate-500 m-0">Estructura de calificación del curso</p>
            </div>
            <button type="button" @click="nuevaCat = !nuevaCat"
                    class="mdl-btn text-xs py-1 px-2.5"
                    :class="nuevaCat ? 'bg-slate-100' : ''">
                <span x-text="nuevaCat ? 'Cancelar' : '+ Categoría'"></span>
            </button>
        </div>

        <div class="space-y-1.5">
            @include('aula.partials.calificaciones-config-nodo', [
                'nodos' => $gradebook['categorias'],
                'flatCategories' => $flatCategories,
                'curso' => $curso,
                'escalaMaxima' => $escalaMaxima ?? null,
            ])
        </div>

        @php $rootId = $gradebook['categorias'][0]['id'] ?? null; @endphp
        @if($rootId)
            <div x-show="nuevaCat" x-cloak x-transition.opacity
                 class="mt-2 p-3 rounded-lg border border-dashed border-slate-300 bg-slate-50/60">
                <form method="post" action="{{ route('aula.grade-categories.store', $curso) }}" class="flex flex-wrap items-end gap-2">
                    @csrf
                    <input type="hidden" name="parent_id" value="{{ $rootId }}">
                    <div class="flex-1 min-w-[10rem]">
                        <label class="block text-[10px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Nombre</label>
                        <input type="text" name="nombre" required maxlength="255" placeholder="Ej. Tareas, Exámenes…"
                               class="w-full eva-input text-xs py-1.5">
                    </div>
                    <div>
                        <label class="block text-[10px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Peso %</label>
                        <input type="number" name="ponderacion" step="0.01" min="0" placeholder="Opcional"
                               class="w-20 eva-input text-xs py-1.5">
                    </div>
                    <div>
                        <label class="block text-[10px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Agregación</label>
                        <select name="agregacion" class="eva-input text-xs py-1.5">
                            <option value="promedio_ponderado">Ponderado</option>
                            <option value="promedio">Simple</option>
                        </select>
                    </div>
                    <button type="submit" class="mdl-btn mdl-btn-primary text-xs py-1.5">Crear</button>
                </form>
            </div>
        @endif
    </div>
@endif