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

{% block extra_head %}
<style>
  .audit-table td, .audit-table th { font-size: .8125rem; vertical-align: middle; }
  .audit-detail { max-width: 360px; word-break: break-word; white-space: normal; }
</style>
{% endblock %}

{% block content %}
<div class="d-flex align-items-center justify-content-between mb-3">
  <h4 class="fw-bold mb-0">
    <i class="bi bi-clock-history me-2 text-primary"></i>Audit Log
  </h4>
</div>

<!-- Filter bar -->
<div class="card border-0 shadow-sm mb-3">
  <div class="card-body py-2">
    <form method="GET" class="row g-2 align-items-end">
      <div class="col-12 col-md-3">
        <label class="form-label small text-muted mb-1">Action</label>
        <select name="action" class="form-select form-select-sm">
          <option value="">All actions</option>
          {% for a in action_choices %}
          <option value="{{ a }}" {% if filters.action == a %}selected{% endif %}>{{ a }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-12 col-md-3">
        <label class="form-label small text-muted mb-1">Admin</label>
        <select name="admin" class="form-select form-select-sm">
          <option value="">All admins</option>
          {% if has_system %}
          <option value="system" {% if filters.admin == 'system' %}selected{% endif %}>system</option>
          {% endif %}
          {% for u in admin_choices %}
          <option value="{{ u.id }}" {% if filters.admin == u.id|string %}selected{% endif %}>{{ u.username }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label small text-muted mb-1">From</label>
        <input type="text" name="date_from" value="{{ filters.date_from }}"
               placeholder="YYYY-MM-DD" pattern="\d{4}-\d{2}-\d{2}"
               title="ISO date: YYYY-MM-DD" class="form-control form-control-sm">
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label small text-muted mb-1">To</label>
        <input type="text" name="date_to" value="{{ filters.date_to }}"
               placeholder="YYYY-MM-DD" pattern="\d{4}-\d{2}-\d{2}"
               title="ISO date: YYYY-MM-DD" class="form-control form-control-sm">
      </div>
      <div class="col-12 col-md-2 d-flex gap-2">
        <button type="submit" class="btn btn-sm btn-primary flex-fill">
          <i class="bi bi-funnel me-1"></i>Filter
        </button>
        <a href="{{ url_for('audit.index') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
      </div>
    </form>
  </div>
</div>

<!-- Results table -->
<div class="card border-0 shadow-sm">
  <div class="table-responsive">
    <table class="table table-hover table-striped align-middle mb-0 audit-table">
      <thead class="table-dark">
        <tr>
          <th>Time</th>
          <th>Admin</th>
          <th>Action</th>
          <th>Target</th>
          <th>Detail</th>
          <th>IP</th>
        </tr>
      </thead>
      <tbody>
        {% if logs %}
          {% for log in logs %}
          <tr>
            <td class="text-nowrap">{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
            <td>{{ log.admin.username if log.admin else 'system' }}</td>
            <td><span class="badge bg-secondary">{{ log.action }}</span></td>
            <td class="text-muted">
              {%- if log.target_type -%}
                {{ log.target_type }}{% if log.target_id %} #{{ log.target_id }}{% endif %}
              {%- else -%}-{%- endif -%}
            </td>
            <td class="audit-detail text-muted">{{ log.detail or '-' }}</td>
            <td class="text-muted text-nowrap">{{ log.ip_address or '-' }}</td>
          </tr>
          {% endfor %}
        {% else %}
          <tr>
            <td colspan="6" class="text-center text-muted py-5">
              <i class="bi bi-inbox fs-2 d-block mb-2 text-secondary"></i>
              No audit log entries match the current filters.
            </td>
          </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
</div>

<!-- Pagination -->
{% if pagination is defined and pagination and pagination.pages > 1 %}
<nav aria-label="Audit log pagination" class="mt-3">
  <ul class="pagination pagination-sm justify-content-center flex-wrap">
    <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
      <a class="page-link" href="{{ url_for(list_endpoint, page=pagination.prev_num, **pagination_args) if pagination.has_prev else '#' }}">
        <i class="bi bi-chevron-left"></i>
      </a>
    </li>
    {% for page_num in pagination.iter_pages(left_edge=2, left_current=2, right_current=3, right_edge=2) %}
      {% if page_num %}
        <li class="page-item {% if page_num == pagination.page %}active{% endif %}">
          <a class="page-link" href="{{ url_for(list_endpoint, page=page_num, **pagination_args) }}">
            {{ page_num }}
          </a>
        </li>
      {% else %}
        <li class="page-item disabled"><span class="page-link">...</span></li>
      {% endif %}
    {% endfor %}
    <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
      <a class="page-link" href="{{ url_for(list_endpoint, page=pagination.next_num, **pagination_args) if pagination.has_next else '#' }}">
        <i class="bi bi-chevron-right"></i>
      </a>
    </li>
  </ul>
  <p class="text-center text-muted small">
    Page {{ pagination.page }} of {{ pagination.pages }}
    &mdash; {{ pagination.total }} total entries
  </p>
</nav>
{% endif %}
{% endblock %}