{# Plan 57 — recent activity feed (Row 4).
   Last 15 user_activity events, full-width. Click → drawer with raw
   metadata JSON. Auto-refresh hooks into `pageHelper()` 30s timer. #}
<div class="card p-4">
  <div class="flex items-center justify-between mb-3">
    <div class="flex items-center gap-2">
      <i data-lucide="list" class="w-4 h-4 text-cmdop-400"></i>
      <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">Recent activity</h2>
      <span class="text-[10px] uppercase tracking-wider text-ink-500">latest</span>
    </div>
    <a href="/admin/logs" class="text-[11px] text-cmdop-300 hover:text-cmdop-200">View all logs →</a>
  </div>

  <template x-if="data.activity === null">
    <div class="text-[13px] text-ink-500">Loading…</div>
  </template>
  <template x-if="data.activity && data.activity.items.length === 0">
    <p class="text-[13px] text-ink-500">No activity yet.</p>
  </template>
  <template x-if="data.activity && data.activity.items.length > 0">
    {# Dashboard shows only the 5 most-recent rows — the full audit log
       (and its filters) lives at /admin/logs. Keeps the overview scannable. #}
    <div class="divide-y divide-white/[0.04]">
      <template x-for="ev in data.activity.items.slice(0, 5)" :key="ev.id">
        <div class="flex items-center gap-3 py-2 cursor-pointer hover:bg-white/[0.02] px-2 -mx-2 rounded-md"
             @click="openActivityDrawer(ev)">
          <i :data-lucide="activityIcon(ev.activity_type)"
             class="w-3.5 h-3.5 text-ink-400 flex-shrink-0"></i>
          <span class="text-[12px] font-mono text-cmdop-300 w-40 truncate flex-shrink-0"
                x-text="ev.activity_type"></span>
          <span class="text-[12px] text-ink-200 truncate flex-shrink-0 w-56" x-text="ev.actor"></span>
          <span class="text-[12px] text-ink-400 flex-1 truncate" x-text="activitySummary(ev)"></span>
          <span class="text-[11px] text-ink-500 font-mono flex-shrink-0"
                x-text="formatRelative(ev.created_at)"></span>
        </div>
      </template>
    </div>
  </template>
</div>

{# Drawer: raw metadata + activity context. #}
{% from 'admin/components/ui.html' import drawer %}
{% call drawer('drawer.open', 'closeActivityDrawer()', width='max-w-2xl') %}
    <div class="flex items-center justify-between p-4 border-b border-white/[0.06]">
      <div class="min-w-0 flex-1">
        <div class="flex items-center gap-3">
          <h3 class="text-[13px] font-mono text-cmdop-300 truncate"
              x-text="drawer.event && drawer.event.activity_type"></h3>
        </div>
        <p class="text-[11px] text-ink-500 mt-1 font-mono"
           x-text="drawer.event && formatTs(drawer.event.created_at)"></p>
      </div>
      <button @click="closeActivityDrawer()" class="text-ink-500 hover:text-ink-200 ml-3 flex-shrink-0">
        <i data-lucide="x" class="w-4 h-4"></i>
      </button>
    </div>
    <div class="flex-1 overflow-y-auto p-4 space-y-4 text-[13px]">
      <template x-if="drawer.event">
        <div class="space-y-4">
          <div class="grid grid-cols-2 gap-2 text-[12px]">
            <div class="rounded-md bg-black border border-white/[0.06] px-3 py-2">
              <div class="text-ink-500 uppercase tracking-wider text-[10px]">Actor</div>
              <div class="font-mono text-ink-200 mt-0.5 truncate"
                   x-text="drawer.event.actor"></div>
            </div>
            <div class="rounded-md bg-black border border-white/[0.06] px-3 py-2">
              <div class="text-ink-500 uppercase tracking-wider text-[10px]">Fleet</div>
              <div class="font-mono text-ink-200 mt-0.5 truncate"
                   x-text="drawer.event.fleet_id ? drawer.event.fleet_id.slice(0,8) : 'global'"></div>
            </div>
          </div>
          <div>
            <div class="text-[11px] uppercase tracking-wider text-ink-500 mb-1">Metadata</div>
            <pre class="text-[11px] font-mono text-ink-300 bg-black border border-white/[0.06] rounded-md p-3 overflow-x-auto whitespace-pre"
                 x-text="JSON.stringify(drawer.event.metadata, null, 2)"></pre>
          </div>
        </div>
      </template>
    </div>
{% endcall %}