{% extends "core/base.html" %}
{% block title %}Bill breakdown{% endblock %}
{% block content %}
<h1>Bill {{ bill.period_start|date:"d M Y" }} &rarr; {{ bill.period_end|date:"d M Y" }}</h1>
<p class="muted">{{ bill.days }} days, {{ bill.units }} units. Slab limits are pro-rated to {{ bill.days }}/30 of the standard limits.</p>
<div class="cols">
  <section class="card">
    <h2>Line items</h2>
    <table class="bill">
      {% for ln in calc.lines %}
      <tr class="{{ ln.code }}"><td>{{ ln.label }}{% if ln.qty is not None and ln.rate is not None %} <small>({{ ln.qty|floatformat:"-2" }} x {{ ln.rate|floatformat:"-4" }})</small>{% endif %}</td><td class="n">{{ ln.amount|floatformat:"2g" }}</td></tr>
      {% endfor %}
      <tr class="total"><td>Total payable</td><td class="n">Rs {{ calc.total|floatformat:"2g" }}</td></tr>
    </table>
    {% if calc.segments|length > 1 %}
    <h3>Tariff versions in this period</h3>
    <ul>{% for s in calc.segments %}<li>{{ s.tariff }}: {{ s.start|date:"d M" }} to {{ s.end|date:"d M" }} ({{ s.days }} days, {{ s.units|floatformat:1 }} units)</li>{% endfor %}</ul>
    {% endif %}
  </section>
  <section class="card">
    <h2>Units in each slab</h2>
    <div class="slabbar">{% for x in slabs %}{% if x.pct > 0 %}<i class="{{ x.cls }}" style="width:{{ x.pct|floatformat:2 }}%" title="{{ x.s.label }}: {{ x.s.units|floatformat:1 }} units"></i>{% endif %}{% endfor %}</div>
    <table>
      <tr><th>Slab</th><th class="n">Units</th><th class="n">Rate</th><th class="n">Amount</th></tr>
      {% for x in slabs %}<tr><td><i class="dot {{ x.cls }}"></i>{{ x.s.label }}</td><td class="n">{{ x.s.units|floatformat:1 }}</td><td class="n">{{ x.s.rate }}</td><td class="n">{{ x.s.amount|floatformat:2 }}</td></tr>{% endfor %}
    </table>
    <h2>Against the actual bill</h2>
    {% if diff is not None %}
      <p>Actual Rs {{ bill.actual_amount|floatformat:"2g" }}; difference <b class="{% if diff == 0 %}ok{% elif diff > 0 %}over{% else %}under{% endif %}">{{ diff|floatformat:2 }}</b> (actual minus computed).</p>
    {% else %}<p class="muted">No actual amount entered.</p>{% endif %}
    <form method="post" class="form inline">{% csrf_token %}{{ form.as_div }}<button class="btn">Save</button></form>
  </section>
</div>
{% endblock %}