{% extends "base.html" %}
{% block title %}Logs{% endblock %}
{% block content %}
<div class="hdr">
  <div><h1>Logs</h1><p class="sub" style="margin:0">Log lines shipped by the server agents: search, filter, tail live, export. {{ stats.total }} lines in the last 24 h · <span class="err">{{ stats.error }} errors</span> · <span class="warn">{{ stats.warn }} warnings</span> · keeping up to {{ '{:,}'.format(plan_cap) }} lines on your plan.</p></div>
  <div class="actions"><a class="btn sm" href="/app/logs/export.csv?{{ query_string }}">Export CSV</a><button class="btn sm" id="tailbtn" type="button">● Live tail</button></div>
</div>
{% if not shipping and not rows %}
<div class="flash info">No server ships logs yet. Open a server → <b>Alert rules</b> → <b>Logs &amp; inventory</b> and add file paths (e.g. <code class="k">/var/log/nginx/error.log</code>) or journal units (e.g. <code class="k">nginx, sshd</code>). Agent 1.2+ tails them and lines appear here within a minute.</div>
{% endif %}
<form method="get" id="filters" class="panel" style="margin-bottom:14px;padding:12px 16px">
  <div class="actions" style="flex-wrap:wrap;gap:8px;align-items:center">
    <input type="search" name="q" value="{{ f.q }}" placeholder="Search text (words, or * wildcards)" style="width:280px" autofocus>
    <select name="server" style="width:auto"><option value="">All servers</option>{% for s in servers %}<option value="{{ s.id }}" {% if f.server_id == s.id %}selected{% endif %}>{{ s.name }}</option>{% endfor %}</select>
    <select name="file" style="width:auto;max-width:260px"><option value="">Any file / unit</option>{% for fl in files %}<option value="{{ fl }}" {% if f.file == fl %}selected{% endif %}>{{ fl }}</option>{% endfor %}{% if f.file and f.file not in files %}<option value="{{ f.file }}" selected>{{ f.file }}</option>{% endif %}</select>
    <div class="seg">{% for r in ranges %}<button type="submit" name="range" value="{{ r }}" class="{% if f.range == r %}on{% endif %}">{{ r }}</button>{% endfor %}</div>
    <input type="hidden" name="range" value="{{ f.range }}" id="rangehid">
    <input type="hidden" name="level" value="{{ f.level }}" id="levelhid">
    <div class="seg" id="levels"><button type="button" data-level="" class="{% if not f.level %}on{% endif %}">any</button>{% for l in levels %}<button type="button" data-level="{{ l }}" class="{% if f.level == l %}on{% endif %}">{{ l }}</button>{% endfor %}</div>
    <button class="btn sm primary">Search</button>{% if f.q or f.level or f.file or f.server_id %}<a class="btn ghost sm" href="/app/logs?range={{ f.range }}">Clear</a>{% endif %}
  </div>
</form>
<div class="panel tight" id="logpanel" style="overflow:hidden">
  <style>
    .lg{font-family:var(--mono);font-size:12.5px;line-height:1.5;border-top:1px solid var(--line)}
    .lg:first-child{border-top:0}
    .lg summary{display:grid;grid-template-columns:150px 110px 64px minmax(90px,180px) 1fr;gap:10px;padding:5px 12px;cursor:pointer;list-style:none;align-items:baseline}
    .lg summary::-webkit-details-marker{display:none}
    .lg summary:hover{background:var(--panel2)}
    .lg .ln{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .lg[open] .ln{white-space:pre-wrap;word-break:break-word}
    .lg .meta{padding:2px 12px 8px 172px;color:var(--muted);font-size:12px}
    .lg.error summary{border-left:3px solid var(--err)}.lg.warn summary{border-left:3px solid var(--warn)}.lg summary{border-left:3px solid transparent}
    .lg .pl{font-size:10.5px;padding:0 6px}
    .lg .srv{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .lg .fl{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #tailbtn.on{color:var(--ok);border-color:rgba(46,204,138,.5)}
    @media (max-width:900px){.lg summary{grid-template-columns:1fr;gap:2px}.lg .meta{padding-left:12px}}
  </style>
  <div id="rows">
  {% with rows = rows|reverse|list %}{% include "_log_rows.html" %}{% endwith %}
  {% if not rows %}<div class="muted small" style="padding:18px 16px" id="emptymsg">No log lines match{% if f.q %} “{{ f.q }}”{% endif %} in the last {{ f.range }}.</div>{% endif %}
  </div>
</div>
<div class="actions" style="margin-top:12px;justify-content:space-between">
  <span class="small muted" id="count">{{ rows|length }} line{{ 's' if rows|length != 1 }} shown{% if rows|length >= 200 %} (newest 200){% endif %}</span>
  {% if rows|length >= 200 %}<a class="btn sm" href="/app/logs?{{ query_string }}&before={{ min_id }}">Load older</a>{% endif %}
</div>
<template id="rowtpl"><details class="lg"><summary><span class="dim"></span><span class="srv"></span><span><span class="pill pl"></span></span><span class="fl"></span><span class="ln"></span></summary><div class="meta"></div></details></template>
{% endblock %}
{% block scripts %}
<script>
(function(){
  var qs = {{ query_string|tojson }};
  var lastId = {{ max_id }};
  var rowsEl = document.getElementById('rows'), tpl = document.getElementById('rowtpl'), btn = document.getElementById('tailbtn'), timer = null, count = {{ rows|length }};
  function esc(s){ return String(s == null ? '' : s); }
  function pillClass(l){ return l === 'error' ? 'err' : l === 'warn' ? 'warn' : l === 'info' ? 'brand' : ''; }
  function render(r){
    var n = tpl.content.firstElementChild.cloneNode(true);
    n.className = 'lg ' + (r.level || '');
    var c = n.querySelector('summary').children;
    c[0].textContent = (r.at_s || '').slice(5); c[0].title = r.at_iso || '';
    c[1].textContent = r.server || ''; c[1].title = r.server || '';
    var p = c[2].firstElementChild; p.textContent = r.level || '—'; p.className = 'pill pl ' + pillClass(r.level);
    c[3].textContent = r.unit || (r.file || '').split('/').pop(); c[3].title = r.file || r.unit || '';
    c[4].textContent = r.line || '';
    n.querySelector('.meta').textContent = (r.source || 'file') + ' · ' + (r.file || r.unit || '') + ' · ' + (r.at_iso || '') + ' · id ' + r.id;
    return n;
  }
  function poll(){
    fetch('/app/logs/tail?since_id=' + lastId + (qs ? '&' + qs : ''), {credentials: 'same-origin', headers: {'Accept': 'application/json'}}).then(function(r){ return r.json(); }).then(function(d){
      var empty = document.getElementById('emptymsg'); if (d.rows.length && empty) empty.remove();
      d.rows.forEach(function(r){ rowsEl.appendChild(render(r)); count++; });
      if (d.rows.length){ lastId = d.last_id; window.scrollTo(0, document.body.scrollHeight); document.getElementById('count').textContent = count + ' lines shown (live)'; }
      while (rowsEl.children.length > 1000) rowsEl.removeChild(rowsEl.firstChild);
    }).catch(function(){});
  }
  btn.addEventListener('click', function(){
    if (timer){ clearInterval(timer); timer = null; btn.classList.remove('on'); btn.textContent = '● Live tail'; }
    else { btn.classList.add('on'); btn.textContent = '■ Stop tail'; poll(); timer = setInterval(poll, 3000); }
  });
  document.querySelectorAll('#levels button').forEach(function(b){ b.addEventListener('click', function(){ document.getElementById('levelhid').value = b.dataset.level; document.getElementById('filters').submit(); }); });
  document.querySelectorAll('.seg button[name=range]').forEach(function(b){ b.addEventListener('click', function(){ document.getElementById('rangehid').disabled = true; }); });
  if (location.hash === '#tail') btn.click();
})();
</script>
{% endblock %}