{% extends "base.html" %}
{% block title %}{{ agent_name }} — Audit Log{% endblock %}

{% block content %}
<div class="page">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
    <h1 style="margin:0">Audit Log</h1>
    <div style="display:flex;gap:8px">
      <button class="btn btn-ghost btn-small" onclick="clearAuditLog(30)">Delete &gt;30 days</button>
      <button class="btn btn-ghost btn-small" onclick="clearAuditLog(90)">Delete &gt;90 days</button>
      <button class="btn btn-danger btn-small" onclick="clearAuditLog(0)">Empty log</button>
    </div>
  </div>

  <!-- Filters -->
  <div class="filter-bar">
    <div class="form-group" style="margin:0">
      <label>From</label>
      <input type="text" id="filter-start" class="form-input" placeholder="dd.mm.yyyy HH:MM" style="width:160px">
    </div>
    <div class="form-group" style="margin:0">
      <label>To</label>
      <input type="text" id="filter-end" class="form-input" placeholder="dd.mm.yyyy HH:MM" style="width:160px">
    </div>
    <div class="form-group" style="margin:0">
      <label>Tool</label>
      <input type="text" id="filter-tool" class="form-input" placeholder="e.g. email">
    </div>
    <div class="form-group" style="margin:0">
      <label>Session ID</label>
      <input type="text" id="filter-session" class="form-input" placeholder="prefix…">
    </div>
    <div style="display:flex;gap:8px;align-items:flex-end">
      <button class="btn btn-primary" id="filter-btn">Filter</button>
      <button class="btn btn-ghost" id="filter-reset">Reset</button>
    </div>
  </div>

  <!-- Run filter banner (shown when navigating from agent run detail) -->
  <div id="audit-task-filter-banner" style="display:none;margin-bottom:12px;padding:8px 14px;background:rgba(var(--accent-rgb,100,140,255),0.1);border:1px solid var(--border);border-radius:var(--radius);font-size:13px;color:var(--text-dim)">
    Filtered by run ID — click <strong>Reset</strong> to clear.
  </div>

  <!-- Table -->
  <div class="table-wrap">
    <table id="audit-table">
      <thead>
        <tr>
          <th>Timestamp</th>
          <th>Tool</th>
          <th>Arguments</th>
          <th>Result</th>
          <th>Session</th>
        </tr>
      </thead>
      <tbody>
        <tr><td colspan="5" style="text-align:center;color:var(--text-dim)">Loading…</td></tr>
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  <div class="pagination" id="audit-pagination"></div>
</div>

<!-- Audit entry detail modal -->
<div class="modal-overlay" id="audit-detail-modal" style="display:none" onclick="if(event.target===this)closeAuditDetail()">
  <div class="modal" style="max-width:680px;width:100%">
    <div class="modal-header" style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
      <h3 id="audit-detail-tool" style="font-family:monospace;font-size:15px;margin:0"></h3>
      <button class="btn btn-ghost btn-small" onclick="closeAuditDetail()">✕</button>
    </div>
    <div class="modal-body">
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-bottom:16px;font-size:13px">
        <div><span style="color:var(--text-dim)">Timestamp</span><br><span id="audit-detail-ts"></span></div>
        <div><span style="color:var(--text-dim)">Session</span><br><code id="audit-detail-session"></code></div>
        <div><span style="color:var(--text-dim)">Task ID</span><br><code id="audit-detail-task" style="font-size:11px;word-break:break-all"></code></div>
      </div>
      <div style="margin-bottom:12px">
        <div style="font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:6px;font-weight:600">Arguments</div>
        <pre id="audit-detail-args" style="background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;font-size:12px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;max-height:240px;overflow-y:auto;margin:0"></pre>
      </div>
      <div>
        <div style="font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:6px;font-weight:600">Result</div>
        <pre id="audit-detail-result" style="background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;font-size:12px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;max-height:240px;overflow-y:auto;margin:0"></pre>
      </div>
    </div>
  </div>
</div>
{% endblock %}