    <div class="container-fluid">
      <div class="row">

        <div class="col"></div>
        <main class="pt-4 col-10">
          <h1>Energy Dashboard</h1>
          <h5><span id="timestamp">{timestamp}</span> UTC</h5>
          <section class="row text-center placeholders">
            <div class="col placeholder">
              <img src="{array_voltage_icon}" width="20" class="img-fluid" alt="Battery voltage">
              <h3><span id="array_voltage">{array_voltage}</span> [V]</h3>
              <div class="text-muted"><span id="array_percent">{array_percent}</span> [%]</div>
            </div>
            <div class="col placeholder">
              <img src="{charge_current_icon}" width="20" class="img-fluid" alt="Battery current">
              <h3><span id="charge_current">{charge_current}</span></h3>
              <div class="text-muted">Charging [A]</div>
            </div>
            <div class="col placeholder">
              <img src="{solar_power_icon}" width="40" class="img-fluid" alt="Solar array power">
              <h3><span id=solar_power>{solar_power}</span></h3>
              <span class="text-muted"> Solar PV [W]</span>
            </div>
            <div class="col placeholder">
              <img src="{solar_power_icon}" width="40" class="img-fluid" alt="Max power / day">
              <h3><span id=pmax_day>{pmax_day}</span></h3>
              <div class="text-muted">Pmax / day [W]</div>
            </div>
          </section>
          <section class="row text-center placeholders">
            <div class="col">
              <div id="solar_labels"></div>
              <div id="solar" class="container-fluid" style="width:100%;"></div>
              <div id="power_labels"></div>
              <div id="power" class="container-fluid" style="width:100%;"></div>
              <script type="text/javascript" src="../static/js/solar_graph.js"></script>
              <button type="button" class="btn btn-secondary" onclick="setBack()">&lt;&lt;</button>
              <button type="button" class="btn btn-secondary btn-sm" onclick="setHours('6')">6h</button>
              <button type="button" class="btn btn-secondary btn-sm" onclick="setHours('12')">12h</button>
              <button type="button" class="btn btn-secondary btn-sm" onclick="setHours('24')">24h</button>
              <button type="button" class="btn btn-secondary btn-sm" onclick="setHours('168')">Week</button>
              <button type="button" class="btn btn-secondary btn-sm" onclick="setHours('720')">Month</button>
              <button type="button" class="btn btn-secondary btn-sm" onclick="setHours('8760')">Year</button>
              <button type="button" class="btn btn-secondary" onclick="setForth()">&gt;&gt;</button>
              <h6><span id="graph_timestamp">{timestamp}</span> UTC</h6>
            </div>
          </section>

          <div class="table-responisve">
            <h2>Historical values by day</h2>
            {stats_table}
          </div>
        </main>
        <div class="col"></div>
      </div>
    </div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../static/js/ie10bugfix.js"></script>
