{% extends "base.html" %}
{% import "_macros.html" as ui %}
{% block title %}Query log · sagittarius{% endblock %}
{% block content %}
<hgroup>
  <h1 class="sgt-page-title">{% call ui::icon("log") %}{% endcall %}Query log</h1>
  <p class="sgt-muted">Resolved queries, newest first. History is persisted; the newest rows stream live.</p>
</hgroup>

<div
  class="sgt-actions"
  data-signals="{f_outcome: '', f_text: '', queries: 0, blocked: 0, cached: 0, forwarded: 0, oldest: {{ oldest }}}"
  data-init="@get('/events')"
>
  <select data-bind="f_outcome" aria-label="Filter by outcome">
    <option value="">All outcomes</option>
    <option value="blocked">Blocked</option>
    <option value="forwarded">Forwarded</option>
    <option value="cached">Cached</option>
    <option value="local">Local</option>
    <option value="other">Other</option>
  </select>
  <input type="search" data-bind="f_text" placeholder="Filter by domain or client" aria-label="Filter by domain or client" />
</div>

<div class="sgt-table-wrap">
  <table>
    <thead>
      <tr>
        <th>Client</th>
        <th>Domain</th>
        <th>Type</th>
        <th>Outcome</th>
        <th class="sgt-num">Latency</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody id="log-body">
      {% for row in rows %}{{ row|safe }}{% endfor %}
    </tbody>
  </table>
</div>

<div class="sgt-actions">
  <button class="secondary" data-show="$oldest > 0" data-on:click="@get('/log/older?before=' + $oldest)">
    {% call ui::icon("older") %}{% endcall %}Load older
  </button>
</div>
{% endblock %}