{%extends 'therm/base.html'%}
{%block middle_col%}
    <div class="row">
        <div class="col-md-6 col-xs-6 col-md-6 col-lg-6">
            <div class="btn-group-vertical">
                <button id="heat_on_btn" class="btn" onclick="toggle_heat_status()">Heat</button>
                <button id="heat_manual_btn" class="btn" onclick="toggle_manual()"></button>
            </div>
        </div>
        <div class="col-md-6 col-xs-6 col-md-6 col-lg-6">
            <div class="row">
                <div class="col-md-12 col-xs-12 col-md-12 col-lg-12">
                    <span class="label label-default col-md-10 col-sm-10 col-lg-6 col-xs-9"><span id="tuned_temp"></span></span><br>
                    <div id="temperatures"></div>
                </div>
                <div class="col-md-12 col-xs-12 col-md-12 col-lg-12">

                    <span class="label label-default"><span id="time"></span></span>&nbsp;
                    <span id="flame" class="label label-default"> <span class="glyphicon glyphicon-fire"></span></span>

                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-md-12 col-xs-12 col-md-12 col-lg-12">&nbsp;</div>
        <div class="col-md-6 col-xs-6 col-md-6 col-lg-6">
            <div class="row pull-left">
                <div class="col-offset-4 col-md-8 col-xs-12 col-md-12 col-lg-12">
                    <strong>Confort</strong>
                </div>
                <div class="col-md-12 col-xs-12 col-md-12 col-lg-612">
                    <div  class="btn-group-vertical">
                        <button class="btn" onclick="bri('confort')"><span class="glyphicon glyphicon-chevron-up"></span></button>
                        <span id="confort"></span>
                        <button class="btn" onclick="dim('confort')"><span class="glyphicon glyphicon-chevron-down"></span></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-6 col-md-6 col-lg-6">
            <div class="row pull-right">
                <div class="col-md-12 col-xs-12 col-md-12 col-lg-12">
                    <strong>Economic</strong>
                </div>
                <div class="col-md-12 col-xs-12 col-md-12 col-lg-12">
                    <div class="btn-group-vertical">
                        <button class="btn" onclick="bri('economic')"><span class="glyphicon glyphicon-chevron-up"></span></button>
                        <span id="economic"></span>
                        <button class="btn" onclick="dim('economic')"><span class="glyphicon glyphicon-chevron-down"></span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{%endblock%}
{%block document_ready%}
read_heat_status()
refresh_on()
{%endblock%}
{%block script%}
var ti
function refresh_on(){
    ti = window.setInterval(read_heat_status, 2000)
}
function refresh_off(){
    clearInterval(ti)
}
{%endblock%}
