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

<nav>
  <span class="brand">
  <img src="{{ url_for('static', filename='kvs.png') }}" 
       alt="kvs" style="height:40px; vertical-align:middle; margin-right:8px;">
  
  Digital Attendance
</span>
  <div class="links">
    <a href="/dashboard">📊 Dashboard</a>
    <a href="/students">👤 Students</a>
    <a href="/teachers">👩‍🏫 Teachers</a>
    <a href="/no_class">❓ No-Class</a>
    <a href="/logs" class="active">📋 Logs</a>
    <span class="role-chip">{{ role }}</span>
    <a href="/logout">🚪 {{ username }}</a>
  </div>
</nav>

<div class="wrap">
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% for cat, msg in messages %}<div class="alert {{ cat }}">{{ msg }}</div>{% endfor %}
  {% endwith %}

  <div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
      <h2 style="margin:0;">📋 System Logs ({{ rows|length }} entries)</h2>
      <input type="text" id="srch" placeholder="🔍 Search logs…"
             oninput="filterTable()" style="width:240px;padding:7px 12px;font-size:13px;">
    </div>
    <table id="ltbl">
      <thead>
        <tr><th>#</th><th>Time</th><th>User</th><th>Action</th></tr>
      </thead>
      <tbody>
        {% for i, row in enumerate(rows, 1) %}
        <tr data-search="{{ (row["time"] ~ " " ~ row["user"] ~ " " ~ row["action"])|lower }}">
          <td style="color:var(--muted);font-size:12px;">{{ i }}</td>
          <td style="color:var(--muted);font-size:12px;white-space:nowrap;">{{ row["time"] }}</td>
          <td><strong>{{ row["user"] }}</strong></td>
          <td style="font-size:13px;">{{ row["action"] }}</td>
        </tr>
        {% else %}
        <tr>
          <td colspan="4" style="text-align:center;padding:28px;color:var(--muted);">
            No log entries yet.
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<script>
// ── Fast Search (override-style) ────────────────────────────────────────────
const _lgRows = [];
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll("#ltbl tbody tr[data-search]").forEach(r => _lgRows.push(r));
});

let _lgTimer = null;
function filterTable(){
  clearTimeout(_lgTimer);
  _lgTimer = setTimeout(() => {
    const q = document.getElementById("srch").value.toLowerCase().trim();
    requestAnimationFrame(() => {
      _lgRows.forEach(r => {
        r.style.display = (!q || r.dataset.search.includes(q)) ? "" : "none";
      });
    });
  }, 200);
}
</script>
{% endblock %}