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

{% block title %}Logs | pobsync{% endblock %}

{% block content %}
  <header class="page-header">
    <div class="page-title">
      <div class="page-kicker">Operations</div>
      <h1>Logs</h1>
      <div class="page-subtitle">Filter pobsync service logs by unit, priority, host, run, or message content.</div>
    </div>
    <section class="actions" aria-label="Log actions">
      <a class="button-link secondary" href="{% url 'dashboard' %}">Back to dashboard</a>
    </section>
  </header>

  <section class="panel">
    <h2>Filter</h2>
    <form method="get" class="filter-form">
      <div class="field">
        <label for="unit">Unit</label>
        <select id="unit" name="unit">
          <option value="">All pobsync units</option>
          {% for unit in units %}
            <option value="{{ unit }}" {% if selected_unit == unit %}selected{% endif %}>{{ unit }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="field">
        <label for="priority">Priority</label>
        <select id="priority" name="priority">
          {% for value, label in priorities.items %}
            <option value="{{ value }}" {% if selected_priority == value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="field">
        <label for="window">Time window</label>
        <select id="window" name="window">
          {% for value, label in time_windows.items %}
            <option value="{{ value }}" {% if selected_window == value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="field">
        <label for="host">Host contains</label>
        <input id="host" name="host" value="{{ host_filter }}" placeholder="web-01.example.test">
      </div>
      <div class="field">
        <label for="run">Run</label>
        <input id="run" name="run" value="{{ run_filter }}" inputmode="numeric" placeholder="12">
      </div>
      <div class="field">
        <label for="q">Message contains</label>
        <input id="q" name="q" value="{{ query }}">
      </div>
      <div class="form-actions">
        <button type="submit">Filter logs</button>
        <a class="button-link secondary" href="{% url 'logs' %}">Clear</a>
      </div>
    </form>
  </section>

  <section class="panel">
    <h2>Messages</h2>
    {% if error %}
      <p class="status failed">{{ error }}</p>
    {% else %}
      <pre>{% for line in lines %}{{ line }}
{% empty %}No log messages matched the current filter.
{% endfor %}</pre>
    {% endif %}
  </section>
{% endblock %}