{{--
    Barra de componentes Bootstrap para el editor de contenido enriquecido.

    Criterio de PRODSECU-193: el autor maqueta con componentes Bootstrap por clase.
    Bootstrap ya viene cargado en el Moodle del cliente, así que no viaja CSS desde
    el Manager y el contenido hereda el tema del cliente.

    Los fragmentos de abajo usan SOLO clases admitidas por
    `App\Services\Features\HtmlSanitizer` y que se comportan igual en Bootstrap 4
    (Moodle 4.x) y Bootstrap 5 (Moodle 5.x). Si se añade un componente aquí, hay que
    añadir sus clases también al saneador o se perderán al guardar.

    Parámetro requerido:
      $editor — nombre de la variable JS del editor Jodit (p. ej. 'joditEditorCreate')
--}}
<div class="mb-2 rounded-lg border border-gray-200 bg-gray-50 p-3">
    <div class="flex items-start justify-between gap-3">
        <p class="text-sm text-gray-600">
            <span class="font-medium text-gray-800">Puedes maquetar con componentes Bootstrap.</span>
            Se conservan las clases de Bootstrap (avisos, tarjetas, columnas, tablas, etiquetas, botones).
            <span class="text-gray-500">
                Los estilos en línea, los bloques <code>&lt;style&gt;</code> y las clases propias
                se eliminan al guardar: el diseño lo pone el tema del Moodle del cliente.
                Imágenes en PNG, JPG o WebP — <strong class="font-medium">el SVG no se admite por
                seguridad</strong>, porque puede contener código ejecutable.
            </span>
        </p>
    </div>

    <div class="mt-2 flex flex-wrap gap-2">
        @php
            // Todos comprobados de punta a punta el 2026-08-27: sobreviven al
            // saneador del Manager Y al purificador de Moodle.
            //
            // Quedan fuera a propósito: acordeón, pestañas, collapse, carousel y
            // modal, porque necesitan atributos `data-bs-*` que el purificador de
            // Moodle elimina (se lleva incluso el <button> entero). Tampoco
            // <figure>/<figcaption> ni <details>/<summary>: son HTML5 y Moodle usa
            // doctype XHTML 1.0 Transitional, así que los borra.
            $componentes = [
                'Aviso' => '<div class="alert alert-info">Texto del aviso.</div>',
                'Aviso con título' => '<div class="alert alert-warning"><h5 class="alert-heading">Título del aviso</h5><p class="mb-0">Texto del aviso.</p></div>',
                'Tarjeta' => '<div class="card mb-3"><div class="card-body"><h5 class="card-title">Título</h5><p class="card-text">Contenido de la tarjeta.</p></div></div>',
                'Tarjeta con cabecera' => '<div class="card mb-3"><div class="card-header">Cabecera</div><div class="card-body"><p class="card-text mb-0">Contenido.</p></div><div class="card-footer text-muted">Pie</div></div>',
                // El borde va en un div interior, no en la propia columna: la columna
                // lleva el canalón de Bootstrap como padding, así que un borde ahí
                // queda pegado al contenido de la de al lado.
                'Dos columnas' => '<div class="row mb-3"><div class="col-md-6"><div class="border rounded p-3">Columna izquierda</div></div><div class="col-md-6"><div class="border rounded p-3">Columna derecha</div></div></div>',
                'Tres columnas' => '<div class="row mb-3"><div class="col-md-4"><div class="border rounded p-3">Primera</div></div><div class="col-md-4"><div class="border rounded p-3">Segunda</div></div><div class="col-md-4"><div class="border rounded p-3">Tercera</div></div></div>',
                'Tabla' => '<table class="table table-striped"><thead><tr><th>Campo</th><th>Descripción</th></tr></thead><tbody><tr><td>—</td><td>—</td></tr></tbody></table>',
                'Definiciones' => '<dl class="mb-3"><dt>Término</dt><dd>Qué significa o para qué sirve.</dd><dt>Otro término</dt><dd>Su explicación.</dd></dl>',
                // El `text-white` es imprescindible para Bootstrap 4 (Moodle 4.x):
                // allí `.badge` NO fija color de texto —lo hacía `.badge-primary`,
                // que en BS5 ya no existe— así que sin él se vería texto oscuro
                // sobre fondo azul. En BS5 `.badge` ya pone blanco y el `text-white`
                // es redundante pero inocuo. Verificado en los _badge.scss de los
                // dos Moodle locales.
                'Etiqueta' => '<span class="badge bg-primary text-white">Nuevo</span>',
                'Botón' => '<a href="https://" class="btn btn-primary">Texto del botón</a>',
                'Lista' => '<ul class="list-group mb-3"><li class="list-group-item">Primer elemento</li><li class="list-group-item">Segundo elemento</li></ul>',
                'Lista con estados' => '<ul class="list-group mb-3"><li class="list-group-item list-group-item-success">Correcto</li><li class="list-group-item list-group-item-warning">Requiere atención</li><li class="list-group-item list-group-item-danger">Error</li></ul>',
                // El <footer> de la cita no sobrevive al purificador de Moodle, así
                // que la atribución va en un <p class="blockquote-footer">.
                'Cita' => '<blockquote class="blockquote"><p>Texto de la cita.</p><p class="blockquote-footer mb-0">Fuente</p></blockquote>',
                // Estos dos NO son de Bootstrap: los monta `local_tresipunt` con su
                // propio JavaScript (amd/src/remotecomponents.js) a partir de las
                // clases, porque el purificador de Moodle borra los `data-bs-*`.
                // La estructura es la que espera ese módulo; cambiarla los deja sin
                // montar. Sin JavaScript el contenido se ve completo y apilado.
                'Acordeón' => '<div class="tip-accordion"><div class="tip-accordion__item"><h5 class="tip-accordion__title">Primera sección</h5><div class="tip-accordion__body"><p>Contenido de la primera sección.</p></div></div><div class="tip-accordion__item"><h5 class="tip-accordion__title">Segunda sección</h5><div class="tip-accordion__body"><p>Contenido de la segunda sección.</p></div></div></div>',
                // Ojo: el número de <li> tiene que coincidir con el de paneles, o el
                // plugin no monta las pestañas y las deja apiladas.
                'Pestañas' => '<div class="tip-tabs"><ul class="tip-tabs__nav"><li class="tip-tabs__tab">Primera</li><li class="tip-tabs__tab">Segunda</li></ul><div class="tip-tabs__panel"><p>Contenido de la primera pestaña.</p></div><div class="tip-tabs__panel"><p>Contenido de la segunda pestaña.</p></div></div>',
            ];
        @endphp

        @foreach($componentes as $nombre => $fragmento)
            <button type="button"
                    onclick="insertBootstrapComponent('{{ $editor }}', @js($fragmento))"
                    class="rounded-md border border-gray-300 bg-white px-2.5 py-1 text-xs font-medium text-gray-700 hover:border-blue-400 hover:text-blue-700">
                {{ $nombre }}
            </button>
        @endforeach
    </div>
</div>

@once
    <script>
        // Inserta un fragmento en el editor Jodit indicado. Se define una sola vez
        // aunque la barra aparezca en varias pantallas.
        function insertBootstrapComponent(editorVar, html) {
            const editor = window[editorVar];

            if (!editor || !editor.s) {
                console.warn('El editor todavía no está listo:', editorVar);
                return;
            }

            editor.s.focus();
            editor.s.insertHTML(html);
        }
    </script>
@endonce