{# Plan 59 — Fleet health strip (owner/admin Row 1).
   One condensed line: fleet name · machines · members · Jarvis pill
   · errors-24h badge (only if > 0). Replaces Plan 57's six-pill
   system row for the fleet-scoped view. #}
<div class="card p-4">
  <template x-if="data.fleetHealth === null">
    <div class="text-[13px] text-ink-500">Loading fleet…</div>
  </template>
  <template x-if="data.fleetHealth">
    <div class="flex items-center justify-between gap-4 flex-wrap">
      <div class="flex items-center gap-4 flex-wrap min-w-0">
        <div class="flex items-center gap-2 min-w-0">
          <i data-lucide="layers" class="w-4 h-4 text-cmdop-400 flex-shrink-0"></i>
          <h2 class="text-[14px] font-semibold text-ink-100 tracking-tight truncate"
              x-text="data.fleetHealth.fleet_name"></h2>
          <span class="text-[11px] font-mono text-ink-500" x-text="'/' + data.fleetHealth.fleet_slug"></span>
        </div>
        <div class="flex items-center gap-3 text-[12px] text-ink-400">
          <span class="flex items-center gap-1.5">
            <i data-lucide="monitor" class="w-3.5 h-3.5"></i>
            <span class="font-mono text-ink-200" x-text="data.fleetHealth.machines_total"></span>
            <span>machines</span>
          </span>
          <span class="text-ink-700">·</span>
          <span class="flex items-center gap-1.5">
            <i data-lucide="users" class="w-3.5 h-3.5"></i>
            <span class="font-mono text-ink-200" x-text="data.fleetHealth.members_total"></span>
            <span>members</span>
          </span>
        </div>
      </div>
      <div class="flex items-center gap-2 flex-wrap">
        <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md border text-[11px]"
              :class="data.fleetHealth.jarvis_online
                ? 'border-emerald-500/30 bg-emerald-500/[0.05] text-emerald-300'
                : 'border-ink-500/30 bg-ink-500/[0.05] text-ink-400'">
          <span class="w-1.5 h-1.5 rounded-full"
                :class="data.fleetHealth.jarvis_online ? 'bg-emerald-400' : 'bg-ink-500'"></span>
          <span x-text="data.fleetHealth.jarvis_online ? 'Jarvis online' : 'Jarvis offline'"></span>
        </span>
        <template x-if="data.fleetHealth.errors_24h > 0">
          <a href="/admin/logs"
             class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md border text-[11px]"
             :class="data.fleetHealth.errors_24h > 10
               ? 'border-red-500/30 bg-red-500/[0.05] text-red-300 hover:bg-red-500/[0.08]'
               : 'border-amber-500/30 bg-amber-500/[0.05] text-amber-300 hover:bg-amber-500/[0.08]'">
            <i data-lucide="alert-triangle" class="w-3 h-3"></i>
            <span class="font-mono" x-text="data.fleetHealth.errors_24h"></span>
            <span>error<span x-show="data.fleetHealth.errors_24h !== 1">s</span> · 24h</span>
          </a>
        </template>
      </div>
    </div>
  </template>
</div>