{% if balances %}{% with b=balances.0 %}
<div class="app-card">
  <div class="d-flex flex-wrap justify-content-between align-items-center gap-1 mb-2">
    <div class="fw-semibold"><i class="bi bi-umbrella me-1"></i>{% t "Balances" %}
      <i class="bi bi-exclamation-triangle-fill text-warning ms-1" tabindex="0" role="img"
         aria-label="{% t 'Estimated values' %}" data-bs-toggle="tooltip" data-bs-placement="bottom"
         title="{% t 'Balance estimate disclaimer' %}"></i>
    </div>
    <button type="button" class="btn btn-sm btn-link p-0" onclick="Badgr.loadModal('{% url 'balance_details' target.userid %}')">{% t "See more" %}</button>
  </div>
  <div class="small text-body-secondary mb-1">{{ "now"|tr|capfirst }} · {{ b.at|date:"d/m/Y" }}</div>
  <div class="row g-2 text-center">
    <div class="col {% if b.vacation_hours < 0 %}text-danger{% endif %}"><div class="stat-label">{% t "Vacation" %}</div><strong class="text-nowrap">{{ b.vacation_hours|hours }} h</strong></div>
    <div class="col {% if b.permit_hours < 0 %}text-danger{% endif %}"><div class="stat-label">{% t "Permits" %}</div><strong class="text-nowrap">{{ b.permit_hours|hours }} h</strong></div>
    <div class="col {% if b.total_hours < 0 %}text-danger{% endif %}"><div class="stat-label">{% t "Total" %}</div><strong class="text-nowrap">{{ b.total_hours|hours }} h</strong></div>
  </div>
</div>
{% endwith %}{% endif %}