<!DOCTYPE html>
<html>
    <head>
        <title>{{table_config.name}} Beavers</title>
        <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
        <link rel="shortcut icon" type="image/x-icon" href="/assets/favicon.ico" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
        />
        <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective@{{perspective_version}}/dist/cdn/perspective.js"></script>
        <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer@{{perspective_version}}/dist/cdn/perspective-viewer.js"></script>
        <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid@{{perspective_version}}/dist/cdn/perspective-viewer-datagrid.js"></script>
        <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc@{{perspective_version}}/dist/cdn/perspective-viewer-d3fc.js" ></script>

        <link
                rel="stylesheet"
                crossorigin="anonymous"
                href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer@{{perspective_version}}/dist/css/pro.css"
        />

        <style>
            body {
                height: 100vh;
                width: 100vw;
                font-family: 'Roboto Mono';
                overflow: scroll;
            }
            .perspective-table-class {
                position: relative;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <perspective-viewer id="viewer" class="perspective-table-class"> </perspective-viewer>

        <script type="module">
            import perspective from "https://cdn.jsdelivr.net/npm/@finos/perspective@{{perspective_version}}/dist/cdn/perspective.js";
            window.addEventListener("DOMContentLoaded", async function () {
                const viewer = document.getElementById("viewer");

                // Create a client that expects a Perspective server to accept
                // Websocket connections at the specified URL.
                const websocket_uri = "ws://" + window.location.host + "/websocket";
                const websocket = await perspective.websocket(websocket_uri);
                // websocket._ws.onclose = function () {
                //     viewer.style.display = "none"
                // }

                const table = await websocket.open_table("{{table_config.name}}");

                viewer.load(table);

                let config = await viewer.save();

                config.name = "{% raw table_config.name %}"
                config.columns = {% raw json_encode(table_config.columns) %}
                config.sort = {% raw json_encode(table_config.sort) %}
                config.filter = {% raw json_encode(table_config.filters) %}

                await viewer.restore(config);
                viewer.toggleConfig();
            });
        </script>
    </body>
</html>
