{# "Top Cost Drivers with Issues and Suggestions 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 at least one
   issue or one suggestion finding so any flagged row shows 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 and Suggestions Found</h2>
      <p class="ui-card-meta mt-1">
        Cached query executions with at least one detection finding, ranked by cost. Select a row to open its highest-impact opportunity; click any column header to sort.
      </p>
    </div>
    <p class="ui-card-meta">
      {{ pagination.total_items }} flagged of {{ "{:,}".format(totals.total_jobs) }} scanned
    </p>
  </div>

  {% if table_jobs %}
  <div class="ui-table-wrap">
    <table class="ui-table" style="table-layout: fixed; width: 100%;">
      <colgroup>
        <col style="width: 200px;" />  {# Dataset #}
        <col style="width: 200px;" />  {# Object #}
        <col style="width: 130px;" />  {# Spend #}
        <col style="width: 90px;" />   {# Bytes #}
        <col style="width: 90px;" />   {# Slot Time #}
        <col style="width: 80px;" />   {# Issues #}
        <col style="width: 100px;" />  {# Suggestions #}
        <col style="width: 100px;" />  {# Workload #}
        <col style="width: 80px;" />   {# Source #}
        <col style="width: 140px;" />  {# Run At #}
      </colgroup>
      <thead>
        <tr class="ui-table-head-row">
          {{ _sort_th('dataset', 'Dataset', 'left') }}
          {{ _sort_th('object', 'Object', '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('suggestions', 'Suggestions', '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 %}
        {# Each row links to the best /opportunities/{id} for that job
           when one exists (highest-severity issue, falling back to any
           improvement that lists the job — see ``opportunity_by_job``
           in findings.py). When no opportunity ID is available we
           still fall back to the listing filtered by the destination
           name so the click always lands somewhere useful. #}
        {% set _row_href = ('/opportunities/' ~ j.opportunity_id) if j.opportunity_id else
            ('/opportunities?search=' ~ ((j.destination_table or j.destination_short or '') | urlencode)) %}
        <tr class="ui-table-row cursor-pointer"
            tabindex="0"
            role="link"
            aria-label="Open job {{ j.short_label }}"
            onclick="window.location='{{ _row_href }}'"
            onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.location='{{ _row_href }}'; }">
          <td class="ui-table-td p-0">
            <div class="overflow-x-auto whitespace-nowrap px-3 py-2 max-w-[220px]" title="{{ j.destination_table }}">
              <span class="ui-cell-title font-mono text-sm">{{ j.destination_dataset }}</span>
            </div>
          </td>
          <td class="ui-table-td p-0">
            <div class="overflow-x-auto whitespace-nowrap px-3 py-2 max-w-[220px]" title="{{ j.destination_table }}">
              <span class="ui-cell-title font-mono text-sm">{{ j.destination_object }}</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 ui-table-td-right">
            {% if j.suggestion_count > 0 %}
              <span class="ui-pill ui-pill-warning">{{ j.suggestion_count }}</span>
            {% else %}
              <span class="text-slate-400 dark:text-slate-600">0</span>
            {% endif %}
          </td>
          <td class="ui-table-td">
            {# Mirrors the workload chip on /opportunities — ui-signal-chip
               + colour-coded ui-legend-dot — so visual grammar is
               consistent across both tables. #}
            {% if j.workload_kind == "build" %}
              <span class="ui-signal-chip text-brand-700 dark:text-brand-200" title="Latest job classified as build">
                <span class="ui-legend-dot bg-brand-500"></span>
                Build
              </span>
            {% elif j.workload_kind == "consumption" %}
              <span class="ui-signal-chip text-teal-700 dark:text-teal-300" title="Latest job classified as consumption">
                <span class="ui-legend-dot bg-teal-500"></span>
                Consumption
              </span>
            {% else %}
              <span class="ui-signal-chip text-slate-600 dark:text-slate-400" title="Latest job workload not classified as build or consumption">
                <span class="ui-legend-dot bg-slate-400 dark:bg-slate-500"></span>
                Query
              </span>
            {% endif %}
          </td>
          <td class="ui-table-td">
            {# Plain text indicator — same green colour for "dbt" so it
               still reads as positive context, but without the chip
               background that competed visually with the Issues /
               Suggestions count pills on the same row. #}
            {% if j.is_dbt_originated %}
              <span class="text-sm font-medium text-emerald-600 dark:text-emerald-400">dbt</span>
            {% else %}
              <span class="text-sm text-slate-500 dark:text-slate-400">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 scan window. Widen the lookback or relax the rule overrides.
    </p>
  {% endif %}
</div>