{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Log viewer. The dropdown is rendered from the server-side LOG_SOURCES table:
   the browser posts a key, never a path, so this page cannot become a file read. {% endcomment %}

{% block title %}Logs{% endblock %}

{% block styles %}
<style>
  .cp-log         { font-family:var(--cp-font-mono); font-size:.78rem; line-height:1.5;
                    background:var(--cp-bg-subtle); border:1px solid var(--cp-border);
                    border-radius:var(--cp-radius); max-height:34rem; overflow:auto; }
  .cp-log__row    { display:flex; gap:.75rem; padding:.1rem .75rem; white-space:pre-wrap;
                    word-break:break-word; border-left:3px solid transparent; }
  .cp-log__row:hover          { background:var(--cp-primary-soft); }
  .cp-log__row.is-error       { border-left-color:var(--cp-danger); }
  .cp-log__row.is-warning     { border-left-color:var(--cp-accent); }
  .cp-log__row.is-debug       { color:var(--cp-neutral); }
  .cp-log__n      { color:var(--cp-neutral); user-select:none; min-width:3.5rem; text-align:right; }
  .cp-path        { font-family:var(--cp-font-mono); font-size:.76rem; color:var(--cp-neutral); }
</style>
{% endblock %}

{% block content %}
<div ng-controller="logViewerController">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Logs</h1>
      <p class="text-muted mb-0 small">
        A fixed set of server log files. The panel resolves the file server-side,
        so no path from this page is ever opened.
      </p>
    </div>
    <div class="d-flex align-items-center gap-2">
      <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" id="cpAutoRefresh" ng-model="autoRefresh">
        <label class="form-check-label small" for="cpAutoRefresh">Auto-refresh</label>
      </div>
      <button type="button" class="btn btn-outline-secondary btn-sm"
              ng-click="load()" ng-disabled="busy">
        <i class="fas fa-rotate me-1"></i>Refresh
      </button>
    </div>
  </div>

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="errorMessage"></span>
  </div>

  <div class="card mb-3">
    <div class="card-body">
      <div class="row g-2 align-items-end">
        <div class="col-12 col-lg-4">
          <label class="form-label small mb-1" for="cpLogSource">Log file</label>
          <select class="form-select" id="cpLogSource" ng-model="source" ng-change="load()">
            {% for entry in sources %}
              <option value="{{ entry.key }}">{{ entry.label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-6 col-lg-2">
          <label class="form-label small mb-1" for="cpLogLines">Lines</label>
          <select class="form-select" id="cpLogLines" ng-model="lines" ng-change="load()">
            <option ng-value="100">100</option>
            <option ng-value="200">200</option>
            <option ng-value="500">500</option>
            <option ng-value="1000">1000</option>
            <option ng-value="5000">5000</option>
          </select>
        </div>
        <div class="col-6 col-lg-2">
          <label class="form-label small mb-1" for="cpLogLevel">Level</label>
          <select class="form-select" id="cpLogLevel" ng-model="level" ng-change="load()">
            {% for level in levels %}
              <option value="{{ level }}">{{ level|capfirst }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-lg-4">
          <label class="form-label small mb-1" for="cpLogSearch">Search</label>
          <div class="input-group">
            <span class="input-group-text"><i class="fas fa-magnifying-glass"></i></span>
            <input type="search" class="form-control" id="cpLogSearch" ng-model="search"
                   ng-model-options="{debounce:350}" ng-change="load()"
                   placeholder="Substring, case-insensitive">
          </div>
        </div>
      </div>

      <div class="d-flex flex-wrap gap-3 align-items-center mt-3 small" ng-cloak>
        <span class="cp-path" ng-bind="path"></span>
        <span class="text-muted" ng-bind="note"></span>
        <span class="ms-auto d-flex gap-2">
          <span class="badge text-bg-danger" ng-show="counts.error"
                ng-bind="counts.error + ' error'"></span>
          <span class="badge text-bg-warning" ng-show="counts.warning"
                ng-bind="counts.warning + ' warning'"></span>
          <span class="badge text-bg-secondary"
                ng-bind="matched + ' of ' + scanned + ' lines shown'"></span>
        </span>
      </div>
    </div>
  </div>

  <div class="alert alert-info py-2 px-3" ng-show="notice" ng-cloak>
    <i class="fas fa-circle-info me-1"></i><span ng-bind="notice"></span>
  </div>

  <div ng-show="busy && !entries.length" class="text-center py-5 text-muted" ng-cloak>
    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
    Reading the log…
  </div>

  <div class="cp-log" ng-cloak ng-show="entries.length">
    <div class="cp-log__row" ng-class="'is-' + entry.level" ng-repeat="entry in entries track by $index">
      <span class="cp-log__n" ng-bind="entry.n"></span>
      <span ng-bind="entry.text"></span>
    </div>
  </div>

  <div class="text-center text-muted py-5" ng-cloak ng-show="!busy && !entries.length && !notice">
    <i class="fas fa-file-lines fa-2x mb-2 d-block"></i>
    Nothing matched this filter.
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'serverStatus/serverStatus.js' %}"></script>
{% endblock %}