{% extends "cosmic_base.html" %}
{% block title %}Dashboard{% endblock %}
{% block head_additions %}
    <script>
    var reloading;

    function checkReloading() {
        if (window.location.hash=="#autoreload") {
            reloading=setTimeout("window.location.reload();", 5000);
            document.getElementById("reloadCB").checked=true;
        }
    }

    function toggleAutoRefresh(cb) {
        if (cb.checked) {
            window.location.replace("#autoreload");
            reloading=setTimeout("window.location.reload();", 5000);
        } else {
            window.location.replace("#");
            clearTimeout(reloading);
        }
    }

    window.onload=checkReloading;
    </script>
{% endblock %}
{% block content %}
	<h1>Dashboard</h1>



    <div class="col-lg-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <input type="checkbox" onclick="toggleAutoRefresh(this);" id="reloadCB"> Auto refresh dashboard every 5 seconds
            </div>
            <div class="panel-body">
                <img id="img" src="{{ url_for('static',filename='images/dashboard_histogram.png') }}"/>
            </div>
        </div>
    </div>

    {% for value in values_to_display %}
    <div class="col-lg-4 col-md-6">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-3">
                        <i class="{{ value['icon'] }}"></i>
                    </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge" style="font-size: 24px">{{ value['value'] }}</div>
                        <div>{{ value['name'] }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}



{% endblock %}