<div class="space-y-6">
  <div>
    <h1 class="text-xl font-semibold text-slate-900">Activity Log</h1>
    <p class="text-sm text-slate-500 mt-0.5">Catatan aktivitas penting seluruh pengguna (500 terbaru).</p>
  </div>

  <form method="GET" class="bg-white border border-slate-200 rounded-2xl shadow-sm p-4 grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
    <div>
      <label class="block text-xs font-medium text-slate-600 mb-1">Pengguna</label>
      <select name="user_id" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
        <option value="">Semua</option>
        <% users.forEach(function(u) { %><option value="<%= u.id %>" <%= String(query.user_id)===String(u.id)?'selected':'' %>><%= u.name %></option><% }) %>
      </select>
    </div>
    <div>
      <label class="block text-xs font-medium text-slate-600 mb-1">Aksi</label>
      <select name="action" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
        <option value="">Semua</option>
        <% actions.forEach(function(a) { %><option value="<%= a %>" <%= query.action===a?'selected':'' %>><%= a %></option><% }) %>
      </select>
    </div>
    <div><label class="block text-xs font-medium text-slate-600 mb-1">Dari Tanggal</label><input type="date" name="date_from" value="<%= query.date_from || '' %>" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
    <div><label class="block text-xs font-medium text-slate-600 mb-1">Sampai Tanggal</label><input type="date" name="date_to" value="<%= query.date_to || '' %>" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
    <div class="lg:col-span-4"><button class="px-4 py-2 rounded-lg bg-slate-800 text-white text-sm font-medium">Terapkan Filter</button></div>
  </form>

  <div class="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full data-table">
        <thead><tr><th>Waktu</th><th>Pengguna</th><th>Role</th><th>Aksi</th><th>Target</th><th>Detail</th><th>IP</th></tr></thead>
        <tbody>
          <% logs.forEach(function(l) { %>
            <tr>
              <td class="whitespace-nowrap text-slate-500"><%= l.created_at %></td>
              <td><%= l.user_email || '-' %></td>
              <td><span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium bg-slate-100 text-slate-600"><%= l.role || '-' %></span></td>
              <td class="font-medium text-slate-800"><%= l.action %></td>
              <td class="text-slate-500"><%= l.target || '-' %></td>
              <td class="text-slate-400 text-xs"><%= l.detail || '-' %></td>
              <td class="text-slate-400 text-xs"><%= l.ip_address || '-' %></td>
            </tr>
          <% }) %>
          <% if (logs.length === 0) { %>
            <tr><td colspan="7" class="text-center text-slate-400 py-8">Tidak ada log yang cocok.</td></tr>
          <% } %>
        </tbody>
      </table>
    </div>
  </div>
</div>
