<section class="zero-widget" id="zero-widget" hx-swap-oob="outerHTML">
  <div class="zero-brand">
    <img src="{{ url_for('static', path='brand/logo-full.png') }}" alt="Quartermaster">
  </div>
  <div class="zero-side left">
    <div class="zero-sublabel">Budget balance</div>
    <div class="zero-subvalue">{% if zero >= 0 %}unassigned{% else %}over-allocated{% endif %}</div>
  </div>
  <div class="zero-center">
    <p class="zero-label">Zero Amount</p>
    <h2 class="zero-value tone-{{ tone }}">
      <span class="dollar">$</span>{{ '{:,.2f}'.format(zero).split('.')[0] }}<span class="cent">.{{ '{:,.2f}'.format(zero).split('.')[1] }}</span>
    </h2>
    <p class="zero-caption">
      {% if tone == 'zero' %}every dollar has a home{% elif tone == 'positive' %}unassigned income remains{% else %}over-allocated, plan exceeds income{% endif %}
    </p>
  </div>
  <div class="zero-side right">
    <div class="zero-sublabel">Planning for</div>
    <div class="zero-subvalue">{{ current_year_month }}</div>
  </div>
</section>
