{# Vendored layout from packages/web/src/governor_web/templates/project/opportunity_detail.html
   (the page governor-cli boots locally for /opportunities/{id}). The
   solution / PR / dry-run / shadow / clearing surfaces are deliberately
   absent — audit is read-only and never generates solutions — but the
   page header, breadcrumb, ui-metric-grid stat strip, evidence section,
   and source-SQL viewer mirror the cloud's grammar 1:1. #}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
<div class="space-y-6">
  <div class="ui-breadcrumb">
    <a href="/opportunities">Opportunities</a>
    <span>›</span>
    <span class="ui-breadcrumb-current">
      {% if row.dbt_model_name %}{{ row.dbt_model_name }}{% else %}{{ row.opportunity_type | replace('_', ' ') }}{% endif %}
    </span>
  </div>

  <div class="ui-surface p-6 md:p-7 space-y-6">
    <div class="flex flex-wrap items-start justify-between gap-4">
      <div>
        <p class="ui-eyebrow">Recommendation</p>
        <div class="mt-2 flex items-center gap-2">
          {% if row.dbt_model_name %}
          <h1 class="ui-page-title mt-0"><code class="font-mono">{{ row.dbt_model_name }}</code></h1>
          {% else %}
          <h1 class="ui-page-title mt-0">{{ row.affected_table }}</h1>
          {% endif %}
        </div>
        <div class="mt-3 flex flex-wrap items-center gap-2">
          <span class="ui-pill ui-pill-neutral">{{ row.opportunity_type | replace('_', ' ') }}</span>
          {% if row.severity_bucket == 'critical' %}
            <span class="ui-pill ui-pill-danger">Severity {{ row.severity_score }} · critical</span>
          {% elif row.severity_bucket == 'high' %}
            <span class="ui-pill ui-pill-warning">Severity {{ row.severity_score }} · high</span>
          {% elif row.severity_bucket == 'medium' %}
            <span class="ui-pill ui-pill-neutral">Severity {{ row.severity_score }} · medium</span>
          {% else %}
            <span class="ui-pill ui-pill-neutral">Severity {{ row.severity_score }} · low</span>
          {% endif %}
          {% if row.dbt_model_name %}
            <span class="ui-signal-chip text-emerald-700 dark:text-emerald-300">
              <span class="ui-legend-dot bg-emerald-500"></span>
              dbt
            </span>
          {% endif %}
        </div>
        <p class="ui-card-meta mt-3">
          {% if row.dbt_model_name %}
            <code class="font-mono text-[13px]">{{ row.affected_table }}</code>
          {% else %}
            {{ row.opportunity_type | replace('_', ' ') }}
          {% endif %}
        </p>
      </div>
    </div>

    {# Stat strip — same ui-metric-grid grammar as cloud #}
    <div class="ui-metric-grid">
      <div class="ui-metric-card">
        <p class="ui-card-label">Type</p>
        <p class="ui-metric-value">{{ row.opportunity_type | replace('_', ' ') }}</p>
      </div>
      <div class="ui-metric-card">
        <p class="ui-card-label">Observed Cost</p>
        <p class="ui-metric-value">{{ row.query_cost_value | format_usd }}</p>
        <div class="mt-2">
          <span class="ui-provenance-badge ui-provenance-observed">Latest Job</span>
        </div>
      </div>
      <div class="ui-metric-card">
        <p class="ui-card-label">Workload</p>
        <p class="ui-metric-value">
          {% if row.query_workload_kind == 'build' %}Build
          {% elif row.query_workload_kind == 'consumption' %}Consumption
          {% else %}Unclassified{% endif %}
        </p>
      </div>
      <div class="ui-metric-card">
        <p class="ui-card-label">Recommendation State</p>
        <p class="ui-metric-value">
          {% if row.severity_bucket == 'critical' %}Critical
          {% elif row.severity_bucket == 'high' %}High
          {% elif row.severity_bucket == 'medium' %}Medium
          {% else %}Low{% endif %}
        </p>
        <div class="mt-2">
          <span class="ui-provenance-badge ui-provenance-estimated">detection heuristic</span>
        </div>
      </div>
    </div>
  </div>

  {# Why this fired + Recommended fix — mirror the cloud's "explanation" + "Solution" pair #}
  <div class="grid gap-6 lg:grid-cols-2">
    <div class="ui-surface p-6">
      <h2 class="ui-section-title">Why this fired</h2>
      <p class="mt-3 text-sm text-slate-700 dark:text-slate-200 leading-relaxed">{{ row.explanation }}</p>
      {% if rule_meta and rule_meta.description %}
        <p class="mt-3 text-sm text-slate-500 dark:text-slate-400 leading-relaxed">{{ rule_meta.description }}</p>
      {% endif %}
    </div>

    <div class="ui-surface p-6">
      <h2 class="ui-section-title">Recommended fix</h2>
      <p class="mt-3 text-sm text-slate-700 dark:text-slate-200 leading-relaxed whitespace-pre-line">{{ row.explanation }}</p>
      <p class="mt-4 text-sm text-slate-500 dark:text-slate-400 italic">
        Audit is read-only — it identifies issues but doesn't generate SQL rewrites or
        open pull requests. Run <a href="https://github.com/simple-machines/governor" class="text-brand-500 dark:text-brand-300 hover:underline">governor-cli</a>
        against the same project for the LLM-generated solution + dry-run + PR pipeline.
      </p>
    </div>
  </div>

  {# Evidence — mirrors cloud's generic_evidence dl #}
  {% if row.evidence_snapshot %}
  <div class="ui-surface p-6">
    <h2 class="ui-section-title">Evidence</h2>
    <dl class="mt-4 grid grid-cols-[max-content_1fr] gap-x-4 gap-y-2 text-sm">
      {% for key, value in row.evidence_snapshot.items() %}
        <dt class="text-slate-500 dark:text-slate-400 font-mono">{{ key }}</dt>
        <dd class="font-mono text-slate-700 dark:text-slate-200 break-all">
          {% if value is mapping or (value is iterable and value is not string) %}
            {{ value | tojson }}
          {% else %}
            {{ value }}
          {% endif %}
        </dd>
      {% endfor %}
    </dl>
  </div>
  {% endif %}

  {# Source SQL — same code-viewer pattern audit's job_detail.html uses #}
  {% if job and job.query %}
  <div>
    <div class="border border-slate-200 dark:border-slate-800 rounded-sm overflow-x-auto bg-white dark:bg-slate-950">
      <div class="flex items-center justify-between bg-slate-50 dark:bg-slate-900 px-3 py-1.5 border-b border-slate-200 dark:border-slate-800">
        <span class="text-sm font-medium text-slate-700 dark:text-slate-300">
          Source SQL · job <code class="font-mono">{{ job.job_id }}</code>
          <a href="/jobs/{{ job.job_id }}" class="ml-2 text-brand-500 dark:text-brand-300 hover:underline">view job &rarr;</a>
        </span>
        <span class="text-sm text-slate-400 dark:text-slate-500">{{ job.query | length }} chars</span>
      </div>
      <div class="overflow-auto" style="max-height: 28rem;">
        <pre class="text-[14px] font-mono leading-relaxed p-0 m-0"><code>{% for line in job.query.split('\n') %}<span class="inline-block w-12 text-right pr-3 select-none text-slate-400 dark:text-slate-600 bg-slate-50 dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800">{{ loop.index }}</span><span class="pl-3 text-slate-800 dark:text-slate-200">{{ line }}</span>
{% endfor %}</code></pre>
      </div>
    </div>
  </div>
  {% else %}
  <div class="ui-surface p-6">
    <h2 class="ui-section-title">Source SQL</h2>
    <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
      Source job no longer cached — re-scan to repopulate.
    </p>
  </div>
  {% endif %}

</div>
</section>
{% endblock %}