<div class="flex justify-between items-center mb-8">
  <h1>User.</h1>
  <a href="/users/new" class="btn-primary btn-sm">+ Tambah</a>
</div>

<div class="card p-0 overflow-hidden">
<table class="table-base">
  <thead>
    <tr>
      <th>nama</th>
      <th>email</th>
      <th>role</th>
      <th>aksi</th>
    </tr>
  </thead>
  <tbody>
    <% userList.forEach(u => { %>
      <tr>
        <td class="font-medium"><%= u.nama %></td>
        <td class="mono-label"><%= u.email %></td>
        <td><span class="badge-neutral"><%= u.role %></span></td>
        <td>
          <div class="flex gap-1.5">
            <a href="/users/<%= u.id %>/edit" class="btn-secondary btn-xs">Edit</a>
            <% if (u.id !== user.id) { %>
              <form action="/users/<%= u.id %>?_method=DELETE" method="POST" onsubmit="return confirm('Hapus user ini?')">
                <button class="btn-danger btn-xs">Hapus</button>
              </form>
            <% } %>
          </div>
        </td>
      </tr>
    <% }) %>
  </tbody>
</table>
</div>
