{% extends "ledger/base.html" %}
{% load ledger_tags %}
{% block title %}Budgets{% endblock %}
{% block content %}
<div class="pagehead"><h1>Envelope budgets &middot; {{ label }}</h1>
  <div class="monthnav"><a class="btn small ghost" href="?month={{ prev }}">&larr;</a><a class="btn small ghost" href="?month={{ next }}">&rarr;</a></div></div>
<table class="table card">
  <thead><tr><th>Envelope</th><th class="num">Budget</th><th class="num">Carried in</th><th class="num">Available</th><th class="num">Spent</th><th class="num">Left</th><th style="width:22%">Pacing</th><th class="num">Forecast</th><th></th></tr></thead>
  <tbody>
  {% for r in rows %}
    <tr>
      <td><strong>{{ r.category.name }}</strong>{% if not r.budget.rollover %} <span class="muted small">no rollover</span>{% endif %}</td>
      <td class="num">{{ r.envelope.budget|money0 }}</td>
      <td class="num {% if r.envelope.carry_in < 0 %}neg{% endif %}">{{ r.envelope.carry_in|money0 }}</td>
      <td class="num">{{ r.envelope.available|money0 }}</td>
      <td class="num">{{ r.envelope.spent|money0 }}</td>
      <td class="num {% if r.envelope.remaining < 0 %}neg{% endif %}">{{ r.envelope.remaining|money0 }}</td>
      <td><div class="bar"><div class="fill {{ r.pacing.status }}" style="width:{{ r.percent }}%"></div><div class="marker" style="left:{{ r.expected_percent }}%"></div></div>
        <div class="muted small">expected {{ r.pacing.expected|money0 }}</div></td>
      <td class="num"><span class="pill {{ r.pacing.status }}">{{ r.pacing.forecast|money0 }}</span></td>
      <td><form method="post">{% csrf_token %}<input type="hidden" name="id" value="{{ r.budget.id }}"><button class="link" name="action" value="delete">remove</button></form></td>
    </tr>
  {% empty %}<tr><td colspan="9" class="muted">No envelopes yet.</td></tr>{% endfor %}
  </tbody>
</table>
<section class="card">
  <h2>Add or update an envelope</h2>
  <form method="post" class="row wrap">{% csrf_token %}
    <select name="category" required><option value="">Category...</option>{% for c in categories %}<option value="{{ c.id }}">{{ c|indent }}</option>{% endfor %}</select>
    <input name="monthly_amount" placeholder="Monthly amount" required>
    <label class="inline">Start <input type="month" name="start_month" value="{{ default_start }}"></label>
    <label class="inline"><input type="checkbox" name="rollover" checked> roll over unused / overspent</label>
    <button class="btn">Save envelope</button>
  </form>
  <p class="muted small">Spending in a parent category includes its sub-categories. Overspending carries forward as a negative balance when rollover is on.</p>
</section>
{% endblock %}