{# 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/_sql_panel.html" import sql_panel %}
<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) %}
    {% 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 %}
      <a href="/opportunities?author={{ row.author_email | urlencode }}"
         class="ui-signal-chip text-slate-600 dark:text-slate-300 hover:underline"
         title="Filter the workspace by this author's findings">
        <span class="ui-legend-dot bg-slate-400 dark:bg-slate-500"></span>
        <span class="font-mono">{{ row.author_email }}</span>
      </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) %}
      <a href="/opportunities?origin={{ row.origin_tool }}"
         class="ui-signal-chip text-slate-600 dark:text-slate-300 hover:underline"
         title="Filter the workspace by jobs from {{ row.origin_tool }}">
        <span class="ui-legend-dot bg-indigo-400 dark:bg-indigo-500"></span>
        <span class="font-mono">{{ row.origin_tool | replace('_', ' ') }}</span>
      </a>
    {% endif %}
  {% endcall %}

  {# Spec 156 - Origin subsection. Shows the per-tool metadata
     (looker_dashboard_id, fivetran_connector_id, airflow_dag_id, etc.)
     when present. classifier_signal is rendered at the bottom for
     audit-of-audit transparency. Only rendered when we have actual
     metadata to show. #}
  {% if row.origin_metadata and (row.origin_metadata.keys() | reject('equalto', 'classifier_signal') | list | length > 0) %}
    <div class="ui-pane">
      {{ section_title("Where this came from") }}
      <dl class="grid grid-cols-1 sm:grid-cols-3 gap-x-4 gap-y-2 text-sm mt-3">
        <dt class="font-medium text-slate-600 dark:text-slate-400">Tool</dt>
        <dd class="col-span-2 font-mono text-slate-800 dark:text-slate-200">
          {{ row.origin_tool or 'ad_hoc' }}
        </dd>
        {% for key, value in row.origin_metadata.items() %}
          {% if key != 'classifier_signal' %}
            <dt class="font-medium text-slate-600 dark:text-slate-400">{{ key | replace('_', ' ') | title }}</dt>
            <dd class="col-span-2 font-mono text-slate-800 dark:text-slate-200 break-all">{{ value }}</dd>
          {% endif %}
        {% endfor %}
        <dt class="font-medium text-slate-500 dark:text-slate-500 text-xs">Classifier signal</dt>
        <dd class="col-span-2 font-mono text-xs text-slate-500 dark:text-slate-500 break-all">
          {{ row.origin_metadata.classifier_signal or 'fallback:none_matched' }}
        </dd>
      </dl>
    </div>
  {% endif %}

  {# Six-card stat strip - aggregated lifetime metrics on the left
     half, last-execution snapshot on the right half. Lives outside
     the ``ui-surface`` header so the cards read as a standalone strip
     (mirrors the dashboard's cost-summary row). ``grid-cols-6`` isn't
     in the pre-compiled Tailwind bundle (same constraint as
     ``_cost_summary.html``), so we inline the 6-column rule below
     the xl breakpoint and rely on Tailwind's built-in 1/2/3 cols at
     smaller widths. #}
  <style>
    @media (min-width: 1280px) {
      .audit-detail-stat-row {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }
    }
  </style>
  {% from "components/_stat_card.html" import stat_card %}
  {%- set _exec_meta = ("across " ~ row.execution_count ~ " executions") if (row.execution_count and row.execution_count > 1) else None -%}
  <div class="audit-detail-stat-row grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
    {{ stat_card("Cost (aggregated)", row.query_cost_value | format_usd, meta=_exec_meta) }}
    {% if row.aggregated_bytes_processed %}
      {{ stat_card("Bytes Processed (aggregated)", row.aggregated_bytes_processed | format_bytes, meta=_exec_meta, accent="brand") }}
    {% elif job and job.total_bytes_processed is not none %}
      {{ stat_card("Bytes Processed (aggregated)", job.total_bytes_processed | format_bytes, accent="brand") }}
    {% else %}
      {{ stat_card("Bytes Processed (aggregated)", "-", accent="slate") }}
    {% endif %}
    {% if row.aggregated_slot_time_ms %}
      {{ stat_card("Slot Time (aggregated, hours)", "%.1f" | format((row.aggregated_slot_time_ms or 0) / 3600000), meta=_exec_meta) }}
    {% elif job and job.total_slot_ms is not none %}
      {{ stat_card("Slot Time (aggregated, hours)", "%.1f" | format((job.total_slot_ms or 0) / 3600000)) }}
    {% else %}
      {{ stat_card("Slot Time (aggregated, hours)", "-", accent="slate") }}
    {% endif %}
    {# Last-execution trio - same three metrics for the most-recent
       cached run so the user can compare the freshest point against
       the aggregated lifetime view to its left. Hidden when no
       cached execution exists for the affected_table. #}
    {% if latest_job %}
      {{ stat_card(
           "Last Execution Cost",
           (latest_job.total_cost or 0) | float | format_usd,
           meta=latest_job.creation_time.strftime("%Y-%m-%d %H:%M UTC") if latest_job.creation_time else None
      ) }}
      {% if latest_job.total_bytes_processed is not none %}
        {{ stat_card(
             "Last Execution Bytes",
             latest_job.total_bytes_processed | format_bytes,
             meta=("billed: " ~ (latest_job.total_bytes_billed | format_bytes)) if latest_job.total_bytes_billed is not none else None,
             accent="brand"
        ) }}
      {% else %}
        {{ stat_card("Last Execution Bytes", "-", accent="slate") }}
      {% endif %}
      {% if latest_job.total_slot_ms is not none %}
        {{ stat_card(
             "Last Execution Slot (hours)",
             "%.1f" | format((latest_job.total_slot_ms or 0) / 3600000),
             meta=("duration: " ~ (latest_job.duration_ms | format_duration)) if latest_job.duration_ms is not none else None
        ) }}
      {% else %}
        {{ stat_card("Last Execution Slot (hours)", "-", accent="slate") }}
      {% endif %}
    {% endif %}
  </div>

  {# Cost trend collapsible. "Cost trend" (not "for this table") because
     the same partial is used for consumption queries that have no
     destination table. The full job-history cohort link is passed into
     the partial as ``chart_history_href`` so it renders inside the
     collapsible's expanded body. #}
  {% if chart_points_payload %}
    {% set chart_title = "Cost trend and issues" %}
    {% set chart_subtitle = "One point per day across the scan window. Days without executions are skipped. Red dots mark days when this table's executions tripped a detection rule." %}
    {% set chart_collapsible = true %}
    {% set chart_history_href = "/jobs/" ~ row.affected_table %}
    {% include "jobs/_cost_chart.html" %}
  {% endif %}

  {# Issues found - one bordered card per issue rule that fired on
     this table. Each card has a 2-column Why-this-fired / Recommended-
     fix split, so readers can pair the cause with the fix per rule.
     When a rule has no template SQL diff, Recommended-fix points to
     the Available improvements section below rather than repeating
     the Why-this-fired text verbatim. When zero issues fired
     (suggestion-only object), this section is hidden. #}
  {% if issue_cards %}
  <div class="ui-surface p-6">
    {{ section_title(
         "Issues found",
         description="One card per issue that fired on this table. Each card pairs the issue's evidence (slot contention, shuffle spill, etc.) with a recommended fix.",
         aside=((issue_cards | length) ~ (' issue' if issue_cards | length == 1 else ' issues'))
    ) }}
    <div class="mt-5 space-y-5">
      {% for issue in issue_cards %}
      <div class="audit-issue-card border border-slate-200 dark:border-slate-800 p-5 bg-white dark:bg-slate-950">
        <div class="flex flex-wrap items-center gap-2">
          {# Red issue pill - matches the red "issue count" pill in the
             dashboard's Top Cost Drivers table so the visual grammar
             is consistent across pages. #}
          <span class="ui-pill ui-pill-danger">{{ issue.row.opportunity_type | replace('_', ' ') }}</span>
        </div>
        {# "Why this fired" is the single narrative on each issue card.
           The recommended-fix details used to live in their own
           section; per user feedback (v3.4) we fold the pointer to
           the rewrite list into this prose so the card reads as one
           coherent block. The full diffs / display names still live
           in the Available improvements section further down the
           page; we just don't repeat them here. #}
        <div class="mt-4">
          <h3 class="text-sm font-semibold text-slate-700 dark:text-slate-200">Why this fired</h3>
          <p class="mt-2 text-sm text-slate-700 dark:text-slate-300 leading-relaxed whitespace-pre-line">{{ issue.row.explanation }}</p>
          {% if issue.rule_meta and issue.rule_meta.description %}
            <p class="mt-2 text-sm text-slate-500 dark:text-slate-400 leading-relaxed">{{ issue.rule_meta.description }}</p>
          {% endif %}
          {% if issue.template_result %}
            <p class="mt-3 text-sm text-slate-700 dark:text-slate-300 leading-relaxed whitespace-pre-line">{{ issue.template_result.explanation }}</p>
            {% if issue.diff_lines %}
              <p class="mt-2 text-sm text-slate-500 dark:text-slate-400 italic">Recommendations available below.</p>
            {% endif %}
          {% elif improvements %}
            <p class="mt-3 text-sm text-slate-700 dark:text-slate-300 leading-relaxed">Recommendations available below.</p>
          {% else %}
            <p class="mt-3 text-sm text-slate-700 dark:text-slate-300 leading-relaxed">No single-query SQL rewrite is available for this issue type. The fix is typically at the workload-scheduling, slot-reservation, or schema layer.</p>
            {% if layout_chip_targets %}
              <p class="mt-2 text-sm text-slate-700 dark:text-slate-300">Partition / cluster recommendations are available - see the chips above.</p>
            {% endif %}
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {# 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" %}

  {# Available improvements - 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 class="ui-surface p-6">
    {{ section_title(
         "Available improvements",
         description="Deterministic SQL rewrites the audit can suggest for this table. Each card carries a green/red diff plus a rollback path.",
         aside=((improvements | length) ~ (' suggestion' if improvements | length == 1 else ' suggestions'))
    ) }}
    <div class="mt-5 space-y-5">
      {% for imp in improvements %}
      <div class="audit-imp-card border border-slate-200 dark:border-slate-800 p-4 bg-slate-50/40 dark:bg-slate-950/20" data-active-tab="diff">
        <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>
        {# 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="audit-imp-tabs flex items-center gap-1 border-b border-slate-200 dark:border-slate-800 mb-3">
            <button type="button" onclick="auditSetTab(this, 'diff')"
                    class="audit-imp-tab px-3 py-1.5 text-sm font-medium border-b-2 -mb-px transition-colors"
                    data-tab="diff">Diff</button>
            <button type="button" onclick="auditSetTab(this, 'original')"
                    class="audit-imp-tab px-3 py-1.5 text-sm font-medium border-b-2 -mb-px transition-colors"
                    data-tab="original">Original SQL</button>
            {% if imp.after_content %}
            <button type="button" onclick="auditSetTab(this, 'suggested')"
                    class="audit-imp-tab px-3 py-1.5 text-sm font-medium border-b-2 -mb-px transition-colors"
                    data-tab="suggested">Suggested SQL</button>
            {% endif %}
          </div>
          <div class="audit-imp-pane" data-tab-pane="diff">
            {% 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="overflow-auto" style="max-height: 24rem;">
                <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="overflow-auto" style="max-height: 24rem;">
                <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>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {# Query fallback - when no SQL-rewrite suggestions fired on this
     opportunity, the user still needs to see the underlying query so
     they can manually inspect what's running. Suggestion cards already
     include an "Original SQL" tab; this block is the fallback path
     when ``improvements`` is empty. Renders only when we have a
     representative job with a query body. #}
  {% if not improvements and job and job.query %}
  <div class="ui-surface p-6">
    {{ section_title(
         "Query",
         description="The latest execution of this query. No deterministic SQL-rewrite suggestion is available for this opportunity - the fix is at the workload-scheduling or schema layer."
    ) }}
    <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="overflow-auto" style="max-height: 28rem;">
        <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>
  </div>
  {% endif %}

  {# Evidence + BigQuery query lookup - two side-by-side cards on
     >=lg, stacked on smaller screens. Each card collapses
     independently. The right-hand card renders the
     ``INFORMATION_SCHEMA.JOBS_BY_PROJECT`` SELECT pre-filtered by
     job_id so the user can paste it into the BigQuery console and
     inspect the row themselves. Evidence + lookup come from the
     representative opportunity (highest-priority for this table). #}
  {% if visible_evidence or job_lookup_sql %}
  <div class="grid gap-6 lg:grid-cols-2">
    {% if visible_evidence %}
    <details class="ui-surface p-6 group min-w-0" open>
      <summary class="flex items-center justify-between cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden">
        <h2 class="ui-section-title">Evidence</h2>
        <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 transition-transform group-open:rotate-180" 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>
      <dl class="mt-4 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>
    </details>
    {% endif %}
    {% if job_lookup_sql %}
      {{ sql_panel("job-lookup-sql", "BigQuery query", job_lookup_sql) }}
    {% endif %}
  </div>
  {% 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;
        b.classList.toggle('border-brand-500', active);
        b.classList.toggle('text-brand-500', active);
        b.classList.toggle('dark:text-brand-300', active);
        b.classList.toggle('border-transparent', !active);
        b.classList.toggle('text-slate-500', !active);
        b.classList.toggle('dark:text-slate-400', !active);
        b.classList.toggle('hover:text-slate-800', !active);
        b.classList.toggle('dark:hover:text-slate-200', !active);
      });
      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 %}