<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">Applied</div>
    <div class="zero-subvalue">${{ '{:,.2f}'.format(zero.applied).split('.')[0] }}<span class="cent">.{{ '{:,.2f}'.format(zero.applied).split('.')[1] }}</span></div>
  </div>
  <div class="zero-center">
    <p class="zero-label">Zero Amount</p>
    <h2 class="zero-value tone-{{ applied_tone }}">
      <span class="dollar">$</span>{{ '{:,.2f}'.format(zero.applied).split('.')[0] }}<span class="cent">.{{ '{:,.2f}'.format(zero.applied).split('.')[1] }}</span>
    </h2>
    <p class="zero-caption">
      {% if applied_tone == 'zero' %}the month balances{% elif applied_tone == 'positive' %}unassigned income remains{% else %}applied exceeds income{% endif %}
    </p>
  </div>
  <div class="zero-side right">
    <div class="zero-sublabel">Planned</div>
    <div class="zero-subvalue">${{ '{:,.2f}'.format(zero.planned).split('.')[0] }}<span class="cent">.{{ '{:,.2f}'.format(zero.planned).split('.')[1] }}</span></div>
  </div>
</section>
