{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-2 inline-headers text-right">
            <h1><i class="wi wi-thermometer"></i></h1>
            <h1 id="temp-current">&infin;</h1>
            <h2>&deg;{{ units }}</h2>
        </div>
        <div class="col-md-2 inline-headers text-right voffset3">
            <div>
                <h4 id="temp-target">&infin;</h4>
                <h4>&deg;{{ units }}</h4>&nbsp;
                <h4><i class="glyphicon glyphicon-record"></i></h4>
            </div>
            <div>
                <h4 id="cycle-time">&infin;</h4>&nbsp;
                <h4><i class="glyphicon glyphicon-repeat"></i></h4>
            </div>
        </div>
        <div class="col-md-2 inline-headers voffset3">
            <div>
                <h4><i class="glyphicon glyphicon-fire"></i></h4>
                &nbsp;<h4 id="heat-level">&infin;</h4>
            </div>
            <div>
                <h4><i class="glyphicon glyphicon-asterisk"></i></h4>
                &nbsp;<h4 id="cool-level">&infin;</h4>
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-1 text-right"><h3>1h</h3></div>
        <div class="col-md-6">
            <div id="chart-hourly">
                <svg></svg>
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-1 text-right"><h3>24h</h3></div>
        <div class="col-md-6">
            <div id="chart-daily">
                <svg></svg>
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
<script src='/js/charts.js' type='text/javascript'></script>
<script type='text/javascript'>
  window.onload=function(){
    initChartsGauges();
    setInterval(function(){
      updateGauges();
      renderCharts();
      }, {{ frequency * 1000 }});
  }
</script>
{% endblock %}