{% extends "ui/_layout.html" %}
{% block title %}Dashboard - bty-web{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0"><i class="bi bi-speedometer2 me-2"></i>Dashboard</h1>
    <span class="live-indicator text-muted small"
          title="Live-updating via Server-Sent Events">
        <i class="bi bi-broadcast text-success me-1"></i>live
    </span>
</div>

{# The counter cards subscribe to /events/machines via SSE; the
   server publishes a fresh ``dashboard-counts`` HTML fragment on
   every machine mutation and image upload, which htmx-ext-sse
   swaps in below. ``sse-target`` opts the swap target into the
   layout-level "flash green when content changes" animation. #}
<div id="dashboard-counts"
     class="sse-target"
     hx-ext="sse"
     sse-connect="/events/machines"
     sse-swap="dashboard-counts">
    {% include "ui/_dashboard_counts.html" %}
</div>

{# Recent activity slice -- reuses the per-subject events card.
   Static at request time (reload to refresh); the live SSE
   stream is wired to the counters above, not here. #}
{% with events=recent_events,
        title="Recent activity",
        link_to_full="/ui/events" %}
{% include "ui/_events_card.html" %}
{% endwith %}
{% endblock %}