{# Pane 1 — Machines. Live: machine:presence WS channel. #}
<a href="/admin/machines" class="card p-4 block">
  <div class="flex items-center justify-between mb-3">
    <div class="flex items-center gap-2">
      <i data-lucide="monitor" class="w-4 h-4 text-cmdop-400"></i>
      <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">Machines</h2>
      <span x-show="liveDots.machines" class="w-1.5 h-1.5 rounded-full bg-cmdop-400 animate-pulse"></span>
    </div>
    <span class="text-[11px] text-ink-500 font-mono" x-show="data.machines !== null"
          x-text="data.machines && data.machines.total + ' total'"></span>
  </div>
  <template x-if="data.machines === null">
    <div class="text-[13px] text-ink-500">Loading…</div>
  </template>
  <template x-if="data.machines">
    <div class="space-y-2">
      <div class="flex items-center gap-3">
        <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
        <span class="text-[13px] text-ink-200 flex-1">Online</span>
        <span class="text-[18px] font-mono font-semibold tracking-tight text-ink-100" x-text="data.machines.online"></span>
      </div>
      <div class="flex items-center gap-3">
        <span class="w-2 h-2 rounded-full bg-amber-300"></span>
        <span class="text-[13px] text-ink-200 flex-1">Stale</span>
        <span class="text-[18px] font-mono font-semibold tracking-tight text-amber-300" x-text="data.machines.stale"></span>
      </div>
      <div class="flex items-center gap-3">
        <span class="w-2 h-2 rounded-full bg-ink-500"></span>
        <span class="text-[13px] text-ink-200 flex-1">Offline</span>
        <span class="text-[18px] font-mono font-semibold tracking-tight text-ink-400" x-text="data.machines.offline"></span>
      </div>
      <template x-if="data.machines.total === 0">
        <p class="text-[11px] text-ink-500 pt-2 border-t border-white/[0.06]">No machines yet. Run <code class="text-ink-200 font-mono">cmdop login</code> on one.</p>
      </template>
    </div>
  </template>
</a>