{% extends "layout.html" %}
{% from "shared/components.html" import empty_state, stat_card, status_badge %}
{% block content %}
  <div class="amq-page">
    <section class="amq-section">
      <div class="amq-stat-grid">
        {{ stat_card("Visible Events", audit_summary.visible, tone="accent", detail="Current filter") }}
        {{ stat_card("Successful", audit_summary.success, tone="success", detail="Action completed") }}
        {{ stat_card("Failed", audit_summary.failed, tone="danger", detail="Action rejected or errored") }}
        {{ stat_card("Action Types", audit_summary.actions, detail=audit_summary.sources ~ " sources") }}
      </div>

      <form method="get" class="amq-filter-panel amq-filter-panel--audit">
        <label class="amq-field amq-field-wide">
          <span>Search</span>
          <input type="text"
                 name="q"
                 value="{{ selected_query }}"
                 placeholder="Action, actor, error, details"
                 class="amq-input">
        </label>
        <label class="amq-field">
          <span>Queue</span>
          <input type="text"
                 name="queue"
                 value="{{ selected_queue }}"
                 placeholder="Queue name"
                 class="amq-input">
        </label>
        <label class="amq-field">
          <span>Action</span>
          <select name="action" class="amq-select">
            <option value="">All actions</option>
            {% for action in action_options %}
              <option value="{{ action }}" {% if selected_action == action %}selected{% endif %}>{{ action }}</option>
            {% endfor %}
          </select>
        </label>
        <label class="amq-field">
          <span>Status</span>
          <select name="status" class="amq-select">
            <option value="">All statuses</option>
            <option value="success" {% if selected_status == "success" %}selected{% endif %}>Success</option>
            <option value="failed" {% if selected_status == "failed" %}selected{% endif %}>Failed</option>
          </select>
        </label>
        <label class="amq-field">
          <span>Rows</span>
          <select name="limit" class="amq-select">
            {% for option in [50, 100, 200, 500] %}
              <option value="{{ option }}" {% if limit == option %}selected{% endif %}>{{ option }} rows</option>
            {% endfor %}
          </select>
        </label>
        <div class="amq-filter-actions">
          <button type="submit" class="amq-button amq-button--primary">
            Apply
          </button>
          <a href="{{ url_prefix }}/audit" class="amq-button">
            Clear
          </a>
        </div>
      </form>
    </section>

    <section class="amq-table-wrap">
      <div class="amq-table-toolbar">
        <div>
          <h2 class="amq-card-title">Operator Action Evidence</h2>
          <p class="amq-card-meta">Newest first · bounded to {{ limit }} rows</p>
        </div>
      </div>
      <table class="amq-table amq-audit-table">
        <thead>
          <tr>
            <th scope="col">Time</th>
            <th scope="col">Action</th>
            <th scope="col">Target</th>
            <th scope="col">Status</th>
            <th scope="col">Actor</th>
            <th scope="col">Details</th>
          </tr>
        </thead>
        <tbody>
          {% for event in events %}
            <tr>
              <td class="amq-mono">{{ event.time }}</td>
              <td>
                <span class="amq-audit-action">{{ event.action }}</span>
                <span class="amq-card-meta">{{ event.source }}</span>
              </td>
              <td>
                <div class="amq-audit-target">
                  <span>{{ event.target_label }}</span>
                  {% if event.target_meta %}
                    <span class="amq-card-meta">{{ event.target_meta }}</span>
                  {% endif %}
                </div>
              </td>
              <td>{{ status_badge(event.status) }}</td>
              <td class="amq-mono">{{ event.actor or "-" }}</td>
              <td>
                {% if event.error or event.details_json %}
                  <div class="amq-detail-stack">
                    {% if event.error %}
                      <p class="amq-audit-error">{{ event.error }}</p>
                    {% endif %}
                    {% if event.details_json %}
                      <details class="amq-diagnostic-section amq-audit-details">
                        <summary>Details</summary>
                        <pre class="amq-pre">{{ event.details_json }}</pre>
                      </details>
                    {% endif %}
                  </div>
                {% else %}
                  <span class="amq-card-meta">No details</span>
                {% endif %}
              </td>
            </tr>
          {% else %}
            <tr>
              <td colspan="6">
                {{ empty_state("No audit events available", "Operator actions will appear after dashboard operations run.") }}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </section>
  </div>
{% endblock %}