{% extends "core/base.html" %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<h1>Dashboard</h1>
{% if not rows %}
<p>No complete month of consumption yet. <a href="{% url 'readings' h.pk %}">Add meter readings</a> to get started.</p>
{% else %}
<div class="stats">
  <div class="stat"><span>Latest month</span><b>{{ latest.total.units|floatformat:0 }} units</b><small>{{ latest.label }} &middot; Rs {{ latest.bill.total|floatformat:"0g" }}</small></div>
  <div class="stat"><span>Cost per unit</span><b>Rs {{ latest.cost_per_unit|floatformat:2 }}</b><small>all-in average, {{ latest.label }}</small></div>
  {% if marginal %}<div class="stat"><span>Next unit costs</span><b>Rs {{ marginal.all_in_rate|floatformat:2 }}</b><small>slab {{ marginal.slab_label }} at Rs {{ marginal.slab_rate }} before duty and taxes</small></div>{% endif %}
  {% if next_bill %}<div class="stat accent"><span>Upcoming bill ({{ next_bill.2|date:"M Y" }})</span><b>Rs {{ next_bill.1.total|floatformat:"0g" }}</b><small>about {{ next_bill.0.units|floatformat:0 }} units</small></div>{% endif %}
</div>

<section class="card">
  <h2>Monthly consumption by slab</h2>
  <div class="legend">{% for label, cls in legend %}<span><i class="{{ cls }}"></i>{{ label }} units</span>{% endfor %}</div>
  {{ unit_chart }}
</section>

<div class="cols">
  <section class="card">
    <h2>Cost per unit (Rs)</h2>
    {{ cpu_chart }}
    <p class="muted">Rising cost per unit means more of your usage sits in the expensive upper slabs.</p>
  </section>
  <section class="card">
    <h2>Next 3 bills</h2>
    <table>
      <tr><th>Month</th><th class="n">Units</th><th class="n">Bill (Rs)</th></tr>
      {% for f, b, start in forecast %}<tr><td>{{ start|date:"M Y" }}</td><td class="n">{{ f.units|floatformat:0 }}</td><td class="n">{{ b.total|floatformat:"0g" }}</td></tr>{% endfor %}
    </table>
    <p class="muted">Same month last year, scaled by the year-on-year trend.</p>
    <h2>Anomalies</h2>
    {% for a in anomalies %}
      <p class="flag {{ a.kind }}">{{ a.label }}: {{ a.units|floatformat:0 }} units vs {{ a.baseline|floatformat:0 }} a year earlier ({{ a.ratio|floatformat:2 }}x)</p>
    {% empty %}<p class="muted">No month differs sharply from the same month last year.</p>{% endfor %}
  </section>
</div>
{% endif %}
{% endblock %}