{% extends "base.html" %}
{% block title %}Dashboard — ULPgrammer{% endblock %}
{% block content %}

<div class="stats-bar"
     hx-get="/api/stats"
     hx-trigger="every 10s"
     hx-swap="outerHTML">
  <span class="stat critical">🔴 CRITICAL: {{ counts.CRITICAL }}</span>
  <span class="stat high">🟠 HIGH: {{ counts.HIGH }}</span>
  <span class="stat medium">🟡 MEDIUM: {{ counts.MEDIUM }}</span>
  <span class="stat low">🟢 LOW: {{ counts.LOW }}</span>
</div>

{% if groups %}
<div class="groups-bar">
  <strong>Groups:</strong>
  {% for g in groups %}
  <a href="/dashboard/groups/{{ g.id }}" class="group-pill">{{ g.name }}</a>
  {% endfor %}
</div>
{% endif %}

<h2>Live feed</h2>
<div id="hit-feed"
     hx-ext="sse"
     sse-connect="/api/stream"
     sse-swap="hit"
     hx-swap="afterbegin">
  {% for hit in hits %}
  <div class="hit-card sev-{{ hit.severity|lower }}">
    <span class="sev-badge">{{ hit.severity }}</span>
    <code class="raw">{{ hit.raw }}</code>
    <span class="meta">{{ hit.source }} / {{ hit.filename }} — {{ hit.timestamp }}</span>
    {% if hit.reasons %}
    <ul class="reasons">{% for r in hit.reasons %}<li>{{ r }}</li>{% endfor %}</ul>
    {% endif %}
  </div>
  {% endfor %}
</div>

<script>
// SSE: inject new hit cards into #hit-feed
document.body.addEventListener("htmx:sseMessage", function(e) {
  if (e.detail.type !== "hit") return;
  const data = JSON.parse(e.detail.data);
  const feed = document.getElementById("hit-feed");
  const card = document.createElement("div");
  card.className = "hit-card sev-" + data.severity.toLowerCase();
  card.innerHTML = `
    <span class="sev-badge">${data.severity}</span>
    <code class="raw">${escHtml(data.raw)}</code>
    <span class="meta">${escHtml(data.source)} / ${escHtml(data.filename)}</span>
    <ul class="reasons">${data.reasons.map(r => `<li>${escHtml(r)}</li>`).join("")}</ul>
  `;
  feed.prepend(card);
});

function escHtml(s) {
  return String(s).replace(/[&<>"']/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[c]);
}
</script>

{% endblock %}