{% extends "admin/base.html" %}
{% block title %}Activity{% endblock %}
{% block content %}
<div class="corporate-page activity-page">
  <header class="corporate-header">
  <div>
    <p class="admin-eyebrow">Audit trail</p>
    <h1>Activity</h1>
    <p class="corporate-subtitle">Review who changed what and follow a record into its complete history.</p>
  </div>
  <div class="corporate-actions">
    <button type="button" class="corporate-button corporate-button-muted" id="verify-audit">
      <i class="fas fa-shield-halved"></i>
      <span>Verify audit chain</span>
    </button>
    <a class="corporate-button corporate-button-primary" href="{{ dashboard.url_prefix }}/activity/export">
      <i class="fas fa-download"></i>
      <span>Export CSV</span>
    </a>
    </div>
    </header>
  <p id="audit-status" class="corporate-form-message" role="status" aria-live="polite"></p>
  <section class="corporate-stat-grid">
    <article class="corporate-stat">
      <span class="corporate-stat-label">Matching events</span>
      <strong>{{ activity_total }}</strong>
      <small>After the selected filters</small>
    </article>
    <article class="corporate-stat">
      <span class="corporate-stat-label">Actions</span>
      <strong>{{ activity_actions|length }}</strong>
      <small>Types recorded in this Admin</small>
    </article>
     <article class="corporate-stat">
      <span class="corporate-stat-label">Resources</span>
      <strong>{{ activity_resources|length }}</strong>
      <small>Models and system resources</small></article>
      <article class="corporate-stat"><span class="corporate-stat-label">Actors</span>
        <strong>{{ activity_users|length }}</strong>
        <small>Users represented in the audit trail</small>
      </article>
    </section>
  <section class="corporate-panel">
    <div class="corporate-panel-header"><div>
      <p class="corporate-kicker">Find an event</p>
      <h2>Audit filters</h2>
    </div>
  </div>
  <form method="get" class="corporate-filter-grid">
    <label class="corporate-search"><i class="fas fa-search"></i><input name="q" value="{{ request.query.get('q', '') }}" placeholder="Search action, record, or actor" aria-label="Search activity">
    </label>
    <label class="corporate-field"><span>Action</span>
      <select name="action">
        <option value="">All actions</option>
        {% for item in activity_actions %}
        <option value="{{ item }}"{% if request.query.get('action') == item %} selected{% endif %}>{{ item|replace('_', ' ')|title }}</option>{% endfor %}</select>
      </label>
      <label class="corporate-field">
      <span>Resource</span><select name="resource"><option value="">All resources</option>
        {% for item in activity_resources %}
        <option value="{{ item }}"{% if request.query.get('resource') == item %} selected{% endif %}>{{ item|title }}</option>
        {% endfor %}
      </select>
    </label>
    <label class="corporate-field">
      <span>Actor</span>
      <select name="username">
        <option value="">All actors</option>
        {% for item in activity_users %}
        <option value="{{ item }}"{% if request.query.get('username') == item %} selected{% endif %}>{{ item }}</option>
        {% endfor %}
      </select>
    </label>
    <div class="corporate-form-actions">
      <button class="corporate-button corporate-button-primary" type="submit">
      <i class="fas fa-filter"></i>
      <span>Apply filters</span>
    </button>
    <a class="corporate-button corporate-button-muted" href="{{ dashboard.url_prefix }}/activity">Clear</a>
  </div>
</form>
</section>
  <section class="corporate-panel">
    <div class="corporate-panel-header">
      <div>
        <p class="corporate-kicker">Immutable record stream</p>
        <h2>Events</h2>
      </div>
      <span class="corporate-badge corporate-badge-neutral">Newest first</span>
    </div>
    <div class="activity-list">
      {% for entry in entries %}
      <article class="activity-entry">
        <div class="activity-row activity-row-static">
          <span class="activity-icon">
            <i class="fas fa-{{ 'plus' if 'created' in entry.action else 'pen' if 'updated' in entry.action else 'trash' if 'deleted' in entry.action else 'bolt' }}"></i>
          </span>
          <span>
            <strong>{{ entry.action|replace('_', ' ')|title }}</strong>
            <small>{{ entry.resource }}{% if entry.record_id %} #{{ entry.record_id }}{% endif %} - {{ entry.username }} </small>
          </span>
          <time data-timestamp="{{ entry.timestamp }}">{{ entry.timestamp }}</time>
        </div>
        <div class="activity-entry-footer">
          <span><i class="fas fa-circle-info"></i> Actor and request metadata are retained by the configured audit backend.</span>
          {% if entry.record_id %}
          <a href="{{ dashboard.url_prefix }}/{{ entry.resource }}/{{ entry.record_id }}/history">Open record history <i class="fas fa-arrow-right"></i></a>
          {% endif %}
        </div>
        {% if entry.details %}
        <details class="corporate-details">
          <summary>View event details</summary><pre class="corporate-code">{{ entry.details|tojson(indent=2) }}</pre>
        </details>
        {% endif %}
      </article>
      {% else %}
      <div class="corporate-empty">
        <i class="fas fa-clock-rotate-left"></i>
        <strong>No activity matches these filters</strong>
        <p>Try clearing a filter or make a change in one of the registered models.</p>
      </div>
      {% endfor %}
    </div>
  </section>
</div>
{% endblock %}
{% block extra_scripts %}
<script>
document.querySelectorAll('[data-timestamp]').forEach(node => { const value = Number(node.dataset.timestamp); if (Number.isFinite(value) && value > 0) node.textContent = new Date(value * 1000).toLocaleString(); });
document.getElementById('verify-audit').addEventListener('click', async () => { const status = document.getElementById('audit-status'); status.textContent = 'Verifying the audit chain...'; try { const response = await fetch('{{ dashboard.url_prefix }}/audit/verify', {credentials:'same-origin'}); const data = await response.json(); if (!response.ok) throw new Error(data.message || data.error?.message || 'Verification failed'); status.textContent = data.valid ? 'Audit chain verified.' : 'Audit chain verification reported an invalid result.'; status.classList.toggle('is-error', !data.valid); } catch (error) { status.textContent = error.message; status.classList.add('is-error'); } });
</script>
{% endblock %}