{% load list_tags %}
{% comment %}
Sortable table column header — renders a `<th>` with a link that toggles
the `?sort=` querystring param for the given key. Pair with views that use
`apps.core.lists.SortableListMixin`.

Args:
  key      (str)        — the param value (must match a sortable_fields key)
  label    (str)        — visible header text
  align    (str|None)   — "right" for numeric columns; default left
  numeric  (bool)       — adds tabular-nums hint to the th class
  th_class (str|None)   — extra classes appended to the `<th>` element

Requires `request.resolver_match.kwargs` available; `request` in context.
{% endcomment %}
<th scope="col"
    class="{% if align == 'right' %}text-right {% endif %}{% if numeric %}tabular-nums {% endif %}{{ th_class|default:'' }}">
  <a href="{% sort_url key %}"
     class="sortable-th {% if sort == key %}sortable-th--active{% endif %}">
    <span>{{ label }}</span>
    <svg class="sortable-th__arrow" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
      {% if sort == key and sort_dir == 'desc' %}
        <path stroke-linecap="round" stroke-linejoin="round" d="M3 5l3 3 3-3"/>
      {% else %}
        <path stroke-linecap="round" stroke-linejoin="round" d="M3 7l3-3 3 3"/>
      {% endif %}
    </svg>
  </a>
</th>