@php
    /** @var \App\Models\Evidencia $evidencia */
    /** @var \App\Models\Enunciado $enunciado */
    $linkedIds = old('tema_ids', $evidencia->temas->pluck('id')->all());
@endphp

<div class="eva-cur-tree-form">
    <form
        method="POST"
        action="{{ route('configuracion.evidencias.temas.sync', $evidencia) }}"
        class="space-y-3"
    >
        @csrf
        @method('PUT')

        <div class="flex flex-wrap items-center justify-between gap-2">
            <p class="text-sm font-semibold text-slate-800">Vincular temas a esta evidencia</p>
            <a href="{{ route('configuracion.curso', array_merge($baseParams, ['expand_enunciado' => $enunciado->id, 'expand_evidencia' => $evidencia->id])) }}" class="text-xs text-slate-500 hover:underline">Cancelar</a>
        </div>

        @if($temas->isEmpty())
            <p class="text-sm text-amber-800 bg-amber-50 border border-amber-100 rounded-lg px-3 py-2">
                Primero crea temas en <strong>Temas generales</strong> y luego regresa aquí para vincularlos.
            </p>
        @else
            <fieldset class="space-y-2">
                <legend class="text-xs font-semibold uppercase tracking-wide text-slate-500">Selecciona uno o más temas</legend>
                @foreach($temas as $tema)
                    <label class="flex items-start gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 cursor-pointer hover:border-slate-300">
                        <input
                            type="checkbox"
                            name="tema_ids[]"
                            value="{{ $tema->id }}"
                            class="mt-0.5 rounded border-slate-300"
                            @checked(in_array($tema->id, $linkedIds, true))
                        >
                        <span class="min-w-0">
                            <span class="block text-sm font-medium text-slate-800">{{ $tema->nombre }}</span>
                            @if($tema->descripcion)
                                <span class="block text-xs text-slate-500 mt-0.5">{{ $tema->descripcion }}</span>
                            @endif
                        </span>
                    </label>
                @endforeach
            </fieldset>
            <x-input-error :messages="$errors->get('tema_ids')" class="mt-1" />
            <x-primary-button>Guardar vínculos</x-primary-button>
        @endif
    </form>
</div>