{# audit_timeline.html — swimlane timeline view of audit events, included from audit.html #}

<div class="timeline-wrapper">
  <!-- Agent labels (left column) -->
  <div class="timeline-labels">
    {% for agent_name in timeline_data.agents %}
    <div class="timeline-label-row" style="height: 48px;">
      <span class="timeline-label-text" title="{{ agent_name }}">{{ agent_name[:28] }}{% if agent_name|length > 28 %}&hellip;{% endif %}</span>
    </div>
    {% endfor %}
    {% if timeline_data.extra_agents > 0 %}
    <div class="timeline-label-row timeline-label-extra" style="height: 48px;">
      <span class="timeline-label-text muted">and {{ timeline_data.extra_agents }} more</span>
    </div>
    {% endif %}
  </div>

  <!-- Swimlane area (right column) -->
  <div class="timeline-swimlane">
    <div class="timeline-axis">
      {% for tick in timeline_data.axis_ticks %}
      <div class="timeline-axis-tick" style="left: {{ tick.x_percent }}%;">
        <span class="timeline-axis-label">{{ tick.label }}</span>
      </div>
      {% endfor %}
    </div>

    {% for agent_name in timeline_data.agents %}
    {% set agent_idx = loop.index0 %}
    <div class="timeline-row{% if agent_idx % 2 == 0 %} timeline-row-alt{% endif %}" style="height: 48px;">
      <div class="timeline-track"></div>
      {% for dot in timeline_data.events %}
        {% if dot.agent_index == agent_idx %}
        <div class="timeline-dot-wrapper" style="left: {{ dot.x_percent }}%;">
          <div class="timeline-dot" style="background: {{ dot.color }};" data-event-id="{{ dot.event_id }}" tabindex="0" role="button" aria-label="{{ dot.label }} — {{ dot.relative_time }}">
            <span class="timeline-tooltip">{{ dot.label }} — {{ dot.relative_time }}</span>
          </div>
        </div>
        {% endif %}
      {% endfor %}
    </div>
    {% endfor %}

    {% if timeline_data.extra_agents > 0 %}
    <div class="timeline-row timeline-row-alt" style="height: 48px;">
      <div class="timeline-track"></div>
    </div>
    {% endif %}
  </div>
</div>

<!-- Filters + pagination (same as table view) -->
<form method="get" action="/dashboard/audit" class="filter-bar">
  <input type="hidden" name="view" value="timeline" />
  <label>
    Search
    <input type="text" name="q" placeholder="Search actor, action, target, result..." value="{{ filters.q or '' }}" />
  </label>
  <label>
    Actor
    <input type="text" name="actor" value="{{ filters.actor or '' }}" />
  </label>
  <label>
    Action Type
    <input type="text" name="action_type" value="{{ filters.action_type or '' }}" />
  </label>
  <label>
    Decision
    <input type="text" name="decision" value="{{ filters.decision or '' }}" />
  </label>
  <label>
    Status
    <input type="text" name="status" value="{{ filters.status or '' }}" />
  </label>
  <label>
    Agent
    <input type="text" name="agent" placeholder="e.g. codex" value="{{ filters.agent or '' }}" />
  </label>
  <label>
    Page Size
    <select name="page_size">
      <option value="25" {% if filters.page_size == 25 %}selected{% endif %}>25</option>
      <option value="50" {% if filters.page_size == 50 %}selected{% endif %}>50</option>
      <option value="100" {% if filters.page_size == 100 %}selected{% endif %}>100</option>
      <option value="200" {% if filters.page_size == 200 %}selected{% endif %}>200</option>
    </select>
  </label>
  <input type="hidden" name="page" value="1" />
  <button type="submit" class="btn btn-secondary">Apply</button>
  <a class="btn btn-secondary" href="/dashboard/audit?view=timeline">Clear</a>
  {% if ui_permissions.audit_export %}
  <a class="btn btn-secondary" href="{{ export_csv_url }}">Export CSV</a>
  <a class="btn btn-secondary" href="{{ export_json_url }}">Export JSON</a>
  {% else %}
  <button type="button" class="btn btn-secondary" disabled>Export CSV</button>
  <button type="button" class="btn btn-secondary" disabled>Export JSON</button>
  {% endif %}
</form>

<div class="pagination">
  <div class="muted">Total: {{ pagination.total_count }} events</div>
  <div class="pager-controls">
    {% if pagination.has_prev %}
    <a class="btn btn-secondary" href="{{ pagination.prev_url }}&view=timeline">Prev</a>
    {% else %}
    <span class="btn btn-secondary disabled">Prev</span>
    {% endif %}
    <span class="muted">Page {{ pagination.page }} of {{ pagination.total_pages }}</span>
    {% if pagination.has_next %}
    <a class="btn btn-secondary" href="{{ pagination.next_url }}&view=timeline">Next</a>
    {% else %}
    <span class="btn btn-secondary disabled">Next</span>
    {% endif %}
  </div>
</div>