{# Summary pane — counts by event_type (sev-3 first), with click-to-filter. #}
<div class="card">
  <div class="px-4 py-3 border-b border-white/[0.06] flex items-center justify-between">
    <div>
      <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">Summary</h2>
      <p class="text-[11px] text-ink-500 mt-0.5 font-mono">
        <span x-text="summary && summary.total"></span> events in last
        <span x-text="filters.sinceHours"></span>h
        <span x-show="summary && summary.by_severity"
              class="ml-3 text-ink-400">
          severity:
          <span class="text-red-300 font-medium" x-text="(summary && summary.by_severity['3']) || 0"></span> high
          ·
          <span class="text-amber-300 font-medium" x-text="(summary && summary.by_severity['2']) || 0"></span> med
          ·
          <span class="text-ink-300 font-medium" x-text="(summary && summary.by_severity['1']) || 0"></span> low
        </span>
      </p>
    </div>
    <div class="flex items-center gap-1 text-[12px]">
      <button @click="setSinceHours(1)" :class="filters.sinceHours === 1 ? 'bg-white/[0.06] text-ink-100 font-medium' : 'text-ink-400 hover:text-ink-100 hover:bg-white/[0.03]'"
              class="px-2 py-1 rounded transition-colors cursor-pointer">1h</button>
      <button @click="setSinceHours(24)" :class="filters.sinceHours === 24 ? 'bg-white/[0.06] text-ink-100 font-medium' : 'text-ink-400 hover:text-ink-100 hover:bg-white/[0.03]'"
              class="px-2 py-1 rounded transition-colors cursor-pointer">24h</button>
      <button @click="setSinceHours(168)" :class="filters.sinceHours === 168 ? 'bg-white/[0.06] text-ink-100 font-medium' : 'text-ink-400 hover:text-ink-100 hover:bg-white/[0.03]'"
              class="px-2 py-1 rounded transition-colors cursor-pointer">7d</button>
    </div>
  </div>

  <template x-if="summary === null && !summaryError">
    <div class="p-4 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 summary…
    </div>
  </template>

  <template x-if="summaryError">
    <div class="p-4 text-[13px] text-amber-300 flex items-start gap-2">
      <i data-lucide="alert-triangle" class="w-3.5 h-3.5 mt-0.5 flex-shrink-0"></i>
      <div>
        Couldn't load the summary.
        <button @click="load()" class="underline hover:text-amber-200 ml-1 cursor-pointer">Retry</button>
      </div>
    </div>
  </template>

  <template x-if="summary && !summaryError && summary.by_event_type.length === 0">
    <div class="p-8 text-center">
      <i data-lucide="check-circle-2" class="w-8 h-8 mx-auto text-emerald-400/60 mb-2"></i>
      <p class="text-[13px] text-ink-300 font-medium">
        Nothing logged in the last <span x-text="filters.sinceHours"></span>h
      </p>
      <p class="text-[12px] text-ink-500 mt-1">
        A healthy system has 0 errors here — that's the goal.
      </p>
    </div>
  </template>

  <template x-if="summary && !summaryError && summary.by_event_type.length > 0">
    <div class="divide-y divide-white/[0.06]">
      <template x-for="row in summary.by_event_type" :key="row.event_type + ':' + row.severity">
        <button @click="filterByEventType(row.event_type)"
                class="w-full text-left px-4 py-3 hover:bg-white/[0.02] transition-colors flex items-center justify-between cursor-pointer">
          <div class="flex items-center gap-3 min-w-0">
            <span class="text-[11px] px-2 py-0.5 rounded font-medium border flex-shrink-0"
                  :class="row.severity === 3 ? 'border-red-500/30 text-red-300'
                        : row.severity === 2 ? 'border-amber-500/30 text-amber-300'
                        : 'border-white/[0.08] text-ink-300'"
                  x-text="row.severity === 3 ? 'high' : row.severity === 2 ? 'med' : 'low'"></span>
            <span class="font-mono text-[13px] text-cmdop-300 truncate"
                  :title="row.event_type" x-text="row.event_type"></span>
          </div>
          <div class="flex items-center gap-4 flex-shrink-0 ml-3">
            <span class="text-[11px] text-ink-500 font-mono"
                  :title="formatTs(row.latest_at)"
                  x-text="'latest ' + formatRelative(row.latest_at)"></span>
            <span class="text-[13px] font-semibold text-ink-100 font-mono tracking-tight" x-text="row.count"></span>
          </div>
        </button>
      </template>
    </div>
  </template>
</div>