<nav class="month-line">
  <a class="nav-month prev" href="/month/{{ prev_year_month }}" aria-label="Previous month">
    <span class="chev">&larr;</span> <em>{{ pretty_prev or prev_year_month }}</em>
  </a>
  <h2 class="month-title">{{ pretty_year_month or year_month }}</h2>
  <a class="nav-month next" href="/month/{{ next_year_month }}" aria-label="Next month">
    <em>{{ pretty_next or next_year_month }}</em> <span class="chev">&rarr;</span>
  </a>
  {% if state %}
    <span class="state-badge state-{{ state }}">
      {% if state == 'closed' and month and month.closed_at %}
        Closed {{ month.closed_at.strftime('%Y-%m-%d') }}
      {% else %}
        {{ state }}
      {% endif %}
    </span>
    {% if state == 'planning' %}
      <form class="lifecycle-form" hx-post="/month/{{ year_month }}/activate" hx-swap="none">
        <button type="submit">Activate</button>
      </form>
    {% elif state == 'active' %}
      <form class="lifecycle-form" hx-post="/month/{{ year_month }}/close" hx-swap="none">
        <button
          type="submit"
          {% if not can_close %}disabled title="Applied balance must equal $0.00 to close"{% endif %}
        >Close</button>
      </form>
    {% elif state == 'closed' %}
      <form class="lifecycle-form" hx-post="/month/{{ year_month }}/reopen" hx-swap="none">
        <button type="submit" class="secondary">Reopen</button>
      </form>
    {% endif %}
  {% else %}
    <span></span>
    <span></span>
  {% endif %}
  {% if all_months and all_months|length > 1 %}
    <select
      class="month-picker"
      onchange="if(this.value){window.location=this.value}"
      aria-label="Jump to month"
      style="grid-column: 1 / -1; justify-self: end; margin-top: 0.3rem;"
    >
      <option value="">Jump to...</option>
      {% for m in all_months %}
        <option
          value="/month/{{ m.year_month }}"
          {% if m.year_month == year_month %}selected{% endif %}
        >{{ m.year_month }}</option>
      {% endfor %}
    </select>
  {% endif %}
</nav>
