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

  {# 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. #}
  {%- 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
      ) -%}
  <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 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" %}
    {# 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 = true %}
    {% 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 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-5">
      {% for issue in issue_cards %}
      <article class="ui-subcard">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div class="min-w-0">
            <div class="flex flex-wrap items-center gap-2">
              {{ signal_chip(issue.display_name, color="rose", title="Issue found on this object") }}
            </div>
          </div>
        </div>

        <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>
      </article>
      {% 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="ui-subcard" 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="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">
            {% 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>
      {% 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 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 %}

  {# Evidence + job lookup SQL - 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", "Job lookup SQL", 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;
        // 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 %}