<div class="card">
  <div class="card-header">
    <form class="row g-2" method="GET" action="/logs">
      <div class="col-md-4 mb-2">
        <input type="text" name="search" class="form-control" placeholder="Cari user/action/deskripsi/IP" value="<%= filters.search %>">
      </div>
      <div class="col-md-2 mb-2">
        <select name="status" class="form-control">
          <option value="">Semua Status</option>
          <option value="success" <%= filters.status === 'success' ? 'selected' : '' %>>Success</option>
          <option value="failed" <%= filters.status === 'failed' ? 'selected' : '' %>>Failed</option>
        </select>
      </div>
      <div class="col-md-2 mb-2">
        <input type="date" name="from" class="form-control" value="<%= filters.from %>">
      </div>
      <div class="col-md-2 mb-2">
        <input type="date" name="to" class="form-control" value="<%= filters.to %>">
      </div>
      <div class="col-md-2 mb-2">
        <button type="submit" class="btn btn-primary btn-block"><i class="fas fa-filter mr-1"></i> Filter</button>
      </div>
    </form>
  </div>

  <div class="card-body table-responsive p-0">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>Tanggal</th>
          <th>User</th>
          <th>IP</th>
          <th>Action</th>
          <th>Status</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <% if (!rows.length) { %>
          <tr><td colspan="6" class="text-center text-muted py-4">Tidak ada aktivitas.</td></tr>
        <% } %>
        <% rows.forEach(function(log) { %>
        <tr>
          <td class="text-nowrap"><%= formatDateTime(log.created_at) %></td>
          <td><%= log.user_name || '-' %></td>
          <td><%= log.ip %></td>
          <td><%= log.action %></td>
          <td><span class="badge badge-<%= log.status === 'success' ? 'success' : 'danger' %>"><%= log.status %></span></td>
          <td><%= log.description %></td>
        </tr>
        <% }); %>
      </tbody>
    </table>
  </div>

  <div class="card-footer d-flex justify-content-between align-items-center">
    <div class="text-muted small">Total <%= total %> entri</div>
    <ul class="pagination pagination-sm m-0">
      <% for (var i = 1; i <= totalPages; i++) { %>
        <li class="page-item <%= i === page ? 'active' : '' %>">
          <a class="page-link" href="/logs?page=<%= i %>&search=<%= encodeURIComponent(filters.search) %>&status=<%= filters.status %>&from=<%= filters.from %>&to=<%= filters.to %>"><%= i %></a>
        </li>
      <% } %>
    </ul>
  </div>
</div>
