{# "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. #}
{% from "components/_sort_header.html" import sort_header %}
{% set _sort = sort_by | default('spend') %}
{% set _dir = sort_dir | default('desc') %}

<div class="ui-pane">
  {% from "components/_section_title.html" import section_title %}
  <div class="mb-4">
    {{ section_title(
         "Top Cost Drivers with Issues and Suggestions Found",
         description="Logical jobs with at least one detection finding, aggregated across all executions (by destination table for builds, by normalized query hash for consumption) and ranked by total cost. Select a row to open its highest-impact opportunity; click any column header to sort.",
         aside=(pagination.total_items ~ " flagged of " ~ "{:,}".format(totals.total_jobs) ~ " scanned")
    ) }}
  </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_header('dataset', 'Dataset', _sort, _dir) }}
          {{ sort_header('object', 'Object', _sort, _dir) }}
          {{ sort_header('spend', 'Spend', _sort, _dir) }}
          {{ sort_header('bytes', 'Bytes', _sort, _dir, align="right") }}
          {{ sort_header('slot_time', 'Slot Time (hrs)', _sort, _dir, align="right") }}
          {{ sort_header('issues', 'Issues', _sort, _dir, align="right") }}
          {{ sort_header('suggestions', 'Suggestions', _sort, _dir, align="right") }}
          {{ sort_header('workload', 'Workload', _sort, _dir) }}
          {{ sort_header('source', 'Source', _sort, _dir) }}
          {{ sort_header('run_at', 'Run At', _sort, _dir, align="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>
              <span class="ui-table-caption block">
                {% if j.statement_type %}{{ j.statement_type }}{% endif %}
                {% if j.execution_count and j.execution_count > 1 %}{% if j.statement_type %} · {% endif %}ran {{ j.execution_count }} times{% endif %}
              </span>
            </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="ui-bar-fill h-1.5 rounded-full bg-brand-500 dark:bg-brand-300" style="--bar-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">
            {% from "components/_signal_chip.html" import signal_chip %}
            {% if j.workload_kind == "build" %}
              {{ signal_chip("Build", color="brand", title="This logical job materialises data (CTAS, MERGE, INSERT, UPDATE, DELETE, TRUNCATE).") }}
            {% elif j.workload_kind == "consumption" %}
              {{ signal_chip("Consumption", color="teal", title="This logical job reads data (SELECT).") }}
            {% else %}
              {{ signal_chip("Query", color="slate", title="Workload couldn't be determined from this job's statement type - typically a CALL / scripting / no-DML statement.") }}
            {% 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>

  {# Dashboard's cost-drivers table groups by destination_table /
     query_hash - the same key the "Flagged Jobs" stat card counts. #}
  {% with pagination_item_noun = "flagged jobs" %}
    {% include "components/_pagination.html" %}
  {% endwith %}
  {% 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>