{# Event detail drawer — traceback + metadata + "find related" by request_id.
   Chrome (teleport + backdrop + right panel) comes from the shared
   `drawer()` macro — see admin/components/ui.html. #}
{% from 'admin/components/ui.html' import drawer %}
{% call drawer('drawer.open', 'closeDrawer()', width='max-w-3xl') %}
    <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">
          <span class="text-[11px] px-1.5 py-0.5 rounded font-medium border"
                :class="drawer.event && drawer.event.severity === 3 ? 'border-red-500/30 text-red-300'
                      : drawer.event && drawer.event.severity === 2 ? 'border-amber-500/30 text-amber-300'
                      : 'border-white/[0.08] text-ink-300'"
                x-text="drawer.event && (drawer.event.severity === 3 ? 'high' : drawer.event.severity === 2 ? 'med' : 'low')"></span>
          <h3 class="text-[13px] font-mono text-cmdop-300 truncate"
              x-text="drawer.event && drawer.event.event_type"></h3>
        </div>
        <p class="text-[11px] text-ink-500 mt-1 font-mono"
           :title="drawer.event && formatTs(drawer.event.occurred_at)"
           x-text="drawer.event && (formatRelative(drawer.event.occurred_at) + ' · ' + formatTs(drawer.event.occurred_at))"></p>
      </div>
      <button @click="closeDrawer()" class="text-ink-500 hover:text-ink-200 ml-3 flex-shrink-0 cursor-pointer"
              aria-label="Close event drawer">
        <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">
          {# Quick facts grid #}
          <div class="grid grid-cols-3 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]">Request ID</div>
              <div class="font-mono text-ink-200 mt-0.5 break-all" x-text="drawer.event.request_id || '—'"></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]">Source IP</div>
              <div class="font-mono text-ink-200 mt-0.5" x-text="drawer.event.source_ip || '—'"></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>

          {# Exception summary #}
          <template x-if="drawer.event.metadata && drawer.event.metadata.exc_type">
            <div class="rounded-md border border-red-500/30 bg-red-500/[0.04] p-3">
              <div class="text-[11px] uppercase tracking-wider text-red-300 mb-1">Exception</div>
              <div class="font-mono text-red-200 text-[13px]" x-text="drawer.event.metadata.exc_type"></div>
              <div class="font-mono text-red-100/80 text-[12px] mt-1 whitespace-pre-wrap break-words"
                   x-text="drawer.event.metadata.exc_message || ''"></div>
            </div>
          </template>

          {# Traceback #}
          <template x-if="drawer.event.metadata && drawer.event.metadata.traceback_tail">
            <div>
              <div class="text-[11px] uppercase tracking-wider text-ink-500 mb-1">Traceback (tail)</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="drawer.event.metadata.traceback_tail"></pre>
            </div>
          </template>

          {# Other metadata as JSON #}
          <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"
                 x-text="JSON.stringify(drawer.event.metadata, null, 2)"></pre>
          </div>

          {# Related rows (correlated by request_id) #}
          <div x-show="drawer.event.request_id">
            <div class="flex items-center justify-between mb-2">
              <div class="text-[11px] uppercase tracking-wider text-ink-500">Related by request_id</div>
              <button @click="loadRelated()" x-show="drawer.related === null"
                      class="text-[12px] px-2 py-1 rounded border border-white/[0.08] hover:border-white/[0.16] text-ink-300 transition-colors cursor-pointer">
                Find related
              </button>
            </div>
            <template x-if="drawer.related && drawer.related.length === 0">
              <div class="text-[12px] text-ink-500">No other rows share this request_id.</div>
            </template>
            <template x-if="drawer.related && drawer.related.length > 0">
              <div class="space-y-1.5">
                <template x-for="r in drawer.related" :key="r.kind + ':' + r.id">
                  <div class="text-[12px] flex items-center gap-3 px-2 py-1.5 rounded-md bg-black border border-white/[0.06]">
                    <span class="font-mono text-[10px] px-1.5 rounded border flex-shrink-0"
                          :class="r.kind === 'security_event' ? 'border-red-500/30 text-red-300' : 'border-cmdop-500/30 text-cmdop-300'"
                          x-text="r.kind"></span>
                    <span class="font-mono text-cmdop-300 truncate" :title="r.event_type" x-text="r.event_type"></span>
                    <span class="ml-auto text-ink-500 font-mono flex-shrink-0"
                          :title="formatTs(r.occurred_at)"
                          x-text="formatRelative(r.occurred_at)"></span>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>
{% endcall %}