{# Vendored from opportunities/_table.html. Same wrapper, same
   ui-table-head-row + ui-table-row grammar, same click-to-sort
   header markup, same ui-signal-chip + ui-legend-dot chip styles.
   Deltas vs the opportunities table:
     - column set swaps "Issue" → "Reason", "Query Cost" →
       "Slot Wasted", "Last Detected" → "Last Failed", and drops
       "Partition / Cluster" (irrelevant on failures);
     - row click target → /failures/{hash_key};
     - empty-state copy mirrors opportunities. #}
<div id="explorer-content">
  {% if rows and rows | length > 0 %}
    <div class="ui-table-wrap">
      <table class="ui-table">
        <thead>
          {% set fail_cols = [
            ('dataset', 'Dataset', 'left'),
            ('table', 'Object', 'left'),
            ('author', 'Author', 'left'),
            ('reason', 'Reason', 'left'),
            ('workload', 'Workload', 'left'),
            ('slot', 'Slot Wasted', 'right'),
          ] %}
          {% if not local_runtime_mode %}
            {% set fail_cols = fail_cols + [('occurrence', 'Occurrences', 'right')] %}
          {% endif %}
          {% set fail_cols = fail_cols + [('age', 'Last Failed', 'right')] %}
          {% set fail_cols = fail_cols + [('suggestions', 'Suggestions', 'center')] %}
          <tr class="ui-table-head-row">
            {% for col_key, col_label, col_align in fail_cols %}
            {% set _next_dir = 'asc' if (signals.sort == col_key and signals.direction == 'desc') else 'desc' %}
            {% set _qs = pagination.query_string_without_sort_or_page %}
            {% set _sep = '&' if _qs else '' %}
            {% set _href = '?' ~ _qs ~ _sep ~ 'sort=' ~ col_key ~ '&direction=' ~ _next_dir %}
            <th class="ui-table-th ui-table-th-{{ col_align }} cursor-pointer select-none"
                onclick="window.location='{{ _href }}'">
              {% if col_key == 'slot' %}
              <div class="flex flex-col {{ 'items-end' if col_align == 'right' else 'items-start' }} gap-0.5">
                <span class="relative group/tip">
                  <svg class="h-3.5 w-3.5 text-slate-400 dark:text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                  </svg>
                  <span class="pointer-events-none absolute top-full {{ 'right-0' if col_align == 'right' else 'left-0' }} mt-2 w-52 rounded-md bg-slate-800 dark:bg-slate-700 px-3 py-2 text-xs font-normal text-white text-left opacity-0 transition-opacity group-hover/tip:opacity-100 z-50 shadow-lg">
                    Sum of total_slot_ms across every failed execution of this query body.
                  </span>
                </span>
                <span>{{ col_label }}{% if signals.sort == col_key %} {{ '↓' if signals.direction == 'desc' else '↑' }}{% endif %}</span>
              </div>
              {% else %}
              {{ col_label }}{% if signals.sort == col_key %} {{ '↓' if signals.direction == 'desc' else '↑' }}{% endif %}
              {% endif %}
            </th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for row in rows %}
            <tr class="ui-table-row cursor-pointer"
                tabindex="0"
                role="link"
                aria-label="Open failure detail for {{ row.affected_object or row.affected_table }}"
                onclick="window.location='/failures/{{ row.id }}'"
                onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.location='/failures/{{ row.id }}'; }">
              <td class="ui-table-td max-w-[180px]">
                <span class="block truncate text-[13px] text-slate-800 dark:text-slate-200">{{ row.affected_dataset }}</span>
              </td>
              <td class="ui-table-td max-w-[260px]" title="{{ row.affected_table }}">
                <span class="block truncate text-[13px] text-slate-800 dark:text-slate-200">
                  {{ row.affected_object }}
                </span>
              </td>
              <td class="ui-table-td max-w-[200px]" title="{{ row.author_email or 'unknown' }}">
                {% if row.author_email %}
                  <span class="block truncate text-[13px] text-slate-700 dark:text-slate-300 font-mono">{{ row.author_email }}</span>
                {% else %}
                  <span class="ui-table-caption mt-0">—</span>
                {% endif %}
              </td>
              <td class="ui-table-td max-w-[260px]">
                {% if row.last_error_reason %}
                  <span class="ui-signal-chip text-rose-700 dark:text-rose-300" title="{{ row.last_error_message or row.last_error_reason }}">
                    <span class="ui-legend-dot bg-rose-500"></span>
                    {{ row.last_error_reason }}
                  </span>
                {% else %}
                  <span class="ui-table-caption mt-0">—</span>
                {% endif %}
              </td>
              <td class="ui-table-td">
                {% if row.query_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 row.query_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>
                {% elif local_runtime_mode %}
                  <span class="ui-signal-chip text-slate-600 dark:text-slate-400" title="No exact local run job match was found for this group">
                    <span class="ui-legend-dot bg-slate-400 dark:bg-slate-500"></span>
                    Unclassified
                  </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 ui-table-td-right whitespace-nowrap">
                <span class="text-[13px] text-slate-800 dark:text-slate-200">{{ row.slot_wasted_human }}</span>
              </td>
              {% if not local_runtime_mode %}
              <td class="ui-table-td ui-table-td-right">{{ row.occurrence_count }}</td>
              {% endif %}
              <td class="ui-table-td ui-table-td-right whitespace-nowrap">
                {{ row.last_detected_at.strftime("%d/%m/%Y") if row.last_detected_at else "—" }}
              </td>
              <td class="ui-table-td ui-table-td-center whitespace-nowrap">
                {% set _sugg = row.table_suggestion_count or 0 %}
                {% if _sugg > 0 %}
                  <span class="ui-signal-chip whitespace-nowrap text-emerald-700 dark:text-emerald-300" title="{{ _sugg }} suggestion rule(s) fired across this query body — open the row to see each diff">
                    <span class="ui-legend-dot bg-emerald-500"></span>
                    {{ _sugg }} suggested
                  </span>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    {% include "failures/_pagination.html" %}
  {% else %}
    <p class="ui-type-body-sm text-slate-500 dark:text-slate-400 py-8 text-center">
      No failures match your filters
    </p>
  {% endif %}
</div>