{# Plan 40 Phase 6 — event detail drawer.
   Opens from an activity row click. Renders the audit-metadata
   fields we have (channel, outcome, duration, lens of message
   text, request_id, optional reason for unauthorized events).
   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-md') %}
    <div class="flex items-center justify-between p-4 border-b border-white/[0.06]">
      <div>
        <h3 class="text-[13px] font-semibold text-ink-100 tracking-tight">Event detail</h3>
        <p class="text-[11px] text-ink-500 mt-0.5 font-mono"
           :title="drawer.event && formatTs(drawer.event.created_at)"
           x-text="drawer.event && (formatRelative(drawer.event.created_at) + ' · ' + formatTs(drawer.event.created_at))"></p>
      </div>
      <button @click="closeDrawer()" class="text-ink-500 hover:text-ink-200 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-3 text-[13px]">
      <template x-if="drawer.event">
        <div class="space-y-3">
          <div class="grid grid-cols-2 gap-x-3 gap-y-2">
            <div class="text-[11px] uppercase tracking-wider text-ink-500">Channel</div>
            <div class="font-mono text-cmdop-300" x-text="drawer.event.channel_kind"></div>

            <div class="text-[11px] uppercase tracking-wider text-ink-500">Outcome</div>
            <div>
              <span x-show="drawer.event.success" class="text-emerald-300">success</span>
              <span x-show="!drawer.event.success" class="text-red-300">failure</span>
            </div>

            <div class="text-[11px] uppercase tracking-wider text-ink-500">Duration</div>
            <div class="text-ink-200 font-mono" x-text="drawer.event.duration_ms + ' ms'"></div>

            <div class="text-[11px] uppercase tracking-wider text-ink-500">User ID</div>
            <div class="font-mono text-ink-200 break-all text-[12px]" x-text="drawer.event.external_user_id"></div>

            <div class="text-[11px] uppercase tracking-wider text-ink-500">Channel ID</div>
            <div class="font-mono text-ink-200 break-all text-[12px]" x-text="drawer.event.external_channel_id || '—'"></div>

            <div class="text-[11px] uppercase tracking-wider text-ink-500">Message len</div>
            <div class="text-ink-200 font-mono" x-text="drawer.event.message_len + ' chars'"></div>

            <div class="text-[11px] uppercase tracking-wider text-ink-500">Response len</div>
            <div class="text-ink-200 font-mono" x-text="drawer.event.response_len + ' chars'"></div>

            <div class="text-[11px] uppercase tracking-wider text-ink-500">Request ID</div>
            <div class="font-mono text-[12px] text-ink-200 break-all" x-text="drawer.event.request_id || '—'"></div>

            <template x-if="drawer.event.reason">
              <div class="text-[11px] uppercase tracking-wider text-ink-500">Reason</div>
            </template>
            <template x-if="drawer.event.reason">
              <div class="font-mono text-amber-300" x-text="drawer.event.reason"></div>
            </template>
          </div>

          <div class="pt-3 border-t border-white/[0.06] text-[11px] text-ink-500">
            Message and response bodies are intentionally NOT logged — only their
            lengths. To inspect content, correlate by <code class="text-ink-300 font-mono" x-text="drawer.event.request_id"></code>
            with the api_server logs (<code class="font-mono">bot_chat.invoked</code> /
            <code class="font-mono">bot_chat.unauthorized</code>).
          </div>
        </div>
      </template>
    </div>
{% endcall %}