{# Plan 59 — Your machines (member overview, left column).
   Presence dot + hostname + last-heartbeat relative. Click → machine
   detail. Empty state is a real sentence, not "0 machines". #}
<div class="card p-4">
  <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 in this fleet</h2>
    </div>
    <a href="/admin/machines" class="text-[11px] text-cmdop-300 hover:text-cmdop-200">All machines →</a>
  </div>

  <template x-if="data.machines === null">
    <div class="text-[13px] text-ink-500">Loading…</div>
  </template>

  <template x-if="data.machines && data.machines.items.length === 0">
    <p class="text-[13px] text-ink-500 leading-relaxed">
      No machines available in this fleet yet. Ask an owner to add one
      — or run <code class="text-ink-200 font-mono">cmdop login</code>
      on a machine you own.
    </p>
  </template>

  <template x-if="data.machines && data.machines.items.length > 0">
    <div class="divide-y divide-white/[0.04]">
      <template x-for="m in data.machines.items" :key="m.id">
        <a :href="'/admin/machines/' + m.id"
           class="flex items-center gap-3 py-2 px-2 -mx-2 rounded-md hover:bg-white/[0.02]">
          <span class="w-2 h-2 rounded-full flex-shrink-0"
                :class="m.presence === 'online' ? 'bg-emerald-400'
                      : m.presence === 'stale' ? 'bg-amber-300'
                      : 'bg-ink-500'"></span>
          <span class="text-[13px] text-ink-200 truncate flex-1"
                x-text="m.name || m.hostname"></span>
          <span class="text-[11px] font-mono text-ink-500 flex-shrink-0"
                x-show="m.is_jarvis"
                title="Jarvis virtual machine">jarvis</span>
          <span class="text-[11px] font-mono text-ink-500 flex-shrink-0"
                x-text="m.last_heartbeat_at ? formatRelative(m.last_heartbeat_at) : 'never'"></span>
        </a>
      </template>
    </div>
  </template>
</div>