{# Audit's object-overview detail page. Lists EVERY active issue +
   EVERY available SQL-rewrite suggestion for the requested
   opportunity's destination_table - not just one rule's findings.
   The cohort view at /jobs/{table} stays as the deep-dive (cost
   chart, Query versions). PR / dry-run / shadow surfaces are
   deliberately absent - audit is read-only and never generates
   solutions. #}
{% extends "layout.html" %}

{% block content %}
{% from "components/_page_header.html" import back_link, header_card %}
{# Hoisted from per-section conditional blocks because Jinja {% from %}
   scope is the enclosing block: when issue_cards is empty (suggestion-
   only opportunity) the issue-section's import never fires, but later
   sections like Available improvements still reference the macro -
   produces ``'section_title' is undefined``. Hoisting once at the top
   of the content block makes the macro available everywhere below. #}
{% from "components/_section_title.html" import section_title %}
{% from "components/_signal_chip.html" import signal_chip %}
<section class="ui-shell">
<div class="space-y-6">
  {{ back_link("/opportunities", "Issues & Suggestions") }}

  {% set _path_parts = (row.affected_table or '').split('.') %}
  {% set _dataset = _path_parts[1] if _path_parts | length >= 2 else '' %}
  {% set _table = _path_parts[2] if _path_parts | length >= 3 else (row.affected_table or '') %}
  {% set _title %}<code class="font-mono">{% if _dataset %}{{ _dataset }}.{% endif %}{{ row.dbt_model_name or _table }}</code>{% endset %}
  {% call header_card(_title) %}
    {# Build vs consumption - same classification the dashboard uses
       (build = writes a destination; consumption = read-only). Makes it
       explicit on the detail page which kind of workload this is. #}
    {% if row.query_workload_kind == 'build' %}
      {{ signal_chip("Build", color="brand", title="Build - this query writes a destination table") }}
    {% elif row.query_workload_kind == 'consumption' %}
      {{ signal_chip("Consumption", color="teal", title="Consumption - read-only query, no destination written") }}
    {% endif %}
    {% if issue_cards %}
      {% for issue in issue_cards[:3] %}
        {{ signal_chip(issue.display_name, color="rose", title="Issue found on this object") }}
      {% endfor %}
      {% if issue_cards | length > 3 %}
        {{ signal_chip("issues", color="rose", overflow=("+" ~ (issue_cards | length - 3)), title="More issue rules found on this object") }}
      {% endif %}
    {% endif %}
    {% if row.dbt_model_name %}
      <span class="text-sm font-medium text-emerald-600 dark:text-emerald-400">dbt</span>
    {% endif %}
    {% if row.author_email %}
      {% set _author_label %}<span class="font-mono">{{ row.author_email }}</span>{% endset %}
      <a href="/opportunities?author={{ row.author_email | urlencode }}"
         class="hover:underline"
         title="Filter the workspace by this author's findings">
        {{ signal_chip(_author_label, color="slate") }}
      </a>
    {% endif %}
    {# Spec 156 - origin chip in the header. Mirrors the Origin column
       on /opportunities. Click filters the workspace to this origin.
       Suppress it when it would just duplicate the green "dbt" marker
       above (origin 'dbt' on a dbt model) - keep it for Looker / Hex /
       Fivetran / etc. where it adds information. #}
    {% if row.origin_tool and row.origin_tool != 'ad_hoc' and not (row.origin_tool == 'dbt' and row.dbt_model_name) %}
      {% set _origin_label %}<span class="font-mono">{{ row.origin_tool | replace('_', ' ') }}</span>{% endset %}
      <a href="/opportunities?origin={{ row.origin_tool }}"
         class="hover:underline"
         title="Filter the workspace by jobs from {{ row.origin_tool }}">
        {{ signal_chip(_origin_label, color="slate") }}
      </a>
    {% endif %}
  {% endcall %}

  {# "What changed" signal for the current query version - the same chips
     the /jobs version cards show. A resolved rule (e.g. "cross join
     unaggregated resolved") is good news: it fired on an earlier version
     and the current query no longer triggers it. This is why the
     suggestion count can be 0 here while /jobs' history shows the rule -
     it was already fixed. #}
  {% if resolved_rules_current or new_rules_current %}
  <div class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
    {% for rt in resolved_rules_current %}
      <span class="inline-flex items-center gap-1 text-emerald-700 dark:text-emerald-300"
            title="Fired on an earlier query version; the current version no longer triggers it.">
        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
        <span>{{ rt | replace('_', ' ') }} resolved in current version</span>
      </span>
    {% endfor %}
    {% for rt in new_rules_current %}
      <span class="inline-flex items-center gap-1 text-amber-700 dark:text-amber-300"
            title="Newly introduced in the current query version.">
        <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
        <span>{{ rt | replace('_', ' ') }} new in current version</span>
      </span>
    {% endfor %}
  </div>
  {% endif %}

  {%- set _runs = row.execution_count or 1 -%}
  {%- set _last_ts = latest_job.creation_time.strftime("%Y-%m-%d %H:%M UTC") if (latest_job and latest_job.creation_time) else "" -%}
  {%- set _agg_bytes = row.aggregated_bytes_processed or (job.total_bytes_processed if job else none) -%}
  {%- set _agg_slot_ms = row.aggregated_slot_time_ms or (job.total_slot_ms if job else none) -%}
  {%- set _cost_meta = (
        "last " ~ ((latest_job.total_cost or 0) | float | format_usd) ~ ((" · " ~ _last_ts) if _last_ts else "")
      ) if latest_job else None -%}
  {%- set _bytes_meta = (
        "last " ~ (latest_job.total_bytes_processed | format_bytes) ~ ((" · billed " ~ (latest_job.total_bytes_billed | format_bytes)) if latest_job.total_bytes_billed is not none else "")
      ) if (latest_job and latest_job.total_bytes_processed is not none) else None -%}
  {%- set _slot_meta = (
        ("last " ~ (latest_job.duration_ms | format_duration) ~ " wall") if (latest_job and latest_job.duration_ms is not none) else None
      ) -%}
  {%- set _primary_issue = issue_cards[0] if issue_cards else none -%}
  {%- set _primary_materialization = none -%}
  {% if audit_mv_candidates %}
    {% set _primary_materialization = audit_mv_candidates[0] %}
  {% elif bq_mv_recommendations %}
    {% set _primary_materialization = bq_mv_recommendations[0] %}
  {% endif %}
  {%- set _object_label = row.dbt_model_name or _table or row.affected_table -%}
  {% if _primary_materialization %}
    {% set _next_step_href = "#recommendations" %}
  {% elif _primary_issue %}
    {% set _next_step_href = "#findings" %}
  {% elif improvements %}
    {% set _next_step_href = "#sql-changes" %}
  {% else %}
    {% set _next_step_href = "#technical-details" %}
  {% endif %}

  <div class="ui-surface p-4">
    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
      <div class="min-w-0">
        <p class="ui-card-label">Recommended next step</p>
        <p class="mt-1 text-lg font-semibold text-slate-900 dark:text-slate-100">
          {% if _primary_materialization %}
            Review materialization change
          {% elif _primary_issue %}
            Address {{ _primary_issue.display_name }}
          {% elif improvements %}
            Review deterministic SQL changes
          {% else %}
            Review opportunity evidence
          {% endif %}
        </p>
        <p class="ui-card-meta mt-1" style="overflow-wrap: anywhere;">
          Object <code class="font-mono text-slate-700 dark:text-slate-200">{{ _object_label }}</code>
          · {{ row.query_cost_value | format_usd }} across {{ "{:,}".format(_runs) }} {{ "execution" if _runs == 1 else "executions" }}
          {% if _primary_issue %} · {{ _primary_issue.action_text }}{% endif %}
        </p>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        {% if issue_cards %}
          <span class="ui-pill ui-pill-danger">{{ issue_cards | length }} {{ "issue" if issue_cards | length == 1 else "issues" }}</span>
        {% endif %}
        {% if improvements %}
          <span class="ui-pill ui-pill-success">{{ improvements | length }} SQL {{ "change" if improvements | length == 1 else "changes" }}</span>
        {% endif %}
        {% if _primary_materialization %}
          <span class="ui-pill ui-pill-warning">materialization signal</span>
        {% endif %}
        <a href="{{ _next_step_href }}" class="ui-pill ui-pill-info">Open section</a>
      </div>
    </div>
  </div>

  {# Cohesive metric strip - one connected band of columns (cost / bytes /
     slot / executions) rather than separate boxes. Big aggregated value
     up top, latest-execution detail on the muted line beneath. #}
  <div class="ui-stat-strip" style="--strip-cols: 4">
    <div>
      <p class="ui-card-label">Cost</p>
      <p class="ui-card-value mt-1">{{ row.query_cost_value | format_usd }}</p>
      {% if _cost_meta %}<p class="ui-card-meta mt-0.5">{{ _cost_meta }}</p>{% endif %}
    </div>
    <div>
      <p class="ui-card-label">Bytes processed</p>
      <p class="ui-card-value mt-1 text-brand-500 dark:text-brand-300">{{ (_agg_bytes | format_bytes) if _agg_bytes is not none else "-" }}</p>
      {% if _bytes_meta %}<p class="ui-card-meta mt-0.5">{{ _bytes_meta }}</p>{% endif %}
    </div>
    <div>
      <p class="ui-card-label">Slot time</p>
      <p class="ui-card-value mt-1">{{ ("%.1f" | format((_agg_slot_ms or 0) / 3600000) ~ " hrs") if _agg_slot_ms is not none else "-" }}</p>
      {% if _slot_meta %}<p class="ui-card-meta mt-0.5">{{ _slot_meta }}</p>{% endif %}
    </div>
    <div>
      <p class="ui-card-label">Executions</p>
      <p class="ui-card-value mt-1">{{ "{:,}".format(_runs) }}</p>
      <p class="ui-card-meta mt-0.5">in scan window</p>
    </div>
  </div>

  {# Cost trend stays expanded: the chart is useful context rather than
     noisy forensic detail. #}
  {% if chart_points_payload %}
    {% set chart_title = "Cost trend and issues" %}
    {# Subtitle is derived from the payload granularity inside the partial
       (per-execution vs daily roll-up). The chart spans every query
       version, matching the headline cost/executions (both full history)
       and the /jobs page. Amber rings mark version changes; red points
       tripped a detection rule. #}
    {% set chart_collapsible = false %}
    {% set chart_history_href = "/jobs/" ~ row.affected_table %}
    {% include "jobs/_cost_chart.html" %}
  {% endif %}

  {# Issues found - one decision card per detector/advisory rule surfaced
     on this table. The card mirrors the Materialization rhythm:
     Evidence / Action / Impact. SQL rewrite cards stay below only when
     there is a deterministic before/after change to review. #}
  {% if issue_cards %}
  <div id="findings" class="ui-surface p-6">
    {{ section_title(
         "Issues found",
         description="One card per issue that fired on this table. Each card pairs the detector evidence with the action and expected operational impact.",
         aside=((issue_cards | length) ~ (' issue' if issue_cards | length == 1 else ' issues'))
    ) }}
    <div class="mt-5 space-y-3">
      {% for issue in issue_cards %}
      <details class="ui-subcard group">
        <summary class="flex flex-col gap-3 cursor-pointer select-none list-none sm:flex-row sm:items-center sm:justify-between [&::-webkit-details-marker]:hidden">
          <div class="min-w-0 flex-1">
            <div class="flex flex-wrap items-center gap-2">
              {{ signal_chip(issue.display_name, color="rose", title="Issue found on this object") }}
            </div>
            <p class="mt-2 text-sm text-slate-600 dark:text-slate-300 leading-relaxed" style="overflow-wrap: anywhere;">
              {{ issue.evidence_text }}
            </p>
          </div>
          <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 transition-transform group-open:rotate-180 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
          </svg>
        </summary>

        <div class="mt-4 grid gap-4 lg:grid-cols-3">
          <div class="min-w-0">
            <p class="ui-card-label">Evidence</p>
            <p class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-relaxed whitespace-normal" style="overflow-wrap: anywhere;">{{ issue.evidence_text }}</p>
          </div>
          <div class="min-w-0">
            <p class="ui-card-label">Action</p>
            <p class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-relaxed" style="overflow-wrap: anywhere;">{{ issue.action_text }}</p>
          </div>
          <div class="min-w-0">
            <p class="ui-card-label">Impact</p>
            <p class="mt-2 text-sm text-emerald-700 dark:text-emerald-300 leading-relaxed" style="overflow-wrap: anywhere;">{{ issue.impact_text }}</p>
          </div>
        </div>
      </details>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {% if layout_recommendation or audit_mv_candidates or bq_mv_recommendations or unused_candidates %}
  <div id="recommendations" class="space-y-6">
    {# Spec 148 - Recommended physical layout. Read-only suggestion of
       partition + cluster keys based on how the table is queried.
       The partial gates on ``layout_recommendation`` so a None recommendation
       produces zero markup. #}
    {% include "opportunities/_layout_recommendation.html" %}

    {# Spec 154 v2 - Materialization recommendations folded into the
       opportunity detail page. Renders one card per audit-detected MV
       candidate (with generated CREATE MATERIALIZED VIEW SQL) and per
       BigQuery MV Recommender pass-through. The partial gates on
       non-empty input lists so it produces zero markup when this
       table has no MV signals. #}
    {% include "opportunities/_materialization.html" %}

    {# Spec 155 - Unused destination table section. Renders when the
       anchor opportunity_type is "unused_destination_table". The
       partial gates on a non-empty input list so it produces zero
       markup otherwise. Kept separate from the Materialization section
       because the question is different (should the table exist at
       all? vs. how should it be persisted?). #}
    {% include "opportunities/_unused_table.html" %}
  </div>
  {% endif %}

  {# Recommended SQL changes - every SQL-rewrite suggestion that
     fired on any opportunity for this table, deduped by rule_type.
     Each is a deterministic rewrite (no LLM) and renders inline as
     its own green/red diff. #}
  {% if improvements %}
  <div id="sql-changes" class="ui-surface p-6">
    {{ section_title(
         "Recommended SQL changes",
         description="Deterministic before/after rewrites. Expand a row to inspect the diff, original SQL, suggested SQL, and rollback path.",
         aside=((improvements | length) ~ (' change' if improvements | length == 1 else ' changes'))
    ) }}
    <div class="mt-5 space-y-3">
      {% for imp in improvements %}
      <details class="ui-subcard group" data-active-tab="diff">
        <summary class="flex flex-col gap-3 cursor-pointer select-none list-none sm:flex-row sm:items-center sm:justify-between [&::-webkit-details-marker]:hidden">
          <div class="min-w-0 flex-1">
            <div class="flex flex-wrap items-center gap-2">
              <span class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ imp.display_name }}</span>
              {% if imp.template_id %}
                <span class="ui-pill ui-pill-success">deterministic rewrite</span>
              {% endif %}
              {% if imp.occurrences and imp.occurrences > 1 %}
                <span class="ui-pill ui-pill-neutral" title="This pattern was detected {{ imp.occurrences }} times in this query">
                  ×{{ imp.occurrences }}
                </span>
              {% endif %}
            </div>
            <p class="ui-card-meta mt-2">
              {% if imp.diff_lines or imp.before_content %}
                Diff, original SQL, and suggested SQL are available.
              {% else %}
                Expand for the recommendation details.
              {% endif %}
            </p>
          </div>
          <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 transition-transform group-open:rotate-180 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
          </svg>
        </summary>
        <div class="mt-4">
        {# Only show the explanation prose when there's NO diff to render -
           the diff already conveys "what changed" visually, and the prose
           generated by core's templates duplicates the column / CTE names
           plus a boilerplate "What changed" paragraph that adds nothing. #}
        {% if imp.explanation and not (imp.diff_lines or imp.before_content) %}
        <p class="mt-3 text-sm text-slate-700 dark:text-slate-200 leading-relaxed whitespace-pre-line">{{ imp.explanation }}</p>
        {% endif %}
        {% if imp.diff_lines or imp.before_content %}
        <div class="mt-4">
          <div class="flex items-center gap-3 border-b border-slate-200 dark:border-slate-800 mb-3">
            <button type="button" onclick="auditSetTab(this, 'diff')"
                    class="ui-tab" data-tab="diff">Diff</button>
            <button type="button" onclick="auditSetTab(this, 'original')"
                    class="ui-tab" data-tab="original">Original SQL</button>
            {% if imp.after_content %}
            <button type="button" onclick="auditSetTab(this, 'suggested')"
                    class="ui-tab" data-tab="suggested">Suggested SQL</button>
            {% endif %}
          </div>
          <div class="audit-imp-pane" data-tab-pane="diff" style="max-height: 28rem; overflow: auto;">
            {% if imp.diff_lines %}
              {% set diff_lines = imp.diff_lines %}
              {% set file_path = imp.template_id %}
              {% include "components/code_diff.html" %}
            {% else %}
              <p class="text-sm text-slate-500 dark:text-slate-400 italic">No diff available - template did not produce a change.</p>
            {% endif %}
          </div>
          <div class="audit-imp-pane hidden" data-tab-pane="original">
            <div class="relative border border-slate-200 dark:border-slate-800 overflow-hidden font-mono text-sm">
              {# Copy button - sits in the top-right of the SQL pane.
                 The full SQL text lives in a hidden ``data-copy-source``
                 sibling so the JS handler can read it without scraping
                 the rendered DOM (which has line-number prefixes). #}
              <button type="button"
                      onclick="auditCopyFromSibling(this)"
                      class="absolute top-2 right-2 z-10 inline-flex items-center gap-1 px-2 py-1 text-sm rounded-full bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 shadow-sm">
                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
                <span>Copy</span>
              </button>
              <textarea data-copy-source class="hidden">{{ imp.before_content or '' }}</textarea>
              <div class="ui-code-pane">
                <pre class="text-sm leading-relaxed p-0 m-0"><code>{% for line in (imp.before_content or '').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>
          {% if imp.after_content %}
          <div class="audit-imp-pane hidden" data-tab-pane="suggested">
            {# Suggested SQL - the full source with the rule's
               recommended changes applied (i.e. the "after" side of the
               diff, rendered as a complete file). Same structure as the
               Original tab so the copy button reads the raw SQL from
               the hidden textarea. #}
            <div class="relative border border-slate-200 dark:border-slate-800 overflow-hidden font-mono text-sm">
              <button type="button"
                      onclick="auditCopyFromSibling(this)"
                      class="absolute top-2 right-2 z-10 inline-flex items-center gap-1 px-2 py-1 text-sm rounded-full bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 shadow-sm">
                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
                <span>Copy</span>
              </button>
              <textarea data-copy-source class="hidden">{{ imp.after_content or '' }}</textarea>
              <div class="ui-code-pane">
                <pre class="text-sm leading-relaxed p-0 m-0"><code>{% for line in (imp.after_content or '').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>
          {% endif %}
        </div>
        {% endif %}
        {% if imp.rollback %}
        <details class="mt-3 group">
          <summary class="cursor-pointer text-sm text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200">Rollback instructions</summary>
          <p class="mt-2 text-sm text-slate-600 dark:text-slate-300 whitespace-pre-line">{{ imp.rollback }}</p>
        </details>
        {% endif %}
        </div>
      </details>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {# Query fallback - when no suggestion card already carries SQL, the
     user still needs to see the underlying query so they can manually
     inspect what's running. Rewrite cards include an "Original SQL" tab;
     advisory-only cards (slot contention, etc.) do not. Renders only when
     we have a representative job with a query body. #}
  {% if not improvements_have_sql and job and job.query %}
  <details id="query" class="ui-surface p-6 group">
    <summary class="flex flex-wrap items-center justify-between gap-3 cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden">
      <div class="min-w-0">
        <div class="flex items-center gap-2">
          <h2 class="ui-section-title mt-0 mb-0">Query</h2>
          <svg class="w-3.5 h-3.5 text-slate-400 dark:text-slate-500 transition-transform group-open:rotate-180 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
          </svg>
        </div>
        <p class="ui-card-meta mt-2">No deterministic SQL rewrite is available. Expand only when you need to inspect the latest execution.</p>
      </div>
      <span class="ui-pill ui-pill-neutral">minimized</span>
    </summary>
    <div class="relative mt-4 border border-slate-200 dark:border-slate-800 overflow-hidden font-mono text-sm" data-active-tab="query">
      <button type="button"
              onclick="auditCopyFromSibling(this)"
              class="absolute top-2 right-2 z-10 inline-flex items-center gap-1 px-2 py-1 text-sm rounded-full bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 shadow-sm">
        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
        <span>Copy</span>
      </button>
      <textarea data-copy-source class="hidden">{{ job.query }}</textarea>
      <div class="ui-code-pane">
        <pre class="text-sm 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>
  </details>
  {% endif %}

  {# Technical details - raw detector evidence plus the BigQuery lookup
     SQL. Kept in one minimized drawer so the page leads with decisions
     and keeps forensic data available on demand. #}
  {% if visible_evidence or job_lookup_sql %}
  <details id="technical-details" class="ui-surface p-6 group">
    <summary class="flex flex-wrap items-center justify-between gap-3 cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden">
      <div class="min-w-0">
        <div class="flex items-center gap-2">
          <h2 class="ui-section-title mt-0 mb-0">Technical details</h2>
          <svg class="w-3.5 h-3.5 text-slate-400 dark:text-slate-500 transition-transform group-open:rotate-180 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
          </svg>
        </div>
        <p class="ui-card-meta mt-2">Raw detector fields and BigQuery lookup SQL for verification.</p>
      </div>
      <span class="ui-pill ui-pill-neutral">minimized</span>
    </summary>

    <div class="mt-5 grid gap-6 lg:grid-cols-2">
      {% if visible_evidence %}
      <section class="min-w-0">
        <h3 class="ui-card-label">Evidence</h3>
        {% if row.opportunity_type == "slot_contention" and visible_evidence.slot_contention_flag is sameas false and visible_evidence.queue_ratio_percent is defined %}
        <p class="mt-2 max-w-2xl text-sm text-slate-700 dark:text-slate-200 leading-relaxed">
          Slot Contention can be detected from queue time even when BigQuery's explicit slot-contention flag is false.
          This job waited {{ visible_evidence.queue_time_seconds }}s before running, with {{ visible_evidence.queue_ratio_percent }}% of total elapsed time spent queued.
        </p>
        {% endif %}
        <dl class="mt-3 grid grid-cols-[max-content_1fr] gap-x-4 gap-y-2 text-sm">
          {% for key, value in visible_evidence.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>
      </section>
      {% endif %}

      {% if job_lookup_sql %}
      <section class="min-w-0">
        <h3 class="ui-card-label">Job lookup SQL</h3>
        <p class="ui-card-meta mt-2">Paste into BigQuery to inspect the representative job row.</p>
        <div class="relative mt-3 border border-slate-200 dark:border-slate-800 overflow-hidden font-mono text-sm">
          <button type="button"
                  onclick="auditCopyFromSibling(this)"
                  class="absolute top-2 right-2 z-10 inline-flex items-center gap-1 px-2 py-1 text-sm rounded-full bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 shadow-sm">
            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
            <span>Copy</span>
          </button>
          <textarea data-copy-source class="hidden">{{ job_lookup_sql }}</textarea>
          <div class="ui-code-pane">
            <pre id="job-lookup-sql" class="text-sm leading-relaxed p-4 m-0 whitespace-pre-wrap"><code>{{ job_lookup_sql }}</code></pre>
          </div>
        </div>
      </section>
      {% endif %}
    </div>
  </details>
  {% endif %}

</div>
</section>

{# Generic tab toggler - picks up every ``[data-tab]`` /
   ``[data-tab-pane]`` pair inside an ancestor with
   ``[data-active-tab]``. Same script as the cohort page so
   suggestion cards' Diff / Original SQL tabs work without coupling
   to the class name. #}
<script>
  if (typeof window.auditCopyFromSibling !== 'function') {
    // Copies the text of the nearest ``[data-copy-source]`` element
    // inside the same parent as the clicked button. Used by the
    // Original SQL / Suggested SQL panes - each pane has a hidden
    // ``<textarea data-copy-source>`` holding the raw SQL so the
    // copy reads source-of-truth text without line-number prefixes.
    window.auditCopyFromSibling = function(button) {
      const container = button.parentElement;
      if (!container) return;
      const source = container.querySelector('[data-copy-source]');
      if (!source) return;
      const text = source.value !== undefined ? source.value : source.textContent;
      navigator.clipboard.writeText(text).then(() => {
        const label = button.querySelector('span');
        if (!label) return;
        const orig = label.textContent;
        label.textContent = 'Copied';
        setTimeout(() => { label.textContent = orig; }, 1500);
      }).catch(() => { /* noop */ });
    };
  }
  if (typeof window.auditSetTab !== 'function') {
    window.auditSetTab = function(button, tab) {
      const card = button.closest('[data-active-tab]');
      if (!card) return;
      card.dataset.activeTab = tab;
      card.querySelectorAll('[data-tab]').forEach(b => {
        const active = b.dataset.tab === tab;
        // Active styling lives in the canonical .ui-tab-active CSS rule
        // (app.css); the inactive state is the bare .ui-tab default, so
        // toggling that single class is all that's needed here.
        b.classList.toggle('ui-tab-active', active);
        b.setAttribute('aria-selected', active ? 'true' : 'false');
      });
      card.querySelectorAll('[data-tab-pane]').forEach(p => {
        p.classList.toggle('hidden', p.dataset.tabPane !== tab);
      });
    };
  }
  document.querySelectorAll('[data-active-tab]').forEach(card => {
    const initial = card.dataset.activeTab || 'diff';
    const btn = card.querySelector('[data-tab="' + initial + '"]');
    if (btn) window.auditSetTab(btn, initial);
  });
</script>
{% endblock %}