{# Plan 40 Phase 3 — adapters rollup (24h).
   Per-channel counts derived from user_activity rows where
   activity_type=bot_chat. Empty when no traffic in the window.
   Plan 58 — relative time + tooltip, channel badge, friendlier empty. #}
{% from 'admin/components/ui.html' import card %}
{% call card(title="Adapters (24h)") %}
<template x-if="summary === null">
  <div class="px-4 py-6 text-[13px] text-ink-500 flex items-center gap-2">
    <i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i>
    Loading adapter rollup…
  </div>
</template>
<template x-if="summary && summary.adapters.length === 0">
  <div class="px-4 py-4 flex items-center gap-2.5 text-[12px] text-ink-500">
    <i data-lucide="radio-tower" class="w-4 h-4 text-ink-600 shrink-0"></i>
    <span>No bot traffic in the last 24h — it'll appear here grouped by channel once an adapter forwards a message.</span>
  </div>
</template>
<div x-show="summary && summary.adapters.length > 0" x-cloak class="overflow-x-auto">
  <table class="w-full text-[13px] text-left">
    <thead class="text-[11px] text-ink-500 uppercase tracking-wider border-b border-white/[0.06] sticky top-0 bg-ink-950 z-10">
      <tr>
        <th class="px-4 py-3 font-medium">Channel</th>
        <th class="px-4 py-3 font-medium">Messages</th>
        <th class="px-4 py-3 font-medium">Success</th>
        <th class="px-4 py-3 font-medium">Fails</th>
        <th class="px-4 py-3 font-medium">Last activity</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-white/[0.06]">
      <template x-for="a in summary.adapters" :key="a.channel_kind">
        <tr class="hover:bg-white/[0.02]">
          <td class="px-4 py-3">
            <span class="text-[11px] px-2 py-0.5 rounded font-mono border border-cmdop-500/30 text-cmdop-300"
                  x-text="a.channel_kind"></span>
          </td>
          <td class="px-4 py-3 text-ink-200 font-mono text-[12px]" x-text="a.messages_24h"></td>
          <td class="px-4 py-3 text-emerald-300 font-mono text-[12px]" x-text="a.success_24h"></td>
          <td class="px-4 py-3 font-mono text-[12px]" :class="a.failure_24h > 0 ? 'text-red-300' : 'text-ink-500'"
              x-text="a.failure_24h"></td>
          <td class="px-4 py-3 text-ink-400 text-[12px] font-mono"
              :title="formatTs(a.last_activity_at)"
              x-text="formatRelative(a.last_activity_at)"></td>
        </tr>
      </template>
    </tbody>
  </table>
</div>
{% endcall %}