{% extends "layout.html" %}
{% set active_page = active_page|default('meters') -%}
{% block title %}Energy Usage - {{meter_name}} - {{ period_desc }}{% endblock %}
{% block container %}
<h1 class="page-header">Energy Usage <small>{{meter_name}}</small></h1>

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{url_for('meters.usage_fy', meter_id=meter_id, fin_year=fin_yr) }}">{{fin_yr}}</a>
        </li>

        <li class="breadcrumb-item">
            <a
                href="{{ url_for('meters.usage_monthly', meter_id=meter_id, year=rpt_start.year, month=rpt_start.month) }}">{{ period_desc[-6:] }}</a>
        </li>
        <li class="breadcrumb-item active">
            {{ period_desc }}&nbsp;

            <div class="btn-group btn-group-sm" role="group">

                {% if prev_day %}
                <a class="btn btn-primary"
                    href="{{ url_for('meters.usage_daily', meter_id=meter_id, year=prev_day.year, month=prev_day.month, day=prev_day.day) }}"
                    role="button">⏮️</a>
                {% else %}
                <a class="btn btn-primary disabled" href="#" role="button">⏮️</a>
                {% endif %}

                {% if next_day %}
                <a class="btn btn-primary"
                    href="{{ url_for('meters.usage_daily', meter_id=meter_id, year=next_day.year, month=next_day.month, day=next_day.day) }}"
                    role="button">⏭️</a>
                {% else %}
                <a class="btn btn-primary disabled" href="#" role="button">⏭️</a>
                {% endif %}
            </div>
        </li>
    </ol>

</nav>


<div id="load" style="max-width: 100%; height: 350px;"></div>
<img id="load-loading" src="{{ url_for('static', filename='img/loading_icon.gif') }}"
    style="position: absolute; visibility:visible" />


<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
    {% include 'meters/chart_daily_energy.js' %}
</script>



{% endblock container%}