{# 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>
          {% set exp_cols = [
            ('project', 'Project', 'left'),
            ('table', 'Object', 'left'),
            ('type', 'Type', 'left'),
            ('workload', 'Workload', 'left'),
            ('cost', 'Query Cost', 'right'),
            ('savings', 'Savings', '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 bottom-full {{ 'right-0' if col_align == 'right' else 'left-0' }} mb-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 %}
            {% set _state_dir = 'desc' if (signals.sort == 'state' and signals.direction == 'asc') else 'asc' %}
            {% set _qs = pagination.query_string_without_sort_or_page %}
            {% set _sep = '&' if _qs else '' %}
            <th class="ui-table-th ui-table-th-center cursor-pointer select-none" style="min-width: 120px;"
                onclick="window.location='?{{ _qs }}{{ _sep }}sort=state&direction={{ _state_dir }}'">
              <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 bottom-full right-0 mb-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">
                    Severity reflects the rule's confidence × cost ceiling. Critical ≥80, High ≥50, Medium ≥20, Low &lt;20.
                  </span>
                </span>
                {# Renamed from "State" — audit has no solution lifecycle
                   to track (no Safe/Review/Generating). The column shows
                   the severity bucket pill instead, so call it that. #}
                <span>Severity{% if signals.sort == 'state' %} {{ '↓' if signals.direction == 'desc' else '↑' }}{% endif %}</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.project_name }}</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.dbt_model_name if opp.dbt_model_name else (opp.affected_table.split('.')[-1] if '.' in opp.affected_table else opp.affected_table) }}
                </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>
              <td class="ui-table-td ui-table-td-right whitespace-nowrap">
                {% if opp.possible_savings_value is not none %}
                  <span class="text-[13px] text-slate-800 dark:text-slate-200">~{{ opp.possible_savings_value | format_usd }}</span>
                  <span class="ui-table-caption ml-1 text-emerald-600 dark:text-emerald-400">↓</span>
                {% else %}
                  <span class="ui-table-caption mt-0">—</span>
                {% endif %}
              </td>
              {% 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">
                {# Audit derives State from severity bucket — same chip
                   grammar (ui-signal-chip + ui-legend-dot) the cloud
                   uses for solution risk levels. #}
                {% if opp.severity_bucket == 'critical' %}
                  <span class="ui-signal-chip whitespace-nowrap text-red-700 dark:text-red-300" title="Severity {{ opp.severity_score }} · critical impact">
                    <span class="ui-legend-dot bg-red-500"></span>
                    Critical · {{ opp.severity_score }}
                  </span>
                {% elif opp.severity_bucket == 'high' %}
                  <span class="ui-signal-chip whitespace-nowrap text-amber-700 dark:text-amber-300" title="Severity {{ opp.severity_score }} · high impact">
                    <span class="ui-legend-dot bg-amber-500"></span>
                    High · {{ opp.severity_score }}
                  </span>
                {% elif opp.severity_bucket == 'medium' %}
                  <span class="ui-signal-chip whitespace-nowrap text-slate-700 dark:text-slate-200" title="Severity {{ opp.severity_score }} · medium impact">
                    <span class="ui-legend-dot bg-slate-500"></span>
                    Medium · {{ opp.severity_score }}
                  </span>
                {% else %}
                  <span class="ui-signal-chip whitespace-nowrap text-slate-500 dark:text-slate-400" title="Severity {{ opp.severity_score }} · low impact">
                    <span class="ui-legend-dot bg-slate-300 dark:bg-slate-600"></span>
                    Low · {{ opp.severity_score }}
                  </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>