{# Vendored from packages/web/src/governor_web/templates/opportunities/index.html.
   The cloud's datastar/SSE auto-refresh + smart-view machinery is
   stripped (audit doesn't run a background worker), but the visual
   structure — page header, summary cards, filter controls, table,
   pagination — is preserved 1:1 via the partials in this directory. #}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">

  {# Page header — identical to cloud (eyebrow + title + Observed/Estimated/Validated tooltip) #}
  <div class="ui-page-header">
    <div class="flex flex-wrap items-start justify-between gap-3">
      <div>
        <p class="ui-eyebrow">Recommendation Workspace</p>
        <div class="mt-2 flex items-center gap-2">
          <h1 class="ui-page-title mt-0">Opportunities</h1>
          <details class="ui-help">
            <summary class="ui-help-button" aria-label="How to read this page">!</summary>
            <div class="ui-help-panel ui-help-panel-left">
              <p><span class="font-medium text-slate-900 dark:text-slate-100">Observed</span> uses the latest known cost basis.</p>
              <p class="mt-2"><span class="font-medium text-amber-700 dark:text-amber-300">Estimated</span> uses heuristic or workload savings.</p>
              <p class="mt-2"><span class="font-medium text-emerald-700 dark:text-emerald-300">Validated</span> uses dry-run confirmation.</p>
            </div>
          </details>
        </div>
        <p class="ui-page-subtitle">
          BigQuery spend analysis for
          <code class="font-mono">{{ config.gcp_project_id }}</code> /
          <code class="font-mono">{{ config.bigquery_region }}</code>
        </p>
      </div>
    </div>
  </div>

  {# Summary cards #}
  {% include "opportunities/_summary_cards.html" %}

  {# Filter controls #}
  <div class="mt-6 mb-4 ui-surface p-4">
    {% include "opportunities/_filter_controls.html" %}
  </div>

  {# Table + pagination #}
  <div class="mt-4 ui-surface overflow-hidden">
    {% include "opportunities/_table.html" %}
  </div>

</section>
{% endblock %}