{# Events pane — paginated table with severity/event_type/search filters.
   Plan 58 — Plan 51 cursor pagination surfaced as a "Load more" button,
   per-pane error fallback, friendlier empty state. #}
<div class="card">
  <div class="px-4 py-3 border-b border-white/[0.06]">
    <div class="flex items-center justify-between mb-3">
      <div>
        <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">Recent events</h2>
        <p class="text-[11px] text-ink-500 mt-0.5">
          <span class="font-mono" x-text="(events && events.length) || 0"></span> rows shown · click for traceback
        </p>
      </div>
      <button @click="clearFilters()" x-show="filters.eventType || filters.q || filters.severityMin > 1"
              class="text-[12px] text-ink-400 hover:text-ink-100 cursor-pointer">
        Clear filters
      </button>
    </div>
    <div class="flex flex-wrap items-center gap-2 text-[12px]">
      <span class="text-ink-500 uppercase tracking-wider text-[11px]">severity ≥</span>
      <button @click="setSeverityMin(1)" :class="filters.severityMin === 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-0.5 rounded transition-colors cursor-pointer">all</button>
      <button @click="setSeverityMin(2)" :class="filters.severityMin === 2 ? 'border border-amber-500/30 text-amber-300' : 'text-ink-400 hover:text-ink-100 hover:bg-white/[0.03]'"
              class="px-2 py-0.5 rounded transition-colors cursor-pointer">med+</button>
      <button @click="setSeverityMin(3)" :class="filters.severityMin === 3 ? 'border border-red-500/30 text-red-300' : 'text-ink-400 hover:text-ink-100 hover:bg-white/[0.03]'"
              class="px-2 py-0.5 rounded transition-colors cursor-pointer">high only</button>

      <template x-if="filters.eventType">
        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded border border-cmdop-500/30 text-cmdop-300">
          <span class="font-mono" x-text="filters.eventType"></span>
          <button @click="filterByEventType('')" class="hover:text-ink-100 cursor-pointer"
                  aria-label="Clear event type filter">×</button>
        </span>
      </template>

      <input type="text" x-model="filters.q" @input.debounce.300ms="reloadEvents()"
             placeholder="search metadata…"
             aria-label="Search event metadata"
             class="ml-auto px-2 py-1 rounded bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 text-[12px] text-ink-200 placeholder-ink-600 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 w-64 transition-colors" />
    </div>
  </div>

  <template x-if="events === null && !eventsError">
    <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 events…
    </div>
  </template>

  <template x-if="eventsError">
    <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 events.
        <button @click="reloadEvents()" class="underline hover:text-amber-200 ml-1 cursor-pointer">Retry</button>
      </div>
    </div>
  </template>

  <template x-if="events && !eventsError && events.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">No events match the current filters</p>
      <p class="text-[12px] text-ink-500 mt-1">
        Widen the time window or lower the severity floor — or enjoy the silence,
        no errors means a healthy system.
      </p>
    </div>
  </template>

  <template x-if="events && !eventsError && events.length > 0">
    <div class="divide-y divide-white/[0.06]">
      <template x-for="e in events" :key="e.id">
        <button @click="openDrawer(e)"
                class="w-full text-left px-4 py-3 hover:bg-white/[0.02] transition-colors grid grid-cols-12 gap-3 items-center cursor-pointer">
          <div class="col-span-1">
            <span class="text-[11px] px-1.5 py-0.5 rounded font-medium border"
                  :class="e.severity === 3 ? 'border-red-500/30 text-red-300'
                        : e.severity === 2 ? 'border-amber-500/30 text-amber-300'
                        : 'border-white/[0.08] text-ink-300'"
                  x-text="e.severity === 3 ? 'high' : e.severity === 2 ? 'med' : 'low'"></span>
          </div>
          <div class="col-span-3 font-mono text-[12px] text-cmdop-300 truncate"
               :title="e.event_type" x-text="e.event_type"></div>
          <div class="col-span-5 text-[12px] text-ink-300 truncate"
               :title="(e.metadata && ((e.metadata.exc_type ? e.metadata.exc_type + ': ' : '') + (e.metadata.exc_message || e.metadata.path || e.metadata.method || e.metadata.function || e.metadata.tool || e.metadata.status_code || ''))) || ''">
            <span x-show="e.metadata && e.metadata.exc_type"
                  class="text-red-300 font-medium"
                  x-text="(e.metadata && e.metadata.exc_type) || ''"></span>
            <span x-show="e.metadata && e.metadata.exc_message"> · </span>
            <span class="text-ink-400" x-text="(e.metadata && (e.metadata.exc_message || e.metadata.path || e.metadata.method || e.metadata.function || e.metadata.tool || e.metadata.status_code || '')) || ''"></span>
          </div>
          <div class="col-span-2 text-[11px] text-ink-500 font-mono truncate"
               :title="e.request_id || ''"
               x-text="e.request_id ? e.request_id.slice(0,8) : '—'"></div>
          <div class="col-span-1 text-[11px] text-ink-500 text-right font-mono"
               :title="formatTs(e.occurred_at)"
               x-text="formatRelative(e.occurred_at)"></div>
        </button>
      </template>
    </div>
  </template>

  {# Plan 58 — cursor pagination (Plan 51 surfaced next_cursor; UI now exposes it). #}
  <div x-show="events && !eventsError && nextCursor" x-cloak
       class="px-4 py-3 border-t border-white/[0.06] flex justify-center">
    <button @click="loadMore()"
            :disabled="loadingMore"
            class="inline-flex items-center gap-2 px-3 py-1.5 text-[12px] text-ink-300 hover:text-ink-100 border border-white/[0.08] hover:border-white/[0.16] rounded-md transition-colors disabled:opacity-40 cursor-pointer">
      <i x-show="!loadingMore" data-lucide="chevron-down" class="w-3.5 h-3.5"></i>
      <i x-show="loadingMore" data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i>
      <span x-text="loadingMore ? 'Loading…' : 'Load more'"></span>
    </button>
  </div>
</div>