{# Fragment: Opportunities table + empty states + pagination.
   Rendered by initial page load ({% include %}) and SSE endpoint (patch_elements).
   Expects: opportunities (list[dict]), pagination (PaginationContext), config, search_query, selected_status
#}
<div id="opportunities-content">
  {% if opportunities %}
  <div class="ui-table-wrap">
    <table class="ui-table">
      <thead>
        {% set opp_cols = [
          ('type', 'Type', 'left'),
          ('table', 'Object', 'left'),
          ('severity', 'Impact', 'right'),
          ('workload', 'Workload', 'left'),
          ('cost', 'Query Cost', 'right'),
          ('savings', 'Savings', 'right'),
          ('occurrence', 'Occurrences', 'right'),
          ('detected', 'Detected', 'right'),
        ] %}
        <tr class="ui-table-head-row">
          {% for col_key, col_label, col_align in opp_cols %}
          <th class="ui-table-th ui-table-th-{{ col_align }} cursor-pointer select-none"
              data-on:click="$oppDirection = $oppSort === '{{ col_key }}' && $oppDirection === 'desc' ? 'asc' : 'desc'; $oppSort = '{{ col_key }}'; $oppPage = 1; @get('/projects/{{ config.id }}/filter-opportunities', {indicator: 'oppFetching'})">
            {{ col_label }}
          </th>
          {% endfor %}
          <th class="ui-table-th ui-table-th-center">Solution</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        {% for opp in opportunities %}
        <tr class="ui-table-row cursor-pointer"
            tabindex="0"
            role="link"
            aria-label="Open opportunity {{ opp.type | replace('_', ' ') }} for {{ opp.table_short }}"
            onclick="window.location='/projects/{{ config.id }}/opportunities/{{ opp.id }}'"
            onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.location='/projects/{{ config.id }}/opportunities/{{ opp.id }}'; }">
          <td class="ui-table-td">
            <span class="text-[13px] text-slate-800 dark:text-slate-200">{{ opp.type | replace('_', ' ') }}</span>
          </td>
          <td class="ui-table-td max-w-[260px]" title="{{ opp.affected_table }}">
            <span class="ui-cell-title truncate">
              {{ opp.dbt_model if opp.dbt_model != '—' else opp.table_short }}
            </span>
          </td>
          <td class="ui-table-td ui-table-td-right">
            <div class="flex flex-col items-end">
              <span class="ui-pill
                {% if opp.severity_score >= 70 %}ui-pill-danger
                {% elif opp.severity_score >= 40 %}ui-pill-warning
                {% else %}ui-pill-blue{% endif %}
              " title="Score: {{ opp.severity_score }}">{% if opp.severity_score >= 70 %}High{% elif opp.severity_score >= 40 %}Medium{% else %}Low{% endif %}</span>
            </div>
          </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_execution_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" title="Latest job workload not classified">
                <span class="ui-legend-dot bg-slate-300 dark:bg-slate-600"></span>
                Other
              </span>
            {% endif %}
          </td>
          <td class="ui-table-td ui-table-td-right whitespace-nowrap">
            {% if opp.query_cost_value is not none %}
              <div class="flex flex-col items-end leading-tight">
                <span class="ui-table-td-primary">{{ opp.query_cost_value | format_usd }}</span>
                <span class="ui-provenance-badge ui-provenance-observed mt-1">
                  {{ opp.query_cost_source_label }}
                </span>
              </div>
            {% else %}
              <span class="ui-table-caption mt-0">—</span>
            {% endif %}
          </td>
          <td class="ui-table-td ui-table-td-right whitespace-nowrap">
            {% if opp.optimized_cost_value is not none %}
              <div class="flex flex-col items-end leading-tight">
                <div class="whitespace-nowrap">
                  <span class="ui-table-td-primary">
                    {{ opp.optimized_cost_value | format_usd }}
                  </span>
                  {% if opp.optimized_delta_direction == 'down' %}
                    <span class="ui-table-caption mt-0 ml-1 text-emerald-600 dark:text-emerald-400">↓</span>
                  {% elif opp.optimized_delta_direction == 'up' %}
                    <span class="ui-table-caption mt-0 ml-1 text-red-600 dark:text-red-400">↑</span>
                  {% endif %}
                </div>
                <span class="ui-provenance-badge ui-provenance-validated mt-1">
                  {{ opp.optimized_cost_source_label }}
                </span>
              </div>
            {% elif opp.solution_job_status in ('queued', 'in_progress') %}
              <div class="flex flex-col items-end leading-tight">
                <span class="inline-flex items-center gap-1 text-slate-500 dark:text-slate-400">
                  <svg class="h-3.5 w-3.5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                  </svg>
                  <span class="ui-table-td-primary text-brand-700 dark:text-brand-200">Generating</span>
                </span>
                <span class="ui-provenance-badge ui-provenance-observed mt-1">
                  Solution {{ 'running' if opp.solution_job_status == 'in_progress' else 'queued' }}
                </span>
              </div>
            {% elif opp.solution_job_status == 'failed' %}
              <div class="flex flex-col items-end leading-tight">
                <span class="inline-flex items-center gap-1">
                  <span class="h-2 w-2 rounded-full bg-red-500"></span>
                  <span class="ui-table-td-primary text-red-600 dark:text-red-400">Failed</span>
                </span>
                <span class="ui-provenance-badge mt-1 text-red-500 dark:text-red-400">Click to retry</span>
              </div>
            {% elif opp.possible_savings_value is not none %}
              <div class="flex flex-col items-end leading-tight" title="{{ opp.possible_savings_source_label }}">
                <div class="whitespace-nowrap">
                  <span class="ui-table-td-primary">~{{ opp.possible_savings_value | format_usd }}</span>
                  <span class="ui-table-caption mt-0 ml-1 text-emerald-600 dark:text-emerald-400">↓</span>
                </div>
                <span class="ui-provenance-badge ui-provenance-estimated mt-1">
                  {{ opp.possible_savings_label }}
                </span>
              </div>
            {% else %}
              <span class="ui-table-caption mt-0">—</span>
            {% endif %}
          </td>
          <td class="ui-table-td ui-table-td-right">{{ opp.occurrence_count }}</td>
          <td class="ui-table-td ui-table-td-right">{{ opp.created_at }}</td>
          <td class="ui-table-td ui-table-td-center">
            {% if opp.solution_risk_level == 'low' %}
              <span class="ui-signal-chip text-emerald-700 dark:text-emerald-300" title="Low risk solution">
                <span class="ui-legend-dot bg-emerald-500"></span>
                Safe
              </span>
            {% elif opp.solution_risk_level == 'medium' %}
              <span class="ui-signal-chip text-amber-700 dark:text-amber-300" title="Medium risk solution">
                <span class="ui-legend-dot bg-amber-500"></span>
                Review
              </span>
            {% elif opp.solution_risk_level == 'high' %}
              <span class="ui-signal-chip text-red-700 dark:text-red-300" title="High risk solution">
                <span class="ui-legend-dot bg-red-500"></span>
                High risk
              </span>
            {% elif opp.solution_job_status in ('queued', 'in_progress') %}
              <span class="ui-signal-chip text-brand-700 dark:text-brand-200" title="Solution generation {{ 'running' if opp.solution_job_status == 'in_progress' else 'queued' }}">
                <span class="ui-legend-dot bg-brand-500 animate-pulse"></span>
                {{ 'Running' if opp.solution_job_status == 'in_progress' else 'Queued' }}
              </span>
            {% else %}
              <span class="ui-signal-chip" title="No solution generated yet">
                <span class="ui-legend-dot bg-slate-300 dark:bg-slate-600"></span>
                Pending
              </span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% include "project/_opportunities_pagination.html" %}
  {% else %}
  <div class="px-6 py-8 text-center">
    {% if search_query %}
      <p class="text-[14px] text-slate-600 dark:text-slate-300">No opportunities match your filter.</p>
    {% elif selected_status == 'active' and background_jobs_running %}
      <p class="text-[14px] text-brand-500 dark:text-brand-300 font-medium">Analysis in progress — opportunities and savings are still being updated.</p>
    {% elif selected_status == 'active' %}
      <p class="text-[14px] text-slate-600 dark:text-slate-300">No active opportunities detected.</p>
    {% else %}
      <p class="text-[14px] text-slate-600 dark:text-slate-300">No {{ selected_status }} opportunities found.</p>
    {% endif %}
  </div>
  {% endif %}
</div>