{# Pane 5 — Recent errors (Plan 46 capture).
   DEPRECATED in Plan 57 — the errors KPI is now numeric + a 24-bar
   sparkline in the KPI row (Row 2), and the list view lives on
   /admin/logs. File kept in case the old listing is wanted back. #}
<a href="/admin/logs" class="card p-4 block md:col-span-2 xl:col-span-2">
  <div class="flex items-center justify-between mb-3">
    <div class="flex items-center gap-2">
      <i data-lucide="alert-triangle" class="w-4 h-4 text-cmdop-400"></i>
      <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">Recent errors</h2>
      <span class="text-[11px] text-ink-500 uppercase tracking-wider">(last 24h, sev ≥ medium)</span>
    </div>
    <span class="text-[12px] text-cmdop-300">View all →</span>
  </div>
  <template x-if="data.errors === null">
    <div class="text-[13px] text-ink-500">Loading…</div>
  </template>
  <template x-if="data.errors && data.errors.length === 0">
    <p class="text-[13px] text-ink-500">No errors in last 24h.</p>
  </template>
  <template x-if="data.errors && data.errors.length > 0">
    <div class="space-y-1.5">
      <template x-for="e in data.errors" :key="e.id">
        <div class="grid grid-cols-12 gap-2 items-center text-[12px]">
          <span class="col-span-1 px-1.5 py-0.5 rounded font-medium text-center border text-[10px]"
                :class="e.severity === 3 ? 'border-red-500/30 text-red-300' : 'border-amber-500/30 text-amber-300'"
                x-text="e.severity === 3 ? 'high' : 'med'"></span>
          <span class="col-span-3 font-mono text-cmdop-300 truncate" x-text="e.event_type"></span>
          <span class="col-span-6 text-ink-400 truncate" x-text="e.exc_type || ''"></span>
          <span class="col-span-2 text-ink-500 text-right font-mono" x-text="formatRelative(e.occurred_at)"></span>
        </div>
      </template>
    </div>
  </template>
</a>