{% extends "layout.html" %}
{% block content %}
<div class="az-page">
  <section class="az-panel">
    <div class="az-panel-header">
      <div>
        <h2 class="az-panel-title">Logs</h2>
        <div class="az-panel-meta">Recent scheduler and task log records captured by the dashboard log handler.</div>
      </div>
      <div class="az-chip-row">
        <span class="az-badge az-badge--neutral">Auto-refresh 10s</span>
      </div>
    </div>

    <form id="log-filters" class="az-filter-bar"
          hx-get="partials/table" hx-target="#logs-table" hx-swap="innerHTML"
          hx-trigger="change, submit from:#log-filters">
      <label class="az-field az-field--search">
        <span>Task ID</span>
        <input name="task_id" value="{{ filters.task_id }}" placeholder="task id" class="az-input" />
      </label>
      <label class="az-field az-field--search">
        <span>Run ID</span>
        <input name="run_id" value="{{ filters.run_id }}" placeholder="run id" class="az-input" />
      </label>
      <label class="az-field">
        <span>Level</span>
        <select name="level" class="az-select">
          <option value="">Any level</option>
          <option {% if filters.level == "DEBUG" %}selected{% endif %}>DEBUG</option>
          <option {% if filters.level == "INFO" %}selected{% endif %}>INFO</option>
          <option {% if filters.level == "WARNING" %}selected{% endif %}>WARNING</option>
          <option {% if filters.level == "ERROR" %}selected{% endif %}>ERROR</option>
          <option {% if filters.level == "CRITICAL" %}selected{% endif %}>CRITICAL</option>
        </select>
      </label>
      <label class="az-field az-field--search">
        <span>Search</span>
        <input name="q" value="{{ filters.q }}" placeholder="message text" class="az-input" />
      </label>
      <label class="az-field">
        <span>Limit</span>
        <input name="limit" value="{{ filters.limit }}" class="az-input az-input--compact" />
      </label>
      <button class="az-button az-button--primary">Filter</button>
    </form>

    <div id="logs-table"
         hx-get="partials/table"
         hx-include="#log-filters"
         hx-trigger="load once, every 10s"
         hx-swap="innerHTML"
         class="az-table-wrap">
      {% include "logs/partials/table.html" %}
    </div>
  </section>
</div>
{% endblock %}