{# Spec 149 — Top Failed Jobs by Slot Wasted. Same `ui-pane` /
   `ui-table` shell as _cost_drivers.html so the dashboard reads as
   one continuous surface. Renders only when failed_drivers is
   non-empty so clean warehouses don't see the section at all. #}
{% if failed_drivers and failed_drivers | length > 0 %}
<div class="ui-pane">
  <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div>
      <h2 class="ui-section-title">Top Failed Jobs by Slot Wasted</h2>
      <p class="ui-card-meta mt-1">
        Failed query executions in the scan window &middot;
        ordered by slot time wasted descending &middot;
        click any row to inspect the failure
      </p>
    </div>
    <a href="/failures" class="text-sm text-brand-500 dark:text-brand-300 hover:underline whitespace-nowrap">View all failures &rarr;</a>
  </div>

  <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;" />  {# Reason #}
        <col style="width: 100px;" />  {# Executions #}
        <col style="width: 130px;" />  {# Slot Wasted #}
        <col style="width: 140px;" />  {# Last Failed #}
      </colgroup>
      <thead>
        <tr class="ui-table-head-row">
          <th class="ui-table-th ui-table-th-left">Dataset</th>
          <th class="ui-table-th ui-table-th-left">Object</th>
          <th class="ui-table-th ui-table-th-left">Reason</th>
          <th class="ui-table-th ui-table-th-right">Executions</th>
          <th class="ui-table-th ui-table-th-right">Slot Wasted</th>
          <th class="ui-table-th ui-table-th-right">Last Failed</th>
        </tr>
      </thead>
      <tbody>
        {% for row in failed_drivers %}
        <tr class="ui-table-row cursor-pointer"
            tabindex="0"
            role="link"
            aria-label="Open failure detail for {{ row.destination_object or row.hash_key }}"
            onclick="window.location='/failures/{{ row.hash_key }}'"
            onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.location='/failures/{{ row.hash_key }}'; }">
          <td class="ui-table-td">
            <span class="block truncate text-[13px] text-slate-800 dark:text-slate-200">{{ row.destination_dataset or '—' }}</span>
          </td>
          <td class="ui-table-td" title="{{ row.destination_table }}">
            <span class="block truncate text-[13px] text-slate-800 dark:text-slate-200">{{ row.destination_short }}</span>
          </td>
          <td class="ui-table-td">
            {% if row.last_error_reason %}
              {# Visible label is the humanised reason ("Invalid query"
                 instead of "invalidQuery"); tooltip shows the live
                 BigQuery error message when present, else the curated
                 description, else the raw camelCase code so it stays
                 grep-discoverable. #}
              <span class="ui-signal-chip text-rose-700 dark:text-rose-300"
                    title="{{ row.last_error_message or (row.last_error_reason | bq_reason_description) or row.last_error_reason }}">
                <span class="ui-legend-dot bg-rose-500"></span>
                {{ row.last_error_reason | bq_reason_humanize }}
              </span>
            {% else %}
              <span class="ui-table-caption mt-0">—</span>
            {% endif %}
          </td>
          <td class="ui-table-td ui-table-td-right whitespace-nowrap">
            <span class="text-[13px] font-mono text-slate-800 dark:text-slate-200">{{ "{:,}".format(row.execution_count) }}</span>
          </td>
          <td class="ui-table-td ui-table-td-right whitespace-nowrap">
            <span class="text-[13px] text-rose-600 dark:text-rose-300">{{ row.total_slot_human }}</span>
          </td>
          <td class="ui-table-td ui-table-td-right whitespace-nowrap">
            {{ row.last_failed_at.strftime("%d/%m/%Y") if row.last_failed_at else "—" }}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}