{% load static %}
<div class="modal-header">
  <h2 class="modal-title h5"><i class="bi bi-umbrella me-1"></i>{% t "Balances" %} · {{ target.name }}</h2>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% t 'Close' %}"></button>
</div>
<div class="modal-body">
  <p class="small text-body-secondary"><i class="bi bi-exclamation-triangle-fill text-warning me-1"></i>{% t "Balance estimate disclaimer" %}
    {% if target.remark.snapshot_date %}· {% t "Balance snapshot" %} {{ target.remark.snapshot_date|date:"d/m/Y" }}{% endif %}</p>
  <div class="table-responsive">
    <table class="table table-sm align-middle text-end mb-3">
      <thead><tr><th class="text-start"></th><th>{% t "Vacation" %}</th><th>{% t "Permits" %}</th><th>{% t "Total" %}</th></tr></thead>
      <tbody>
        {% for label, b in points %}
        <tr>
          <td class="text-start"><div class="fw-semibold">{{ label|tr|capfirst }}</div><div class="small text-body-secondary">{{ b.at|date:"d/m/Y" }}</div></td>
          <td class="text-nowrap {% if b.vacation_hours < 0 %}text-danger{% endif %}">{{ b.vacation_hours|hours }} h</td>
          <td class="text-nowrap {% if b.permit_hours < 0 %}text-danger{% endif %}">{{ b.permit_hours|hours }} h</td>
          <td class="text-nowrap fw-semibold {% if b.total_hours < 0 %}text-danger{% endif %}">{{ b.total_hours|hours }} h</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="section-title">{% t "Next 6 months" %}</div>
  <div class="balance-chart">
    <canvas x-data x-init="Badgr.balanceChart($el, 'balance-chart-data')" data-chart-src="{% static 'attendance/vendor/chart.umd.min.js' %}"
            role="img" aria-label="{% t 'Next 6 months' %}"></canvas>
  </div>
  {{ chart|json_script:"balance-chart-data" }}
</div>