{{define "content"}}
<div class="page-header">
  <div>
    <h1 class="page-title">Logs</h1>
    <p class="page-sub">Strukturierte Ausgabe des Scanners in Echtzeit.</p>
  </div>
  <div class="page-actions">
    <form method="GET" action="/logs" style="display:flex;gap:8px;align-items:center;">
      <select class="select" name="level" style="width:auto;" onchange="this.form.submit()">
        <option value="">Alle Level</option>
        <option value="INFO"{{if eq .LevelFilter "INFO"}} selected{{end}}>INFO</option>
        <option value="WARN"{{if eq .LevelFilter "WARN"}} selected{{end}}>WARN</option>
        <option value="ERROR"{{if eq .LevelFilter "ERROR"}} selected{{end}}>ERROR</option>
      </select>
    </form>
    <button class="btn" onclick="clearLogs()">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
      Leeren
    </button>
  </div>
</div>

<div class="log-container" id="log-container"
  hx-get="/logs/rows?level={{.LevelFilter}}"
  hx-trigger="every 2s"
  hx-swap="innerHTML"
  hx-target="this">
  {{template "log-rows" .}}
</div>

<div style="margin-top:10px;font-size:12px;color:var(--text-3);text-align:right;">
  Aktualisiert automatisch alle 2 Sekunden
  <span id="log-count"> · {{len .Logs}} Einträge</span>
</div>

<script>
function clearLogs() {
  fetch('/logs/clear', {method:'POST'}).then(() => {
    document.getElementById('log-container').innerHTML = '';
  });
}
</script>
{{end}}

{{define "log-rows"}}
{{range .Logs}}
<div class="log-row">
  <span class="log-time">{{.Time}}</span>
  <span class="log-level {{.LevelClass}}">{{.Level}}</span>
  <span class="log-msg">{{.Message}}</span>
</div>
{{else}}
<div style="padding:48px;text-align:center;color:var(--text-3);font-size:13px;">
  Noch keine Log-Einträge.
</div>
{{end}}
{{end}}