@php
    $nombreInputId = 'tema_nombre_'.$formSuffix;
@endphp

<div class="eva-cur-tree-form">
    <form
        method="POST"
        action="{{ $editTema ? route('configuracion.temas.update', $editTema) : route('configuracion.temas.store') }}"
        class="space-y-3"
    >
        @csrf
        @if($editTema)
            @method('PUT')
        @endif
        <input type="hidden" name="grado_id" value="{{ $grado->id }}">
        <input type="hidden" name="curso_id" value="{{ $curso->id }}">

        <div class="flex flex-wrap items-center justify-between gap-2">
            <p class="text-sm font-semibold text-slate-800">
                {{ $editTema ? 'Editar tema' : 'Nuevo tema' }}
            </p>
            <a href="{{ route('configuracion.curso', $baseParams) }}" class="text-xs text-slate-500 hover:underline">Cancelar</a>
        </div>

        <p class="text-xs text-slate-600 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2">
            Los temas se crean aquí en el catálogo general. Después vincúlalos a cada evidencia con «Vincular temas».
        </p>

        <div>
            <x-input-label :for="$nombreInputId" value="Nombre del tema" />
            <x-text-input
                :id="$nombreInputId"
                name="nombre"
                class="mt-1 w-full"
                :value="old('nombre', $editTema?->nombre)"
                required
            />
            <x-input-error :messages="$errors->get('nombre')" class="mt-1" />
        </div>

        <div>
            <x-input-label for="tema_descripcion_{{ $formSuffix }}" value="Descripción (opcional)" />
            <textarea
                id="tema_descripcion_{{ $formSuffix }}"
                name="descripcion"
                rows="2"
                class="mt-1 w-full rounded-md border-slate-300"
            >{{ old('descripcion', $editTema?->descripcion) }}</textarea>
        </div>

        <x-primary-button>{{ $editTema ? 'Guardar cambios' : 'Crear tema' }}</x-primary-button>
    </form>
</div>