<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>NodeKit</title>
    <link rel="shortcut icon" href="">

    <!-- NodeKit -->
    <script src="{{ js_path }}"></script>
    <link href="{{ css_path }}" rel="stylesheet">
    <script>
        const graphGzB64 = `{{ graph_gz_b64 }}`;
        function renderLoadError(message) {
            document.body.innerHTML = `
                <main style="font-family: sans-serif; max-width: 48rem; margin: 4rem auto; padding: 0 1.5rem; line-height: 1.5;">
                    <h1 style="font-size: 1.5rem; margin-bottom: 1rem;">Unable to load this NodeKit site</h1>
                    <p style="margin-bottom: 0.75rem;">
                        This browser could not decode the embedded Graph payload required to start the task.
                    </p>
                    <pre style="white-space: pre-wrap; word-break: break-word; background: #f5f5f5; padding: 1rem; border-radius: 0.5rem;">${message}</pre>
                </main>
            `;
        }
        async function loadGraph() {
            if (typeof DecompressionStream === "undefined") {
                throw new Error("DecompressionStream is not available in this browser.");
            }
            const normalizedB64 = graphGzB64.replace(/\s+/g, "");
            const gzBytes = Uint8Array.from(atob(normalizedB64), (c) => c.charCodeAt(0));
            const decompressed = new Blob([gzBytes]).stream().pipeThrough(new DecompressionStream("gzip"));
            const graphJson = await new Response(decompressed).text();
            const graph = JSON.parse(graphJson);
            await NodeKit.play(graph);
        }
        window.onload = async () => {
            try {
                await loadGraph();
            } catch (error) {
                const message = error instanceof Error ? error.message : String(error);
                renderLoadError(message);
                console.error(error);
            }
        };
    </script>
</head>
<body></body>
</html>
