{% extends "admin/layout.html" %}
{% block title %}Audit Log{% endblock %}
{% block page_title %}Audit Log{% endblock %}

{% block content %}
<div class="card">
  <div class="card-header">
    <span class="card-title">System Audit Log (latest 200)</span>
    <input type="text" placeholder="🔍 Search…" id="searchInput"
           style="background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;
                  color:var(--ink);font-family:'Plus Jakarta Sans',sans-serif;
                  font-size:13px;padding:8px 13px;outline:none;width:200px;transition:border-color 0.2s;"
           onfocus="this.style.borderColor='var(--primary3)'"
           onblur="this.style.borderColor='var(--border)'"
           oninput="filterTable(this.value)">
  </div>
  <div class="table-wrap">
    <table id="auditTable">
      <thead>
        <tr>
          <th>Time</th><th>User</th><th>Role</th>
          <th>Action</th><th>Report</th><th>IP</th><th>Details</th>
        </tr>
      </thead>
      <tbody>
        {% for l in logs %}
        <tr>
          <td style="font-size:11px;white-space:nowrap;color:var(--muted);">
            {{ l.time.strftime('%d %b %Y %H:%M') if l.time else '—' }}
          </td>
          <td>
            <div style="font-weight:600;color:var(--ink);">{{ l.full_name }}</div>
            <div style="font-size:11px;color:var(--muted);">@{{ l.username }}</div>
          </td>
          <td><span class="badge badge-muted">{{ l.role }}</span></td>
          <td>
            <span class="badge
              {% if 'DOWNLOAD' in l.action %}badge-green
              {% elif l.action == 'LOGIN' %}badge-gold
              {% elif l.action == 'LOGOUT' %}badge-muted
              {% elif 'GRANT' in l.action or 'REVOKE' in l.action %}badge-gold
              {% else %}badge-muted{% endif %}">
              {{ l.action }}
            </span>
          </td>
          <td style="color:var(--muted);font-size:12px;">{{ l.report or '—' }}</td>
          <td style="color:var(--muted);font-size:11px;">{{ l.ip or '—' }}</td>
          <td style="color:var(--muted);font-size:11px;max-width:150px;
                     overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
            {{ l.extra or '—' }}
          </td>
        </tr>
        {% else %}
        <tr><td colspan="7">
          <div class="empty"><div class="empty-icon">📋</div><p>No audit records yet.</p></div>
        </td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function filterTable(q) {
  q = q.toLowerCase();
  document.querySelectorAll('#auditTable tbody tr').forEach(tr => {
    tr.style.display = tr.textContent.toLowerCase().includes(q) ? '' : 'none';
  });
}
</script>
{% endblock %}