{% extends "base.html" %}
{% set active_page = "logs" %}
{% block page_title %}Verlauf{% endblock %}
{% block page_sub %}<div class="topbar-sub">{{ selected_name or "kein Archiv-Log" }}</div>{% endblock %}

{% block content %}

<div class="section-head">
  <div>
    <h2 style="font-size:16px;">Log-Verlauf</h2>
    <div class="hint">Ältere, von logrotate rotierte Kopien des Live-Logs — {{ files|length }} Stand{{ 'e' if files|length != 1 else '' }} verfügbar.</div>
  </div>
  <div class="flex gap-2">
    <a href="{{ url_for('logs') }}" class="btn btn-secondary">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
      Zurück zur Live-Ansicht
    </a>
    <button type="button" class="btn btn-secondary"
            onclick="openRawLogModal('{{ url_for('logs_history_raw', file=selected_name) if selected_name else '' }}', 'Komplettes Log (RAW) — {{ selected_name or '' }}')"
            {% if not selected_name %}disabled{% endif %}>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg>
      Komplettes Log (RAW)
    </button>
  </div>
</div>

{% if not files %}
<p class="text-faint" style="font-size:12.5px;">
  Noch keine rotierten Live-Logs vorhanden — sobald logrotate das aktuelle
  <a href="{{ url_for('logs') }}" style="color:var(--accent-strong); font-weight:600;">Live-Log</a>
  zum ersten Mal rotiert (siehe Rotations-Intervall unter Systemeinstellungen), erscheinen ältere Stände hier.
</p>
{% else %}

<div class="flex gap-2" style="align-items:center; margin-bottom:14px;">
  <label for="history-file-select" class="text-faint" style="font-size:12.5px; font-weight:600;">Archiv-Stand:</label>
  <select id="history-file-select" onchange="window.location.href=this.value;" class="mono" style="max-width:420px;">
    {% for f in files %}
    <option value="{{ url_for('logs_history', file=f.filename) }}" {% if f.filename == selected_name %}selected{% endif %}>
      {{ f.filename }} — rotiert am {{ f.mtime_str }} ({{ f.size_str }})
    </option>
    {% endfor %}
  </select>
</div>

<div class="log-shell">
  <div class="log-toolbar">
    <div class="log-dots"><span></span><span></span><span></span></div>
    <span class="text-faint mono" style="font-size:11.5px;">{{ selected_name }}</span>
    <span class="text-faint mono" style="font-size:11.5px;">{% if total_lines %}letzte {{ tail_lines }} von {{ total_lines }} Zeilen{% endif %}</span>
  </div>
  <div id="log-box">{{ log_content or "" }}</div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
function colorizeLine(line) {
    let cls = "";
    if (line.includes(" ist erreichbar!")) cls = "online";
    else if (line.includes(" ist nicht erreichbar!")) cls = "offline";
    else if (line.startsWith("----")) cls = "sep";
    else if (line.toLowerCase().includes("manuell") || line.includes("PoE")) cls = "restart";
    const span = document.createElement("span");
    span.className = "log-line" + (cls ? " " + cls : "");
    span.textContent = line;
    return span;
}

document.addEventListener("DOMContentLoaded", () => {
    const box = document.getElementById("log-box");
    if (!box) return;
    const text = box.textContent;
    box.innerHTML = "";
    const lines = text.split("\n");
    lines.forEach((line, i) => {
        box.appendChild(colorizeLine(line));
        if (i < lines.length - 1) box.appendChild(document.createElement("br"));
    });
    box.scrollTop = box.scrollHeight;
});
</script>
{% endblock %}