{# Cooperative control panel. POSTs write the control_state row; the monitor
   obeys it within ~3s. All actions carry the X-Avai-Token header (injected
   from localStorage by dashboard.html); the server fails closed without it.
   Swapped into #control on load/poll and after every action. #}
{% from "partials/_macros.html" import btn %}
{% set disabled = (ctrl.disabled_collectors.split(',') if ctrl and ctrl.disabled_collectors else []) %}
{% set paused = ctrl and ctrl.paused %}
<div class="bg-slate-900 border border-slate-800 rounded-lg p-5 space-y-4">
  <div class="flex items-center justify-between">
    <h3 class="text-[10px] uppercase tracking-widest text-slate-400">monitor control</h3>
    <span class="text-xs flex items-center gap-2">
      {% if alive %}
        <span class="inline-block w-2 h-2 rounded-full bg-emerald-400"></span>
        <span class="text-slate-300">
          {{ ctrl.status or "running" }}{% if ctrl and ctrl.pid %} · pid {{ ctrl.pid }}{% endif %}
        </span>
      {% else %}
        {# Offline is a critical state (data is stale) — surface it as a clear
           red badge, not a muted grey dot that blends into the chrome. #}
        <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-red-800 bg-red-900/40 text-red-300 font-semibold uppercase tracking-wider text-[10px]">
          <span class="inline-block w-1.5 h-1.5 rounded-full bg-red-500"></span>monitor offline
        </span>
      {% endif %}
    </span>
  </div>

  {% if not control_enabled %}
    <div class="text-amber-400/90 text-xs bg-amber-950/30 border border-amber-900/40 rounded p-2">
      Control is disabled. Set <span class="font-mono">AVAI_CONTROL_TOKEN</span> on the
      dashboard process to enable it, then paste the token below.
    </div>
  {% endif %}

  {# Two columns on wide screens so the panel fills its width instead of
     leaving the right half empty: left = operate now, right = manage. #}
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4 items-start">

  {# ===== left column: operate ===== #}
  <div class="space-y-4">
  {# Token lives only in the browser (localStorage), never server-rendered. #}
  <div>
    <input id="control-token" type="password" autocomplete="off"
           placeholder="control token"
           aria-label="control token"
           oninput="localStorage.setItem('avai_control_token', this.value)"
           class="w-full bg-slate-950 border border-slate-700 rounded-md px-3 py-2 text-xs text-slate-200 font-mono focus:border-slate-500" />
  </div>

  {# pause / resume + scan now. resume = success (positive), pause = secondary
     (quieter), scan now = primary (the prominent immediate action). #}
  <div class="flex flex-wrap items-center gap-2">
    {% if paused %}
      {{ btn('▶ resume', 'success', extra='hx-post="/control/resume" hx-target="#control" hx-swap="innerHTML"') }}
    {% else %}
      {{ btn('⏸ pause', 'secondary', extra='hx-post="/control/pause" hx-target="#control" hx-swap="innerHTML"') }}
    {% endif %}
    {{ btn('⟳ scan now', 'primary', extra='hx-post="/control/scan-now" hx-target="#control" hx-swap="innerHTML"') }}
    {% if paused %}<span class="text-amber-400 text-xs self-center">scanning paused</span>{% endif %}
  </div>

  {# live settings — `apply` is the primary action that commits this form. #}
  <form hx-post="/control/settings" hx-target="#control" hx-swap="innerHTML"
        class="flex flex-wrap items-end gap-3 text-xs text-slate-300">
    <label class="flex flex-col gap-1">
      <span class="text-slate-500">interval (s)</span>
      <input name="interval" type="number" min="5"
             value="{{ ctrl.interval_override if ctrl and ctrl.interval_override else (ctrl.current_interval if ctrl else '') }}"
             class="w-24 bg-slate-950 border border-slate-700 rounded-md px-3 py-2 focus:border-slate-500" />
    </label>
    <label class="flex flex-col gap-1">
      <span class="text-slate-500">judge</span>
      <select name="judge" class="bg-slate-950 border border-slate-700 rounded-md px-3 py-2 focus:border-slate-500">
        <option value="1" {% if not ctrl or ctrl.judge_enabled %}selected{% endif %}>on</option>
        <option value="0" {% if ctrl and not ctrl.judge_enabled %}selected{% endif %}>off</option>
      </select>
    </label>
    <label class="flex flex-col gap-1">
      <span class="text-slate-500">enrich</span>
      <select name="enrich" class="bg-slate-950 border border-slate-700 rounded-md px-3 py-2 focus:border-slate-500">
        <option value="1" {% if not ctrl or ctrl.enrich_enabled %}selected{% endif %}>on</option>
        <option value="0" {% if ctrl and not ctrl.enrich_enabled %}selected{% endif %}>off</option>
      </select>
    </label>
    {{ btn('apply', 'primary', type='submit') }}
  </form>
  </div>{# /left column #}

  {# ===== right column: manage ===== #}
  <div class="space-y-3 lg:border-l lg:border-slate-800 lg:pl-8">
  {# per-collector enable/disable — each is a state toggle (aria-pressed
     reflects on/off so screen readers announce the current state). #}
  <details class="text-xs">
    <summary class="cursor-pointer text-slate-400 select-none py-1">
      scanners ({{ collectors|length - disabled|length }}/{{ collectors|length }} on)
    </summary>
    <div class="mt-2 grid grid-cols-2 md:grid-cols-3 gap-1.5">
      {% for name in collectors %}
        {% set off = name in disabled %}
        <button type="button"
                aria-pressed="{{ 'false' if off else 'true' }}"
                aria-label="{{ name }} scanner, currently {{ 'off' if off else 'on' }}"
                hx-post="/control/collector/{{ name }}/{{ 'on' if off else 'off' }}"
                hx-target="#control" hx-swap="innerHTML"
                class="flex items-center justify-between gap-2 px-2 py-1.5 rounded-md border transition-colors
                       {{ 'border-slate-800 text-slate-600 bg-slate-950 hover:bg-slate-900' if off else 'border-slate-700 text-slate-200 bg-slate-800/40 hover:bg-slate-700/50' }}">
          <span class="font-mono truncate">{{ name }}</span>
          <span class="{{ 'text-slate-600' if off else 'text-emerald-400' }}">{{ 'off' if off else 'on' }}</span>
        </button>
      {% endfor %}
    </div>
  </details>

  {# maintenance one-shots. Routine actions are secondary; the two
     consequential ones read as warning (recoverable) / danger (irreversible). #}
  <details class="text-xs">
    <summary class="cursor-pointer text-slate-400 select-none py-1">maintenance</summary>
    <div class="mt-2 flex flex-wrap gap-2">
      {{ btn('prune to size', 'secondary', extra='hx-post="/control/maintenance/prune" hx-target="#control" hx-swap="innerHTML"') }}
      {{ btn('re-judge', 'secondary', extra='hx-post="/control/maintenance/rejudge" hx-target="#control" hx-swap="innerHTML"') }}
      {{ btn('re-narrate', 'secondary', extra='hx-post="/control/maintenance/renarrate" hx-target="#control" hx-swap="innerHTML"') }}
      {{ btn('reset baseline', 'warning', extra='hx-post="/control/maintenance/reset_baseline" hx-target="#control" hx-swap="innerHTML" hx-confirm="Reset the host baseline? Run history is dropped and novelty re-learns over the next runs."') }}
      {{ btn('clear data', 'danger', extra='hx-post="/control/maintenance/clear" hx-target="#control" hx-swap="innerHTML" hx-confirm="Wipe ALL collected telemetry, runs, verdicts, narratives and risk scores? This cannot be undone."') }}
    </div>
  </details>

  {% if ctrl and ctrl.command_result %}
    <div class="text-xs text-slate-500">last action: <span class="text-slate-300 font-mono">{{ ctrl.command_result }}</span></div>
  {% endif %}
  </div>{# /right column #}

  </div>{# /two-column grid #}
</div>