@php
    $formEditorId = 'enunciado_editor_root';
    $formInputId = 'enunciado_nombre_root';
@endphp

<div class="eva-cur-tree-form">
    <form
        method="POST"
        action="{{ $editEnunciado ? route('configuracion.enunciados.update', $editEnunciado) : route('configuracion.enunciados.store') }}"
        class="space-y-3"
    >
        @csrf
        @if($editEnunciado)
            @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">
                {{ $editEnunciado ? 'Editar enunciado' : 'Nuevo enunciado' }}
            </p>
            <a href="{{ route('configuracion.curso', $baseParams) }}" class="text-xs text-slate-500 hover:underline">Cancelar</a>
        </div>

        <div>
            <x-input-label value="Enunciado (editor enriquecido)" />
            <input type="hidden" name="nombre" id="{{ $formInputId }}" value="{{ old('nombre', $editEnunciado?->nombre) }}">
            <div id="{{ $formEditorId }}" class="mt-2 min-h-[140px] rounded-lg border border-slate-200 bg-white"></div>
            <x-input-error :messages="$errors->get('nombre')" class="mt-2" />
        </div>

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

@once
    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            if (window.initQuillEditor && document.querySelector('#enunciado_editor_root')) {
                window.initQuillEditor('#enunciado_editor_root', {
                    input: '#enunciado_nombre_root',
                    placeholder: 'Escribe el enunciado…',
                });
            }
        });
    </script>
    @endpush
@endonce