{% extends "base.html" %}
{% block title %}Logs{% endblock %}

{% block content %}
<h1>Ring-Logs</h1>

{% with messages = get_flashed_messages(with_categories=true) %}
  {% for c, m in messages %}
    <div class="flash {{ c }}">{{ m }}</div>
  {% endfor %}
{% endwith %}

<style>
  .tab-bar { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
  .tab-bar a {
    padding: 7px 16px; border-radius: 6px; font-size: 13px; font-weight: 500;
    text-decoration: none; color: var(--muted); background: var(--surface);
    border: 1px solid var(--border); transition: all .15s;
  }
  .tab-bar a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  .tab-bar a:hover:not(.active) { color: var(--text); border-color: var(--accent); }

  .log-table td:first-child  { color: var(--muted); font-size: 12px; white-space: nowrap; width: 160px; }
  .log-table td:nth-child(2) { width: 60px; }
  .log-table td:last-child   { word-break: break-word; font-family: monospace; font-size: 12px; }

  .lvl-info  { color: var(--accent); }
  .lvl-warn  { color: var(--warning); }
  .lvl-error { color: var(--danger); }

  .details-pre {
    margin-top: 4px; padding: 6px 8px; background: var(--bg);
    border: 1px solid var(--border); border-radius: 4px;
    font-size: 11px; white-space: pre-wrap; word-break: break-all;
    color: var(--muted); display: none;
  }
  .details-toggle { font-size: 11px; color: var(--accent); cursor: pointer;
                    text-decoration: underline; margin-top: 3px; display: inline-block; }
</style>

<!-- Tab-Navigation -->
<div class="tab-bar">
  {% for c in categories %}
    <a href="{{ url_for('admin.logs', cat=c) }}"
       class="{{ 'active' if c == cat else '' }}">{{ c }}</a>
  {% endfor %}
</div>

<!-- Log-Tabelle -->
<div class="card" style="padding: 0; overflow: hidden;">
  {% if entries %}
    <table class="log-table">
      <thead>
        <tr>
          <th>Zeitstempel</th>
          <th>Level</th>
          <th>Nachricht</th>
        </tr>
      </thead>
      <tbody>
        {% for e in entries %}
        <tr>
          <td>{{ e.ts }}</td>
          <td><span class="lvl-{{ e.level }}">{{ e.level }}</span></td>
          <td>
            {{ e.message }}
            {% if e.details %}
              <span class="details-toggle" onclick="toggleDetails(this)">▶ Details</span>
              <pre class="details-pre">{{ e.details }}</pre>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <p style="padding: 20px; color: var(--muted); font-size: 13px;">
      Keine Einträge in Kategorie „{{ cat }}".
    </p>
  {% endif %}
</div>

<!-- Löschen-Button -->
<form method="post" action="{{ url_for('admin.logs_clear', category=cat) }}"
      style="margin-top: 12px;"
      onsubmit="return confirm('Log „{{ cat }}" wirklich leeren?')">
  <button class="btn btn-danger btn-sm" type="submit">Log leeren</button>
  <span style="font-size: 12px; color: var(--muted); margin-left: 10px;">
    {{ entries|length }} Einträge (max. 500 pro Kategorie)
  </span>
</form>

<script>
function toggleDetails(el) {
  const pre = el.nextElementSibling;
  const open = pre.style.display === 'block';
  pre.style.display = open ? 'none' : 'block';
  el.textContent = open ? '▶ Details' : '▼ Details';
}
</script>
{% endblock %}