{# Click-to-sort table header component.

   Replaces the open-coded inline header markup that existed in
   dashboard cost-drivers, opportunities table, failures table.

   Parameters:
     - col           (str) sort key name (becomes ``?sort=<col>``)
     - label         (str) visible header text
     - current_sort  (str) the currently-active sort key
     - current_dir   (str) "asc" or "desc"
     - align         (str) ui-table-th alignment: "left" | "right" | "center"
     - extra         (str) extra Tailwind classes on the ``<th>``
     - base_qs       (str) optional query-string prefix to preserve
                     filter state (eg. pagination.
                     query_string_without_sort_or_page); when absent
                     the ``?sort=&direction=&page=1`` grammar matches
                     the dashboard convention.
     - tooltip       (str, optional) info-tooltip text for the header.
                     When set, the cell renders an info icon next to
                     the label and a hover-revealed tooltip - this is
                     how Query Cost / Slot Wasted columns explain
                     their derivation.
#}
{%- macro sort_header(col, label, current_sort, current_dir, align="left", extra="", base_qs="", tooltip=None) -%}
  {%- set _is_active = (current_sort == col) -%}
  {%- set _next_dir = "asc" if (_is_active and current_dir == "desc") else "desc" -%}
  {%- set _arrow = "↓" if (_is_active and current_dir == "desc") else ("↑" if _is_active else "") -%}
  {%- set _qs_prefix = (base_qs ~ "&") if base_qs else "" -%}
  {%- set _href = "?" ~ _qs_prefix ~ "sort=" ~ col ~ "&direction=" ~ _next_dir ~ "&page=1" -%}
  <th class="ui-table-th ui-table-th-{{ align }} {{ extra }} cursor-pointer select-none"
      onclick="window.location='{{ _href }}'">
    {%- if tooltip %}
    <div class="flex flex-col {{ 'items-end' if align == 'right' else 'items-start' }} gap-0.5">
      <span class="relative group/tip">
        <svg class="h-3.5 w-3.5 text-slate-400 dark:text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
        </svg>
        <span class="pointer-events-none absolute top-full {{ 'right-0' if align == 'right' else 'left-0' }} mt-2 w-52 rounded-md bg-slate-800 dark:bg-slate-700 px-3 py-2 text-sm font-normal text-white text-left opacity-0 transition-opacity group-hover/tip:opacity-100 z-50 shadow-lg">
          {{ tooltip }}
        </span>
      </span>
      <span>{{ label }}{% if _arrow %} {{ _arrow }}{% endif %}</span>
    </div>
    {%- else %}
    <a href="{{ _href }}"
       class="inline-flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200{% if _is_active %} text-slate-900 dark:text-slate-100{% endif %}">
      <span>{{ label }}</span>
      {%- if _arrow %}
      <span class="text-brand-500 dark:text-brand-300">{{ _arrow }}</span>
      {%- endif %}
    </a>
    {%- endif %}
  </th>
{%- endmacro %}