{% extends "base.html" %}
{% block title %}Centralized Logs{% endblock %}
{% block content %}
<div class="container-fluid mt-3">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">Centralized Logs</h4>
    <span class="badge bg-secondary">{{ rows|length }} entries</span>
  </div>

  <div class="card mb-3">
    <div class="card-body py-2">
      <form id="filterForm" class="row g-2 align-items-end" method="get" action="/logs">
        <div class="col-md-3">
          <label class="form-label small mb-1">Component</label>
          <input type="text" name="component" class="form-control form-control-sm"
                 placeholder="e.g. icdev.kanban" value="{{ request.args.get('component','') }}">
        </div>
        <div class="col-md-2">
          <label class="form-label small mb-1">Level</label>
          <select name="level" class="form-select form-select-sm">
            <option value="">All</option>
            {% for lvl in ['DEBUG','INFO','WARNING','ERROR','CRITICAL'] %}
            <option value="{{ lvl }}" {% if request.args.get('level') == lvl %}selected{% endif %}>{{ lvl }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-3">
          <label class="form-label small mb-1">Since (ISO)</label>
          <input type="text" name="since" class="form-control form-control-sm"
                 placeholder="2026-01-01T00:00:00" value="{{ request.args.get('since','') }}">
        </div>
        <div class="col-md-3">
          <label class="form-label small mb-1">Contains</label>
          <input type="text" name="contains" class="form-control form-control-sm"
                 placeholder="keyword" value="{{ request.args.get('contains','') }}">
        </div>
        <div class="col-md-1">
          <button class="btn btn-sm btn-primary w-100" type="submit">Filter</button>
        </div>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-body p-0">
      <div class="table-responsive" style="max-height:65vh; overflow-y:auto;">
        <table class="table table-sm table-hover mb-0">
          <thead class="table-dark sticky-top">
            <tr>
              <th style="width:160px">Timestamp</th>
              <th style="width:120px">Component</th>
              <th style="width:80px">Level</th>
              <th>Message</th>
            </tr>
          </thead>
          <tbody>
            {% for row in rows %}
            <tr class="{% if row.level in ('ERROR','CRITICAL') %}table-danger{% elif row.level == 'WARNING' %}table-warning{% endif %}">
              <td class="text-muted small">{{ row.ts }}</td>
              <td class="small">{{ row.component }}</td>
              <td><span class="badge bg-{% if row.level == 'ERROR' or row.level == 'CRITICAL' %}danger{% elif row.level == 'WARNING' %}warning text-dark{% elif row.level == 'DEBUG' %}secondary{% else %}info{% endif %}">{{ row.level }}</span></td>
              <td class="small text-break">{{ row.message }}</td>
            </tr>
            {% else %}
            <tr><td colspan="4" class="text-center text-muted py-4">No log entries match the current filters.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {% include "includes/iqe_query_widget.html" %}
</div>
{% endblock %}