{# "Cost Drivers by Spend" - 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. Defaults to every logical job in the
   scan; the Finding filter can narrow to rows with issues/suggestions. #}
{% from "components/_sort_header.html" import sort_header %}
{% set _sort = sort_by | default('spend') %}
{% set _dir = sort_dir | default('desc') %}
{% set _sort_base_qs = pagination.query_string_without_sort_or_page if pagination.query_string_without_sort_or_page is defined else "" %}
{% set _total_flagged = total_flagged_jobs if total_flagged_jobs is defined else pagination.total_items %}
{% set _total_cost_drivers = total_cost_driver_jobs if total_cost_driver_jobs is defined else pagination.total_items %}
{% set _table_aside = (pagination.total_items ~ " shown of " ~ _total_cost_drivers ~ " logical jobs · " ~ _total_flagged ~ " with findings · " ~ "{:,}".format(totals.total_jobs) ~ " scanned jobs") if pagination.total_items != _total_cost_drivers else (_total_cost_drivers ~ " logical jobs · " ~ _total_flagged ~ " with findings · " ~ "{:,}".format(totals.total_jobs) ~ " scanned jobs") %}

<div class="ui-pane">
  {% from "components/_section_title.html" import section_title %}
  <div class="mb-4">
    {{ section_title(
         cost_drivers_title | default("Cost Drivers by Spend"),
         description="Every logical job in the scan window, aggregated across executions (by destination table for builds, by normalized query hash for consumption) and ranked by total cost. Rows with findings open the highest-impact opportunity; clean rows open the representative job.",
         aside=_table_aside
    ) }}
  </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, base_qs=_sort_base_qs) }}
          {{ sort_header('object', 'Object', _sort, _dir, base_qs=_sort_base_qs) }}
          {{ sort_header('spend', 'Spend', _sort, _dir, base_qs=_sort_base_qs) }}
          {{ sort_header('bytes', 'Bytes', _sort, _dir, align="right", base_qs=_sort_base_qs) }}
          {{ sort_header('slot_time', 'Slot Time (hrs)', _sort, _dir, align="right", base_qs=_sort_base_qs) }}
          {{ sort_header('issues', 'Issues', _sort, _dir, align="right", base_qs=_sort_base_qs) }}
          {{ sort_header('suggestions', 'Suggestions', _sort, _dir, align="right", base_qs=_sort_base_qs) }}
          {{ sort_header('workload', 'Workload', _sort, _dir, base_qs=_sort_base_qs) }}
          {{ sort_header('source', 'Source', _sort, _dir, base_qs=_sort_base_qs) }}
          {{ sort_header('run_at', 'Run At', _sort, _dir, align="right", base_qs=_sort_base_qs) }}
        </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). Clean rows open the representative job. #}
        {% set _row_href = ('/opportunities/' ~ j.opportunity_id) if j.opportunity_id else
            (('/jobs/' ~ j.job_id) if j.job_id else ('/cost-analysis?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>

  {# Cost-driver rows group by destination_table / query_hash. #}
  {% with pagination_item_noun = "cost drivers" %}
    {% include "components/_pagination.html" %}
  {% endwith %}
  {% else %}
    <p class="text-sm text-slate-500 dark:text-slate-400 py-4 text-center">
      No cost drivers match your filters.
    </p>
  {% endif %}
</div>