{# Vendored from packages/web/src/governor_web/templates/opportunities/_table.html.
   Audit changes:
   - Column-header click → plain <a> with ?sort=...&direction=... so
     the table sorts via standard GET round-trip (no SSE).
   - Local-runtime branches kept (audit IS local) — so the
     Occurrences column doesn't render and the workload chip falls
     back to "Unclassified" when the kind is unknown.
   - Row click target: /opportunities/{id} (audit has no /projects/...
     namespace; everything is single-tenant).
   - State column: derived from severity bucket (audit has no
     solution_risk_level / recommendation_state). Same chip grammar
     (ui-signal-chip + ui-legend-dot). #}
<div id="explorer-content">
  {% if opportunities and opportunities | length > 0 %}
    <div class="ui-table-wrap">
      <table class="ui-table">
        <thead>
          {# 'Savings' column dropped in v0.0.16 — audit doesn't run
             dry-runs and refuses to display the existing rules' hard-
             coded percentage savings. See _DEFAULT_SORT comment in
             routes/opportunities.py. #}
          {% set exp_cols = [
            ('dataset', 'Dataset', 'left'),
            ('table', 'Object', 'left'),
            ('type', 'Type', 'left'),
            ('workload', 'Workload', 'left'),
            ('cost', 'Query Cost', 'right'),
          ] %}
          {% if not local_runtime_mode %}
            {% set exp_cols = exp_cols + [('occurrence', 'Occurrences', 'right')] %}
          {% endif %}
          {% set exp_cols = exp_cols + [('age', 'Last Detected', 'right')] %}
          <tr class="ui-table-head-row">
            {% for col_key, col_label, col_align in exp_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 onclick=window.location=…>` instead of wrapping in an
               `<a>` so the absolute-positioned tooltip doesn't get
               clipped by the anchor's own bounding box. Same column
               click-to-sort grammar the cloud uses. #}
            <th class="ui-table-th ui-table-th-{{ col_align }} cursor-pointer select-none"
                onclick="window.location='{{ _href }}'">
              {% if col_key in ('cost', 'savings') %}
              <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">
                    {% if col_key == 'cost' %}
                    Cost from the most recent BigQuery job execution, dry-run estimate, or detection heuristic.
                    {% else %}
                    Estimated per-run savings from solution dry-runs or detection heuristics.
                    {% endif %}
                  </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 %}
            <th class="ui-table-th ui-table-th-center select-none" style="min-width: 140px;">
              <div class="flex flex-col items-center 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 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">
                    Number of SQL-rewrite improvements that apply to the same query as this issue. Click into the row to see each diff.
                  </span>
                </span>
                <span>Suggestions</span>
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          {% for opp in opportunities %}
            <tr class="ui-table-row cursor-pointer"
                tabindex="0"
                role="link"
                aria-label="Open opportunity {{ opp.opportunity_type | replace('_', ' ') }} for {{ opp.affected_table.split('.')[-1] if '.' in opp.affected_table else opp.affected_table }}"
                onclick="window.location='/opportunities/{{ opp.id }}'"
                onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.location='/opportunities/{{ opp.id }}'; }">
              <td class="ui-table-td max-w-[180px]">
                <span class="block truncate text-[13px] text-slate-800 dark:text-slate-200">{{ opp.affected_dataset }}</span>
              </td>
              <td class="ui-table-td max-w-[260px]" title="{{ opp.affected_table }}">
                <span class="block truncate text-[13px] text-slate-800 dark:text-slate-200">
                  {{ opp.affected_object }}
                </span>
              </td>
              <td class="ui-table-td">
                <span class="text-[13px] text-slate-800 dark:text-slate-200">{{ opp.opportunity_type | replace('_', ' ') }}</span>
              </td>
              <td class="ui-table-td">
                {% if opp.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 opp.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 opportunity, so Governor does not infer a workload type">
                    <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">
                {% if opp.query_cost_value is not none %}
                  <span class="text-[13px] text-slate-800 dark:text-slate-200">{{ opp.query_cost_value | format_usd }}</span>
                {% else %}
                  <span class="ui-table-caption mt-0">—</span>
                {% endif %}
              </td>
              {# Savings cell removed in v0.0.16. #}
              {% if not local_runtime_mode %}
              <td class="ui-table-td ui-table-td-right">{{ opp.occurrence_count }}</td>
              {% endif %}
              <td class="ui-table-td ui-table-td-right whitespace-nowrap">
                {{ opp.last_detected_at.strftime("%d/%m/%Y") if opp.last_detected_at else (opp.created_at.strftime("%d/%m/%Y") if opp.created_at else "—") }}
              </td>
              <td class="ui-table-td ui-table-td-center whitespace-nowrap">
                {# Suggestions count — replaces the old severity bucket
                   pill. Shows how many SQL-rewrite improvements apply
                   to the same query as this issue. The detail page
                   renders each as a green/red diff. #}
                {% set _sugg = opp.improvements_count or 0 %}
                {% set _sugg_diff = opp.improvements_with_diff_count or 0 %}
                {% if _sugg == 0 %}
                  <span class="ui-signal-chip whitespace-nowrap text-slate-500 dark:text-slate-400" title="No SQL-rewrite improvements apply to this issue's query">
                    <span class="ui-legend-dot bg-slate-300 dark:bg-slate-600"></span>
                    None
                  </span>
                {% elif _sugg_diff > 0 %}
                  <span class="ui-signal-chip whitespace-nowrap text-emerald-700 dark:text-emerald-300" title="{{ _sugg }} suggestion(s); {{ _sugg_diff }} include a deterministic diff">
                    <span class="ui-legend-dot bg-emerald-500"></span>
                    {{ _sugg }} suggested · {{ _sugg_diff }} with diff
                  </span>
                {% else %}
                  <span class="ui-signal-chip whitespace-nowrap text-amber-700 dark:text-amber-300" title="{{ _sugg }} suggestion(s); no deterministic diff yet">
                    <span class="ui-legend-dot bg-amber-500"></span>
                    {{ _sugg }} suggested
                  </span>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

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