{% extends "base.html" %}
{% block title %}Compare Scans — Stratum{% endblock %}
{% block content %}
<div class="px-8 py-6 space-y-6">

  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-xl font-bold text-white">Scan Comparison</h1>
      <p class="text-sm text-slate-400 mt-0.5">Drift analysis between two compliance scan results.</p>
    </div>
    <a href="/auditor/history" class="text-xs text-slate-400 hover:text-white transition-colors">← Scan History</a>
  </div>

  <!-- Header comparison -->
  {% if job and baseline %}
  <div class="grid grid-cols-2 gap-4">
    <!-- Current -->
    <div class="bg-slate-900/50 border border-slate-800 rounded-xl p-5">
      <div class="text-[10px] font-bold uppercase text-slate-500 tracking-wider mb-3">Current</div>
      <div class="flex items-center gap-3">
        <div class="text-4xl font-black
          {% if job.grade == 'A' %}text-emerald-400{% elif job.grade == 'B' %}text-green-400{% elif job.grade == 'C' %}text-yellow-400{% elif job.grade == 'D' %}text-orange-400{% else %}text-rose-400{% endif %}">
          {{ job.grade or '?' }}
        </div>
        <div>
          <div class="text-lg font-bold text-white">{{ '%.1f%%' % job.score_pct if job.score_pct is not none else '—' }}</div>
          <div class="text-xs text-slate-500 font-mono truncate">{{ (job.image_id or job.target_host or '—')[:32] }}</div>
          <div class="text-[10px] text-slate-600">{{ job.updated_at.strftime('%Y-%m-%d') if job.updated_at else '' }}</div>
        </div>
      </div>
    </div>
    <!-- Baseline -->
    <div class="bg-slate-900/50 border border-slate-800 rounded-xl p-5">
      <div class="text-[10px] font-bold uppercase text-slate-500 tracking-wider mb-3">Baseline</div>
      <div class="flex items-center gap-3">
        <div class="text-4xl font-black
          {% if baseline.grade == 'A' %}text-emerald-400{% elif baseline.grade == 'B' %}text-green-400{% elif baseline.grade == 'C' %}text-yellow-400{% elif baseline.grade == 'D' %}text-orange-400{% else %}text-rose-400{% endif %}">
          {{ baseline.grade or '?' }}
        </div>
        <div>
          <div class="text-lg font-bold text-white">{{ '%.1f%%' % baseline.score_pct if baseline.score_pct is not none else '—' }}</div>
          <div class="text-xs text-slate-500 font-mono truncate">{{ (baseline.image_id or baseline.target_host or '—')[:32] }}</div>
          <div class="text-[10px] text-slate-600">{{ baseline.updated_at.strftime('%Y-%m-%d') if baseline.updated_at else '' }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Delta loaded via HTMX -->
  <div id="delta-container"
       hx-get="/api/auditor/jobs/{{ job_id }}/compare/{{ baseline_id }}"
       hx-trigger="load"
       hx-target="#delta-container"
       hx-swap="innerHTML">
    <div class="text-center py-8 text-slate-500 text-xs animate-pulse">Computing drift…</div>
  </div>

  <script>
  document.body.addEventListener('htmx:afterSwap', function(e) {
    if (e.detail.target.id !== 'delta-container') return;
    // delta is JSON — render it
    try {
      const data = JSON.parse(e.detail.xhr.responseText);
      renderDelta(data, e.detail.target);
    } catch {}
  });

  function renderDelta(d, el) {
    const scoreDelta = d.score_delta != null ? (d.score_delta >= 0 ? `+${d.score_delta.toFixed(1)}` : d.score_delta.toFixed(1)) : '—';
    const deltaColor = d.score_delta >= 0 ? 'text-emerald-400' : 'text-rose-400';
    el.innerHTML = `
      <div class="space-y-4">
        <div class="grid grid-cols-3 gap-4">
          <div class="bg-rose-950/20 border border-rose-800/30 rounded-xl p-4 text-center">
            <div class="text-2xl font-black text-rose-400">${d.new_failures?.length ?? 0}</div>
            <div class="text-[10px] font-bold uppercase tracking-wider text-rose-600 mt-1">New Failures</div>
          </div>
          <div class="bg-emerald-950/20 border border-emerald-800/30 rounded-xl p-4 text-center">
            <div class="text-2xl font-black text-emerald-400">${d.fixed?.length ?? 0}</div>
            <div class="text-[10px] font-bold uppercase tracking-wider text-emerald-600 mt-1">Fixed</div>
          </div>
          <div class="bg-slate-900/50 border border-slate-800 rounded-xl p-4 text-center">
            <div class="text-2xl font-black ${deltaColor}">${scoreDelta}%</div>
            <div class="text-[10px] font-bold uppercase tracking-wider text-slate-600 mt-1">Score Delta</div>
          </div>
        </div>
        ${renderRuleList('New Failures (Regressions)', d.new_failures, 'rose')}
        ${renderRuleList('Fixed (Improvements)', d.fixed, 'emerald')}
        ${renderRuleList('Unchanged Failures', d.unchanged_failures, 'slate')}
      </div>`;
  }

  function renderRuleList(title, rules, color) {
    if (!rules || !rules.length) return '';
    return `
      <div class="bg-slate-900/50 border border-slate-800 rounded-xl p-4">
        <div class="text-xs font-bold uppercase tracking-wider text-${color}-500 mb-3">${title} (${rules.length})</div>
        <div class="space-y-1">
          ${rules.map(r => `<div class="text-[10px] font-mono text-slate-400 px-2 py-1 rounded bg-slate-950/40">${r.replace('xccdf_org.ssgproject.content_rule_', '')}</div>`).join('')}
        </div>
      </div>`;
  }
  </script>

  {% else %}
  <div class="text-center py-16 text-slate-500">One or both scan jobs could not be found.</div>
  {% endif %}

</div>
{% endblock %}