{{-- Fase L1 (specs/MigracionLayout.MD): una pantalla Bootstrap dentro del layout nuevo.
     El iframe ocupa todo <main> y hace su propio scroll. Al navegar dentro de él se actualizan la
     URL (/marco?u=...), el título y el enlace marcado del menú. --}}
<x-app-layout>
    <div class="relative h-full w-full" x-data="{ cargando: true, lento: false }"
         x-init="setTimeout(() => { if (cargando) lento = true }, 15000)">
        <div x-show="cargando" class="absolute inset-x-0 top-0 z-10 h-0.5 overflow-hidden bg-[var(--acento-suave)]" aria-hidden="true">
            <div class="h-full w-1/3 animate-pulse bg-[var(--acento)]"></div>
        </div>
        <p x-show="lento" x-cloak class="absolute inset-x-0 top-6 z-10 mx-auto w-fit rounded-lg border border-[var(--borde)] bg-[var(--superficie)] px-4 py-2 text-[13px] text-[var(--texto-suave)] shadow-[var(--sombra-panel)]">
            La pantalla está tardando. Si era una descarga, el archivo ya está en sus descargas.
        </p>
        <iframe id="ctc-marco" name="ctc-marco" src="{{ $destino }}" title="Contenido"
                class="block h-full w-full border-0 bg-[var(--fondo)]"
                x-on:load="cargando = false; lento = false; window.ctcMarcoCargado($el)"></iframe>
    </div>

    @push('scripts')
        <script>
            window.ctcMarcoCargado = function (iframe) {
                var ubicacion;
                try {
                    // Mismo origen: se puede leer la ubicación del iframe.
                    ubicacion = iframe.contentWindow.location;
                } catch (e) {
                    return;
                }
                if (!ubicacion || ubicacion.href === 'about:blank') {
                    return;
                }

                // Sin el token con que se pidió el HTML ya generado (EnvolverEnMarco): una recarga vuelve a ejecutar la pantalla.
                var busqueda = new URLSearchParams(ubicacion.search);
                busqueda.delete('__ctc_marco');
                var consulta = busqueda.toString();
                var destino = ubicacion.pathname + (consulta ? '?' + consulta : '') + ubicacion.hash;
                // Con el prefijo de la aplicación si se sirve bajo una carpeta (p. ej. /public/marco).
                history.replaceState(null, '', @js(url('marco')) + '?u=' + encodeURIComponent(destino));

                var titulo = iframe.contentDocument && iframe.contentDocument.title;
                if (titulo) {
                    document.title = titulo + ' · Control Tower';
                }

                // Marca en el menú el enlace de la pantalla actual, abre su grupo y elige su módulo.
                var base = @js(rtrim(request()->getBasePath(), '/'));
                var pathname = base && (ubicacion.pathname === base || ubicacion.pathname.indexOf(base + '/') === 0)
                    ? ubicacion.pathname.slice(base.length) : ubicacion.pathname;
                var path = pathname.replace(/^\/+|\/+$/g, '');
                var marcado = null;
                document.querySelectorAll('[data-enlace-path]').forEach(function (a) {
                    var es = a.getAttribute('data-enlace-path') === path;
                    if (es) { a.setAttribute('aria-current', 'page'); marcado = marcado || a; }
                    else { a.removeAttribute('aria-current'); }
                });
                if (marcado && window.Alpine) {
                    window.Alpine.store('nav').elegir(marcado.getAttribute('data-enlace-modulo'));
                    var grupo = marcado.closest('[x-data]');
                    if (grupo) { window.Alpine.$data(grupo).abierto = true; }
                }
                window.Alpine && (window.Alpine.store('nav').cajon = false);
            };
        </script>
    @endpush
</x-app-layout>