{# Sortable table header cell.

   Use together with `data-sortable-table="<id>"` on the wrapping <table>.
   `type` controls the comparator: `string` (case-insensitive locale),
   `number`, or `date` (ISO-8601). Cells in this column may set
   `data-sort-value="<raw>"` to override the displayed text. #}
{% macro th(label, key, type='string', align='left', extra='', th_class='px-4 py-2 font-medium') %}
    <th class="{{ th_class }} {% if align == 'right' %}text-right{% endif %} {{ extra }}"
        data-sort-key="{{ key }}" data-sort-type="{{ type }}">
        <button type="button"
                class="sort-btn group inline-flex items-baseline gap-1 uppercase tracking-wider {% if align == 'right' %}flex-row-reverse{% endif %}"
                aria-label="Sort by {{ label }}">
            <span>{{ label }}</span>
            <span class="sort-indicator text-slate-300 dark:text-slate-600" aria-hidden="true">↕</span>
        </button>
    </th>
{% endmacro %}