<script type="module" crossorigin src="/forest/static/index.b6e37ca2.js"></script>
<link rel="modulepreload" href="/forest/static/vendor.3e78b063.js">
<link rel="stylesheet" href="/forest/static/index.c1c010d1.css">
{% extends base %}

<!-- Note: roots.attname raises ValueError if attname not found
           see bokeh.embed.util.RenderRoots.__getitem__
-->
{% macro safe_embed(name) %}
    {% for root in roots %}
        {% if root.name == name %}
           {{ embed(roots | attr(name)) }}
        {% endif %}
    {% endfor %}
{% endmacro %}

{% block postamble %}





{% endblock %}

{% block contents %}
    <div class="flex-container">
    <!--
    <nav class="flex-nav">
        <div class="display-inline-block float-left">
            {{ safe_embed('sidenav_button') }}
        </div>
        <div class="margin-left-110 display-inline-block float-left">
            {{ safe_embed('headline') }}
        </div>
        <!- - Embed optional button - ->
        <div class="float-right">
            {{ safe_embed('diagrams_button') }}
        </div>
    </nav>
    -->

    <!-- Layout figure row -->
    <div id="figures" class="flex-figures" style="position:relative;">

        <div class="absolute top-0 right-0 z-10 bg-slate-100 text-slate-700 border border-slate-300 shadow-md mt-4 mr-4 rounded-full flex flex-row items-center justify-center">
        </div>

        <!-- Diagram drawer -->
        <div class="diagrams absolute top-0 right-0 border-l border-slate-300 bg-slate-100 px-2 text-slate-700 z-20">
            <div id="diagram-drawer"></div>
            <div id="diagrams">
                {{ safe_embed('series') }}
            </div>
        </div>

        <div class="absolute top-0 left-0 max-h-screen overflow-y-hidden py-2 px-2" style="z-index:4;">
        <div class="flex flex-col divide-y overflow-hidden rounded border border-slate-300 shadow-md" style="z-index:4;">
            <div class="flex flex-row space-x-4 justify-between items-center bg-slate-100 py-3 px-4 text-slate-700">
                <div class="flex flex-row items-center space-x-4">
                    <div id="settings-icon" class="cursor-pointer text-green-600 hover:text-green-700">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                        </svg>
                    </div>
                    <div class="text-slate-600">Controls</div>
                </div>
                <div>
                    <i class="fa fa-expand hover:text-blue-600 cursor-pointer" id="full-screen-icon"></i>
                </div>
            </div>
            <div class="">
                <!-- Control panel drawer -->
                <div id="sidenav" class="z-10 bg-slate-100 panel panel-close">
                    <div id="controls-container" class="display-block max-h-1/2 overflow-y-auto">{{ safe_embed('controls') }}</div>
                    <div id="modal-container" class="display-none">{{ safe_embed('modal') }}</div>
                </div>
            </div>
        </div>
        </div>


        {{ safe_embed('figures') }}

        <!-- Colorbars -->
        <div class="abs-bottom-middle z-index-5">
            {{ safe_embed('colorbar') }}
        </div>

        <!-- Title -->
        <div class="absolute top-0 left-1/2 -translate-x-1/2 z-10
            bg-slate-100 mt-2 border border-slate-300 rounded shadow-md
            font-semibold flex flex-row divide-x items-center">
            <div id="info-icon" class="p-2 text-slate-700 cursor-pointer hover:text-blue-600 flex flex-row items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
            <div id="info" class="transition-all duration-300 flex flex-row items-center bg-white info-open">
                {{ safe_embed('title') }}
            </div>
        </div>

    </div>
    <footer class="flex-footer">
        <div id="time" class="time border-t border-slate-300">
            {{ safe_embed('time') }}
        </div>
    </footer>
    </div>

    <!-- Bokeh document roots -->
    {% for doc in docs %}
        {% for root in doc.roots %}
            <div class="display-none">
            {{ embed(root) }}
            </div>
        {% endfor %}
    {% endfor %}

    

    

    <script>
// Re-attach roots if WebSocket request served by different machine
let reattachRoots = function() {
    // TODO: Correct this method to work with new layout
    return

    // Find template roots
    let classNames = ["control-panel", "series-panel", "time-panel", "colorbar-panel"];
    let parents = classNames.reduce(function(data, className) {
        data[className] = document.getElementsByClassName(className)[0];
        return data
    }, {})
    if (parents[classNames[0]].children[0].innerHTML !== "") {
        // First template root populated correctly
        return
    }

    // Find orphan roots
    let roots = document.getElementsByClassName('bk-root')
    let orphans = [...roots].filter((r) => !('data-root-id' in r.attributes))
    if (orphans.length === 0) {
        // No orphans to re-home
        return
    }

    // NOTE: Order important since orphaned roots have no data-root-id attr
    parents['control-panel'].appendChild(orphans[0])
    parents['series-panel'].appendChild(orphans[1])
    parents['time-panel'].appendChild(orphans[2])
    parents['colorbar-panel'].appendChild(orphans[3])
}

// Trigger KeyPress.hidden_button if present
let triggerHiddenButton = function() {
    let els = document.getElementsByClassName('keypress-hidden-btn')
    if (els.length > 0) {
        btns = els[0].getElementsByTagName('button')
        btns[0].click()
    }
}

oldLog = console.log;
console.log = function(message) {
    if (typeof message.localeCompare === "undefined") {
        return oldLog.apply(null, arguments);
    }
    if (message.localeCompare('Bokeh items were rendered successfully') == 0) {
        console.log = oldLog;
        reattachRoots();
        triggerHiddenButton();
    } else {
        oldLog.apply(null, arguments);
    }
}
    </script>
{% endblock %}
