{% extends "layout/base.html" %}
{% block content %}
<h2 class="mb-4">Logging</h2>

<style>
  /* Keep logging table columns fixed to prevent shifting based on content */
  table.logging-table-fixed { table-layout: fixed; width: 100%; }
  table.logging-table-fixed th, table.logging-table-fixed td { overflow: hidden; }
  table.logging-table-fixed th.col-time, table.logging-table-fixed td.col-time,
  table.logging-table-fixed th.col-user, table.logging-table-fixed td.col-user,
  table.logging-table-fixed th.col-action, table.logging-table-fixed td.col-action,
  table.logging-table-fixed th.col-entity, table.logging-table-fixed td.col-entity {
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  table.logging-table-fixed th.col-details, table.logging-table-fixed td.col-details {
    white-space: normal;
    word-break: break-word;
  }
</style>

<div class="card">
  <div class="card-header">
    System Audit Log (last 7 days)
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-sm table-hover align-middle logging-table-fixed w-100">
        <colgroup>
          <col style="width: 160px;">
          <col style="width: 140px;">
          <col style="width: 170px;">
          <col style="width: 240px;">
          <col style="width: auto;">
        </colgroup>
        <thead class="table-light">
          <tr>
            <th scope="col" class="col-time">Time</th>
            <th scope="col" class="col-user">User</th>
            <th scope="col">Event</th>
            <th scope="col">Message</th>
            <th scope="col" class="col-details">Details</th>
          </tr>
        </thead>
        <tbody>
          {% if logs %}
            {% for log in logs %}
            <tr>
              <td>{{ log.created_at|local_datetime }}</td>
              <td>{{ log.user or "-" }}</td>
              <td>{{ log.event_type }}</td>
              <td>{{ log.message }}</td>
              <td class="text-muted col-details">{{ log.details }}</td>
            </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="5" class="text-center text-muted py-3">
                No log entries available.
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>

    {% if total_pages and total_pages > 1 %}
      <nav aria-label="Logging pagination" class="mt-3">
        <ul class="pagination pagination-sm mb-0">
          <li class="page-item {% if not has_prev %}disabled{% endif %}">
            <a class="page-link" href="{% if has_prev %}{{ url_for('main.logging_page', page=page-1) }}{% else %}#{% endif %}" aria-label="Previous">
              &laquo;
            </a>
          </li>

          <li class="page-item disabled">
            <span class="page-link">Page {{ page }} of {{ total_pages }}</span>
          </li>

          <li class="page-item {% if not has_next %}disabled{% endif %}">
            <a class="page-link" href="{% if has_next %}{{ url_for('main.logging_page', page=page+1) }}{% else %}#{% endif %}" aria-label="Next">
              &raquo;
            </a>
          </li>
        </ul>
      </nav>
    {% endif %}
  </div>
</div>
{% endblock %}