{# "Top Cost Drivers with Issues Found" — same `ui-table` style as
   governor_web/_cost_drivers_table.html, with a server-side click-to-sort
   engine: each header is an <a href="?sort=COL&direction=DIR&page=1">
   that flips direction if the column is already active. Filters to
   jobs with ``issue_count > 0`` so only flagged rows show up. #}
{% set _sort = sort_by | default('spend') %}
{% set _dir = sort_dir | default('desc') %}

{# Macro: render a sortable column header. Toggling the active column
   flips direction; switching columns resets to desc. Always returns
   page=1 so users don't end up past the new tail. #}
{% macro _sort_th(col, label, align="left", extra="") %}
  {% set is_active = (_sort == col) %}
  {% set next_dir = 'asc' if (is_active and _dir == 'desc') else 'desc' %}
  {% set arrow = '↓' if (is_active and _dir == 'desc') else ('↑' if is_active else '') %}
  <th class="ui-table-th ui-table-th-{{ align }} {{ extra }} cursor-pointer select-none">
    <a href="?sort={{ col }}&amp;direction={{ next_dir }}&amp;page=1"
       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>
  </th>
{% endmacro %}

<div class="ui-pane">
  <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div>
      <h2 class="ui-section-title">Top Cost Drivers with Issues Found</h2>
      <p class="ui-card-meta mt-1">
        Jobs flagged by detection rules &middot;
        click any column header to sort &middot;
        click a row to view the full SQL
      </p>
    </div>
    <p class="ui-card-meta">
      {{ pagination.total_items }} flagged of {{ "{:,}".format(totals.total_jobs) }} cached
    </p>
  </div>

  {% if table_jobs %}
  <div class="ui-table-wrap">
    <table class="ui-table" style="table-layout: fixed; width: 100%;">
      <colgroup>
        <col style="width: 320px;" />
        <col style="width: 130px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
        <col style="width: 80px;" />
        <col style="width: 110px;" />
        <col style="width: 80px;" />
        <col style="width: 140px;" />
      </colgroup>
      <thead>
        <tr class="ui-table-head-row">
          {{ _sort_th('destination', 'Destination', 'left') }}
          {{ _sort_th('spend', 'Spend', 'left') }}
          {{ _sort_th('bytes', 'Bytes', 'right') }}
          {{ _sort_th('slot_time', 'Slot Time (hrs)', 'right') }}
          {{ _sort_th('issues', 'Issues', 'right') }}
          {{ _sort_th('workload', 'Workload', 'left') }}
          {{ _sort_th('source', 'Source', 'left') }}
          {{ _sort_th('run_at', 'Run At', 'right') }}
        </tr>
      </thead>
      <tbody>
        {% for j in table_jobs %}
        <tr class="ui-table-row cursor-pointer"
            tabindex="0"
            role="link"
            aria-label="Open job {{ j.short_label }}"
            onclick="window.location='/opportunities?search={{ (j.destination_table or j.destination_short or '') | urlencode }}'"
            onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.location='/opportunities?search={{ (j.destination_table or j.destination_short or '') | urlencode }}'; }">
          <td class="ui-table-td p-0">
            <div class="overflow-x-auto whitespace-nowrap px-3 py-2 max-w-[320px]" title="{{ j.destination_table }}">
              <span class="ui-cell-title font-mono text-sm">{{ j.destination_short }}</span>
              {% if j.statement_type %}
                <span class="ui-table-caption block">{{ j.statement_type }}</span>
              {% endif %}
            </div>
          </td>
          <td class="ui-table-td">
            <div class="flex items-center gap-2">
              <span class="text-slate-900 dark:text-slate-100 whitespace-nowrap">{{ j.cost_usd | format_usd }}</span>
              <span class="ui-table-caption whitespace-nowrap mt-0">{{ "%.1f" | format(j.cost_share_pct) }}%</span>
            </div>
            <div class="mt-1 h-1.5 w-full rounded-full bg-slate-100 dark:bg-slate-800">
              <div class="h-1.5 rounded-full bg-brand-500 dark:bg-brand-300" style="width: {{ [j.cost_share_pct, 100] | min }}%"></div>
            </div>
          </td>
          <td class="ui-table-td ui-table-td-right whitespace-nowrap font-mono text-sm">{{ j.bytes_processed | format_bytes }}</td>
          <td class="ui-table-td ui-table-td-right whitespace-nowrap font-mono text-sm">{{ "%.1f" | format((j.slot_time_ms or 0) / 3600000) }}</td>
          <td class="ui-table-td ui-table-td-right">
            {% if j.issue_count > 0 %}
              <span class="ui-pill ui-pill-danger">{{ j.issue_count }}</span>
            {% else %}
              <span class="text-slate-400 dark:text-slate-600">0</span>
            {% endif %}
          </td>
          <td class="ui-table-td">
            {% if j.workload_kind == "build" %}
              <span class="ui-pill ui-pill-blue">build</span>
            {% elif j.workload_kind == "consumption" %}
              <span class="ui-pill ui-pill-success">consumption</span>
            {% else %}
              <span class="ui-pill ui-pill-neutral">other</span>
            {% endif %}
          </td>
          <td class="ui-table-td">
            {% if j.is_dbt_originated %}
              <span class="ui-pill ui-pill-success">dbt</span>
            {% else %}
              <span class="ui-pill ui-pill-neutral">other</span>
            {% endif %}
          </td>
          <td class="ui-table-td ui-table-td-right whitespace-nowrap text-sm text-slate-500 dark:text-slate-400">
            {% if j.creation_time %}
              {{ j.creation_time.strftime("%Y-%m-%d %H:%M") }} UTC
            {% else %}
              —
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% include "dashboard/_pagination.html" %}
  {% else %}
    <p class="text-sm text-slate-500 dark:text-slate-400 py-4 text-center">
      No flagged jobs in the cached scan. Run the detection engine over more queries or relax the rule overrides.
    </p>
  {% endif %}
</div>