{# Plan 57 — fleet summary table (Row 5).
   Server-admin only. Hidden via template-level conditional in
   dashboard.html. Row click → /admin/switch-fleet?fleet_id=... #}
<div class="card p-4">
  <div class="flex items-center justify-between mb-3">
    <div class="flex items-center gap-2">
      <i data-lucide="building" class="w-4 h-4 text-cmdop-400"></i>
      <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">Fleets</h2>
      <span class="text-[10px] uppercase tracking-wider text-cmdop-400 font-medium">server admin</span>
    </div>
    <span class="text-[11px] text-ink-500 font-mono"
          x-show="data.fleetsSummary"
          x-text="data.fleetsSummary && (data.fleetsSummary.items.length + ' active')"></span>
  </div>

  <template x-if="data.fleetsSummary === null">
    <div class="text-[13px] text-ink-500">Loading…</div>
  </template>
  <template x-if="data.fleetsSummary && data.fleetsSummary.items.length === 0">
    <p class="text-[13px] text-ink-500">No active fleets.</p>
  </template>
  <template x-if="data.fleetsSummary && data.fleetsSummary.items.length > 0">
    <div class="overflow-x-auto">
      <table class="w-full text-[12px]">
        <thead>
          <tr class="text-[10px] uppercase tracking-wider text-ink-500 border-b border-white/[0.06]">
            <th class="text-left py-1.5 pr-2 font-medium">Fleet</th>
            <th class="text-right py-1.5 px-2 font-medium">Machines</th>
            <th class="text-right py-1.5 px-2 font-medium">Live</th>
            <th class="text-right py-1.5 px-2 font-medium">Spend 24h</th>
            <th class="text-right py-1.5 px-2 font-medium">Errors 24h</th>
            <th class="text-right py-1.5 pl-2 font-medium">Last activity</th>
          </tr>
        </thead>
        <tbody>
          <template x-for="f in data.fleetsSummary.items" :key="f.fleet_id">
            <tr class="border-b border-white/[0.04] hover:bg-white/[0.02] cursor-pointer"
                @click="switchFleet(f.fleet_id)">
              <td class="py-2 pr-2">
                <div class="text-ink-100 font-medium truncate max-w-[180px]" x-text="f.name"></div>
                <div class="text-[10px] text-ink-500 font-mono truncate max-w-[180px]" x-text="f.slug"></div>
              </td>
              <td class="text-right px-2 font-mono"
                  :class="f.machines > 0 ? 'text-ink-200' : 'text-ink-500'"
                  x-text="f.machines"></td>
              <td class="text-right px-2 font-mono"
                  :class="f.live_sessions > 0 ? 'text-emerald-300' : 'text-ink-500'"
                  x-text="f.live_sessions"></td>
              <td class="text-right px-2 font-mono text-ink-200"
                  x-text="'$' + f.spend_24h_usd.toFixed(2)"></td>
              <td class="text-right px-2 font-mono"
                  :class="f.errors_24h > 50 ? 'text-red-300'
                        : f.errors_24h > 10 ? 'text-amber-300'
                        : 'text-ink-500'"
                  x-text="f.errors_24h"></td>
              <td class="text-right pl-2 text-ink-500 font-mono"
                  x-text="f.last_activity_at ? formatRelative(f.last_activity_at) : '—'"></td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </template>
</div>