{% extends "base.html" %}
{% block content %}
<div class="page">
  <nav class="budget-nav">
    <span class="month-label">Budget <span class="year">MMXXVI</span></span>
    <a class="nav-link" href="/month/{{ current_year_month }}">This month ({{ current_year_month }}) &rarr;</a>
    {% if all_months %}
      <select
        class="month-picker"
        onchange="if(this.value){window.location=this.value}"
        aria-label="Jump to month"
      >
        <option value="">Jump to...</option>
        {% for m in all_months %}
          <option value="/month/{{ m.year_month }}">{{ m.year_month }}</option>
        {% endfor %}
      </select>
    {% endif %}
  </nav>

  {% include "partials/budget_zero.html" %}

  {% for g in groups %}
    <details class="group" id="group-{{ g.group.value }}"{% if g.default_open %} open{% endif %}>
      <summary>
        <span class="chevron" aria-hidden="true"></span>
        <span class="group-name">{{ g.label }}</span>
        <span class="group-total" id="group-total-{{ g.group.value }}">${{ '{:,.2f}'.format(g.total) }}</span>
      </summary>
      {% for section in g.sections %}
        {% include "partials/section.html" %}
        {% if g.group.value == 'committed' and section.section.value == 'debt_minimum' %}
          {% include "partials/target_card.html" %}
        {% endif %}
      {% endfor %}
    </details>
  {% endfor %}

  <footer class="colophon">
    the art of giving every dollar a job
    <div class="signoff">Quartermaster</div>
  </footer>
</div>
{% endblock %}