{# One <details> per JobVersion. Summary line carries everything the
   user needs to scan the list (date range, execution count, cost,
   resolved / new-rule chips); the diff body and the full query are
   hidden until the user expands.

   The LATEST version is open by default - the caller sets
   ``is_latest`` to True when looping. Earlier versions stay
   collapsed so the page is short by default and the user expands
   only what they want to see.

   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. #}
<details id="version-{{ version.version_id }}"
         class="audit-version-card group border border-slate-200 dark:border-slate-800 bg-slate-50/40 dark:bg-slate-950/20"
         data-active-tab="diff"
         {% if is_latest %}open{% endif %}>

  <summary class="cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden p-4">
    <div class="flex flex-wrap items-center 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="text-sm text-slate-500 dark:text-slate-400">
        {{ version.executions | length }} execution{% if version.executions | length != 1 %}s{% endif %} &middot; {{ version.total_cost | format_usd }}
      </span>

      {# Inline resolved / new chips so users see the headline-level
         "what changed" without expanding the card. #}
      {% if version.resolved_rules %}
        {% for rule_type in version.resolved_rules | sort %}
          <span class="inline-flex items-center gap-1 text-sm text-emerald-700 dark:text-emerald-300"
                title="Fixed by this change">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
            <span>{{ rule_type | replace('_', ' ') }} resolved</span>
          </span>
        {% endfor %}
      {% endif %}
      {% if version.newly_introduced_rules %}
        {% for rule_type in version.newly_introduced_rules | sort %}
          <span class="inline-flex items-center gap-1 text-sm text-amber-700 dark:text-amber-300"
                title="Newly introduced in this version">
            <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
            <span>{{ rule_type | replace('_', ' ') }} new</span>
          </span>
        {% endfor %}
      {% endif %}

      <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 transition-transform group-open:rotate-180 shrink-0 ml-auto" 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>
  </summary>

  <div class="px-4 pb-4 border-t border-slate-200 dark:border-slate-800 mt-0">
    {% 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 overflow-hidden font-mono text-sm">
          <div class="overflow-auto" style="max-height: 24rem;">
            <pre class="text-sm 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 %}
      <p class="mt-4 text-sm 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 overflow-hidden font-mono text-sm">
        <div class="overflow-auto" style="max-height: 24rem;">
          <pre class="text-sm 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 %}
  </div>

  {# 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>
</details>