{% extends "admin/base.html" %}

{% block title %}Logs — cmdop admin{% endblock %}

{% block content %}
{# Plan 46 Phase 2 + 61/2b W3 — merged Logs + Security page.

   The category chip in the filter bar limits the events table to
   All / App / Security / Auth. /admin/security 301-redirects here
   with ?category=security so old links work.

   Data still comes from /api/admin/logs/* (the security view is a
   server-side category filter over security_event). #}
{% from 'admin/components/ui.html' import page_header, tooltip %}

<div class="space-y-6"
     x-data="logsPage()"
     x-init="initFromQuery(); load()">

  {{ page_header(
    'Logs',
    'Events from across the relay — application errors, auth audit, slow requests, gRPC + worker + Jarvis failures.',
    help_anchor='logs',
    actions=[
      {'label': 'Refresh', 'kind': 'secondary', 'icon': 'refresh-cw',
       'attrs': '@click="load()"'},
    ]
  ) }}

  <div class="flex flex-wrap items-center gap-4 text-[12px] text-ink-400">
    <label class="flex items-center gap-2">
      <input type="checkbox" x-model="autoRefresh" @change="onAutoRefreshChange()"
             class="rounded bg-black border-white/[0.12] text-cmdop-500 focus:ring-cmdop-500/30" />
      Auto-refresh 15s
    </label>
    <span x-show="serverAdmin" class="text-cmdop-400 font-medium">Cross-fleet view (server admin)</span>
    <span x-show="!serverAdmin">Scoped to {{ fleet.name }}.</span>
  </div>

  {# Plan 61/2b W3 — category chip strip. Tells the user up-front what
     bucket the table is filtered to. The "Security" chip surfaces the
     audit view that used to live at /admin/security. #}
  <div class="flex flex-wrap items-center gap-2 text-[12px]">
    <span class="text-ink-500 uppercase tracking-wider text-[11px]">category</span>
    <template x-for="opt in [
      ['all', 'All'],
      ['app', 'App'],
      ['security', 'Security'],
      ['auth', 'Auth']
    ]" :key="opt[0]">
      <button @click="setCategory(opt[0])"
              :class="filters.category === opt[0]
                ? 'bg-white/[0.06] text-ink-100 font-medium border border-cmdop-500/30'
                : 'text-ink-400 hover:text-ink-100 hover:bg-white/[0.03] border border-white/[0.06]'"
              class="px-2 py-0.5 rounded transition-colors cursor-pointer"
              x-text="opt[1]"></button>
    </template>
    {{ tooltip('Security / Auth = audit events (sign-ins, password changes, brute-force locks). Severity 1 = info, 2 = noteworthy, 3 = action required.') }}
  </div>

  {% include 'admin/components/logs/_health_banner.html' %}
  {% include 'admin/components/logs/_summary_pane.html' %}
  {% include 'admin/components/logs/_events_pane.html' %}

  {% include 'admin/components/logs/_event_drawer.html' %}
</div>

<script src="/static/admin/logs/logs.js?v={{ asset_version() }}"></script>
{% endblock %}