{% from macros import embed %}
{% extends base %}
{% block postamble %}
<link rel="stylesheet" href="forest/static/style.css" type="text/css" media="all">
<script src="forest/static/script.js" charset="utf-8"></script>
{% endblock %}
{% block contents %}
    <div id="sidenav" class="sidenav">
            <button type="button" onclick="closeId('sidenav')">Close</button>
            {{ embed(roots.controls) | indent(10) }}
    </div>
    <div id="diagrams" class="diagrams">
            <button type="button" onclick="closeId('diagrams')">Close</button>
            {{ embed(roots.series) | indent(10) }}
    </div>

    <nav>
        <button class="float-left" type="button" onclick="openId('sidenav')">Settings</button>
        <div class="float-left headline-container">
        {{ embed(roots.headline) | indent(10) }}
        </div>
        <button type="button" class="float-right" onclick="openId('diagrams')">Diagrams</button>
    </nav>

    <!-- Layout figure row -->
    <div id="figures">
        {{ embed(roots.figures) | indent(10) }}
    </div>

    <!-- Layout footer widgets -->
    <footer>
        <div id="colorbar" class="colorbar">
            {{ embed(roots.colorbar) | indent(10) }}
        </div>
        <div id="time" class="time">
            {{ embed(roots.time) | indent(10) }}
        </div>
    </footer>

    <!-- Bokeh document roots -->
    {% for doc in docs %}
        {% for root in doc.roots %}
            <div class="display-none">
            {{ embed(root) | indent(10) }}
            </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 (message.localeCompare('Bokeh items were rendered successfully') == 0) {
        console.log = oldLog;
        reattachRoots();
        triggerHiddenButton();
    }
}
    </script>
{% endblock %}