<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>{{ output_path_raw }}</title>
    <style>
        html, body { margin: 0; padding: 0; height: 100%; background: #fff; }
        replay-web-page { display: block; width: 100%; height: 100%; }
    </style>
    <script>
    async function activateReplayWorker() {
        if (!('serviceWorker' in navigator)) {
            throw new Error('Service workers are required for WACZ replay');
        }
        const registration = await navigator.serviceWorker.register(
            '{{ replay_base }}sw.js?serveIndex=1',
            { scope: '{{ replay_base }}' },
        );
        if (registration.active && registration.active.state === 'activated') return;

        const worker = registration.installing || registration.waiting || registration.active;
        if (!worker) throw new Error('Replay service worker was not created');
        await new Promise((resolve, reject) => {
            function onStateChange() {
                if (worker.state === 'activated') {
                    worker.removeEventListener('statechange', onStateChange);
                    resolve();
                } else if (worker.state === 'redundant') {
                    worker.removeEventListener('statechange', onStateChange);
                    reject(new Error('Replay service worker became redundant'));
                }
            }
            worker.addEventListener('statechange', onStateChange);
            onStateChange();
        });
    }

    function mountReplay() {
        const root = document.getElementById('replay-root');
        const replayElement = document.getElementById('replay-template').content.firstElementChild.cloneNode(true);
        replayElement.addEventListener('rwp-page-loading', (event) => {
            if (event.detail && event.detail.loading === false) {
                window.archiveboxReplayReady = event.detail;
                window.dispatchEvent(new CustomEvent('archivebox-replay-ready', {detail: event.detail}));
            }
        });
        root.replaceChildren(replayElement);
    }

    window.addEventListener('DOMContentLoaded', () => {
        activateReplayWorker()
            .then(() => customElements.whenDefined('replay-web-page'))
            .then(mountReplay)
            .catch((error) => {
                window.archiveboxReplayError = String(error);
                window.dispatchEvent(new CustomEvent('archivebox-replay-error', {detail: String(error)}));
            });
    }, {once: true});
    </script>
    <script src="{{ replay_base }}ui.js"></script>
</head>
<body>
    <div id="replay-root"
         data-source="{{ output_path }}"
         data-url="{{ archived_url }}"
         data-replaybase="{{ replay_base }}"></div>
    <template id="replay-template">
        <replay-web-page
            source="{{ output_path }}"
            {% if archived_url %}url="{{ archived_url }}"{% endif %}
            embed="replayonly"
            replaybase="{{ replay_base }}"></replay-web-page>
    </template>
</body>
</html>
