{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <title>Viewer</title>
        <style type="text/css">
            body, html {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }
            #viewer {
                position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
            }
            /* Modal styles */
            .center-modal {
                position: fixed;
                top: 0; left: 0; right: 0; bottom: 0;
                width: 100vw; height: 100vh;
                background: rgba(20,20,30,0.96);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1000;
            }
            .center-modal-content {
                background: #23232b;
                color: #eee;
                padding: 2em 2.5em;
                border-radius: 12px;
                box-shadow: 0 4px 32px rgba(0,0,0,0.4);
                max-width: 90vw;
                max-height: 80vh;
                text-align: center;
                font-size: 1.2em;
            }
            .highlight-action {
                display: inline-block;
                background: #0d6efd;
                color: #fff;
                font-weight: bold;
                padding: 0.4em 1em;
                border-radius: 6px;
                margin: 0.7em 0 1.2em 0;
                font-size: 1.3em;
                box-shadow: 0 2px 8px rgba(13,110,253,0.15);
                letter-spacing: 0.03em;
            }
            .center-modal-content ul {
                color: #bdbdbd;
            }
            .center-modal-content h2 {
                color: #fff;
            }
        </style>
        <script src="{% static 'dv3d/index.js' %}" type="module" defer="defer"></script>
    </head>

    <body>
        <!-- Centered modal for instructions -->
        <div id="awaiting-modal" class="center-modal">
            <div class="center-modal-content">
                <span class="highlight-action">Share this screen</span>
                <h2>Awaiting Load Request</h2>
                <p>This page will display a DICOM series when loaded from another page.</p>
                <ul style="text-align:left; margin: 1em auto; max-width: 30em;">
                    <li>Return to the previous page and select a series to view.</li>
                    <li>This viewer will update automatically when a series is loaded.</li>
                    <li>Keep this tab open to receive data.</li>
                </ul>
            </div>
        </div>
        <div id="root" class="dicom-viewer-root"
             style="box-sizing: border-box; background: #222; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh;"
             data-auto-cache-stack="true"
        ></div>

        <script type="text/javascript">
            var win2 = false;

            document.addEventListener("DOMContentLoaded", function() {
                document.title = "Case: {{current_case.title}}";
                console.log('ready');
                const bc = new BroadcastChannel("viva_load");
                bc.onmessage = (event) => {
                    console.log("message received");
                    console.log(event);
                    if (event.data.type == "open") {
                        // Hide modal when data is loaded
                        document.getElementById("awaiting-modal").style.display = "none";
                        document.getElementById("root").dataset.images = event.data.images;

                        if (
                            event.data.viewerstate &&
                            Object.keys(event.data.viewerstate).length > 0
                        ) {
                            document.getElementById("root").dataset.viewerstate = event.data.viewerstate;
                        } else {
                            delete document.getElementById("root").dataset.viewerstate;
                        }
                        console.log("Annotations:", event.data.annotations);
                        if (
                            event.data.annotations &&
                            Object.keys(event.data.annotations).length > 0
                        ) {
                            document.getElementById("root").dataset.annotationjson = event.data.annotations;
                        } else {
                            delete document.getElementById("root").dataset.annotationjson;
                        }

                        window.mountDicomViewers();
                        bc.postMessage({"type": "open-complete-local"});
                    }
                };
            });
        </script>

    </body>
</html>