{% from macros import embed %}
{% extends base %}
{% block postamble %}
<style>
    body {
        margin: 0;
    }
    .bk-root .bk-widget {
        margin-top: 0;
    }
    /* Use when empty label is causing flow problems
    .bk-root label {
        display: inline;
    }
    */
    .control-panel {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: auto;
        background-color: rgba(245, 245, 245, 0.7);
        border-radius: 3px;
    }
    .bonsai-mg-lf-10 {
        margin-left: 10px;
    }
    .bonsai-lh-24 {
        line-height: 24px;
    }
    .height-panel {
        position: absolute;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 0;
        width: auto;
        z-index: 2;
    }
    .series-panel {
        position: absolute;
        right: 0;
        top: 0;
        margin: 0;
        padding: 0;
        width: auto;
        z-index: 2;
    }
    .time-panel {
        position: absolute;
        left: 0;
        bottom: 10px;
        width: auto;
        z-index: 2;
        margin: 10px;
        margin-bottom: 0px;
        padding: 10px;
    }
    .colorbar-panel {
        position: absolute;
        right: 0;
        bottom: 10px;
        width: auto;
        z-index: 2;
        margin: 10px;
        margin-bottom: 0px;
        padding: 10px;
    }
    .keypress-hidden-btn {
        display: none !important;
    }
</style>
{% endblock %}
{% block contents %}
    {% for doc in docs %}
        {% for root in doc.roots %}
            {% if root.name == "controls" %}
                <div class="control-panel">
                {{ embed(root) | indent(10) }}
                </div>
            {% elif root.name == "series" %}
                <div class="series-panel">
                {{ embed(root) | indent(10) }}
                </div>
            {% elif root.name == "time" %}
                <div class="time-panel">
                {{ embed(root) | indent(10) }}
                </div>
            {% elif root.name == "colorbar" %}
                <div class="colorbar-panel">
                {{ embed(root) | indent(10) }}
                </div>
            {% else %}
                {{ embed(root) | indent(10) }}
            {% endif %}
        {% endfor %}
    {% endfor %}
    <script>
// Re-attach roots if WebSocket request served by different machine
let reattachRoots = function() {
    // 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 %}