{% extends "ui/_layout.html" %}
{% block title %}Machines - bty-web{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="h3 mb-0"><i class="bi bi-pc-display me-2"></i>Machines</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>
        <span id="machines-count">{{ machines|length }}</span> total · live
    </span>
</div>

<div class="card">
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>MAC</th>
                    <th>Image</th>
                    <th>Provisioning</th>
                    <th>Boot</th>
                    <th>Hostname</th>
                    <th>Last seen</th>
                    <th>Last flashed</th>
                    <th></th>
                </tr>
            </thead>
            {# The tbody subscribes to the SSE stream so it auto-updates
               when the operator (or auto-discovery) mutates machines.
               The browser carries the bty-token cookie automatically;
               that is what authenticates the EventSource connection.
               ``sse-target`` opts in to the layout-level flash animation. #}
            <tbody id="machines-tbody"
                   class="sse-target"
                   hx-ext="sse"
                   sse-connect="/events/machines"
                   sse-swap="machines-update">
                {% include "ui/_machines_tbody.html" %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}