{# One card per JobVersion. Header: version index + date range +
   execution count + cost. Body: unified diff against the previous
   version (or "Initial version" copy for v1). Footer: chips for
   resolved / newly-introduced rules.

   Anchor target: id="version-{{ version.version_id }}". The chart's
   click-handler navigates to /jobs/{first_job_id}?from=cohort which
   hits the per-execution view; the per-execution view then links
   back to /jobs/{table}#execution-{job_id} which scrolls to a
   matching anchor lower in this card. #}
<div id="version-{{ version.version_id }}"
     class="audit-version-card border border-slate-200 dark:border-slate-800 rounded-sm p-4 bg-slate-50/40 dark:bg-slate-950/20"
     data-active-tab="diff">

  <div class="flex flex-wrap items-baseline gap-3">
    <span class="ui-pill ui-pill-neutral font-mono text-sm">v{{ version.version_index }}</span>
    <span class="text-sm font-medium text-slate-800 dark:text-slate-200">
      {{ version.first_seen.strftime("%Y-%m-%d %H:%M") }}
      {% if version.first_seen != version.last_seen %}
        → {{ version.last_seen.strftime("%Y-%m-%d %H:%M") }}
      {% endif %}
      UTC
    </span>
    <span class="ui-card-meta text-sm">
      {{ version.executions | length }} execution{% if version.executions | length != 1 %}s{% endif %} · {{ version.total_cost | format_usd }}
    </span>
  </div>

  {# Per-version chips for "Resolved" and "New in this version".
     Layer 3 fills these sets; before that they're empty and the
     row collapses cleanly. #}
  {% if version.resolved_rules or version.newly_introduced_rules %}
    <div class="mt-3 flex flex-wrap gap-2">
      {% for rule_type in version.resolved_rules | sort %}
        <span class="ui-signal-chip text-emerald-700 dark:text-emerald-300"
              title="This rule fired on the previous version but not on this one — likely fixed by the change above.">
          <span class="ui-legend-dot bg-emerald-500"></span>
          <span class="line-through opacity-80">{{ rule_type | replace('_', ' ') }}</span>
          <span class="ml-1">resolved</span>
        </span>
      {% endfor %}
      {% for rule_type in version.newly_introduced_rules | sort %}
        <span class="ui-signal-chip text-amber-700 dark:text-amber-300"
              title="This rule did NOT fire on the previous version — newly introduced by this query change.">
          <span class="ui-legend-dot bg-amber-500"></span>
          {{ rule_type | replace('_', ' ') }}
          <span class="ml-1">new in this version</span>
        </span>
      {% endfor %}
    </div>
  {% endif %}

  {# Diff body — same tabbed Diff / Original SQL idiom as the
     opportunity-detail improvement card. Reuses the auditSetTab
     toggler from /opportunities/{id} (we vendor a tiny inline
     bootstrap below that re-uses the same global window function
     when present). #}
  {% if version.diff_against_previous %}
    <div class="audit-version-tabs flex items-center gap-1 border-b border-slate-200 dark:border-slate-800 mt-4 mb-3">
      <button type="button" onclick="auditSetTab(this, 'diff')"
              class="audit-version-tab px-3 py-1.5 text-sm font-medium border-b-2 -mb-px transition-colors"
              data-tab="diff">Diff vs. v{{ version.version_index - 1 }}</button>
      <button type="button" onclick="auditSetTab(this, 'original')"
              class="audit-version-tab px-3 py-1.5 text-sm font-medium border-b-2 -mb-px transition-colors"
              data-tab="original">Query body</button>
    </div>
    <div class="audit-version-pane" data-tab-pane="diff">
      {% set diff_lines = version.diff_against_previous %}
      {% set file_path = "v" ~ (version.version_index - 1) ~ " → v" ~ version.version_index %}
      {% include "components/code_diff.html" %}
    </div>
    <div class="audit-version-pane hidden" data-tab-pane="original">
      <div class="border border-slate-200 dark:border-slate-800 rounded-sm overflow-hidden font-mono text-sm">
        <div class="overflow-auto" style="max-height: 24rem;">
          <pre class="text-[13px] leading-relaxed p-0 m-0"><code>{% for line in (version.query_text 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>
  {% else %}
    {# v1 — no previous version to diff against. Show the query body
       directly so users can see what the initial version looked like
       before any subsequent change. #}
    <p class="mt-4 text-xs text-slate-500 dark:text-slate-400 italic">Initial version in this scan window — no previous version to diff against.</p>
    <div class="mt-3 border border-slate-200 dark:border-slate-800 rounded-sm overflow-hidden font-mono text-sm">
      <div class="overflow-auto" style="max-height: 24rem;">
        <pre class="text-[13px] leading-relaxed p-0 m-0"><code>{% for line in (version.query_text 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>
  {% endif %}

  {# Per-execution anchors so /jobs/{job_id}?from=cohort can scroll back
     to the right execution. Hidden visually — anchor only. #}
  <div class="hidden">
    {% for exec in version.executions %}
      <span id="execution-{{ exec.job_id }}"></span>
    {% endfor %}
  </div>
</div>