<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold text-gray-800">Users</h1>
  <form method="GET"><input type="text" name="search" value="<%= typeof search !== 'undefined' ? search : '' %>" placeholder="Search users..." class="px-4 py-2 border border-gray-300 rounded-lg text-sm w-64"></form>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
  <table class="w-full text-sm">
    <thead class="bg-gray-50">
      <tr class="text-left text-gray-500">
        <th class="px-6 py-4 font-medium">Name</th>
        <th class="px-6 py-4 font-medium">Email</th>
        <th class="px-6 py-4 font-medium">Phone</th>
        <th class="px-6 py-4 font-medium text-center">Admin</th>
        <th class="px-6 py-4 font-medium text-center">Active</th>
        <th class="px-6 py-4 font-medium">Joined</th>
        <th class="px-6 py-4 font-medium text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      <% if (typeof users !== 'undefined' && users && users.length) { %>
        <% users.forEach(function(user) { %>
          <tr class="border-t hover:bg-gray-50">
            <td class="px-6 py-4 font-medium text-gray-800"><%= user.name %></td>
            <td class="px-6 py-4 text-gray-500"><%= user.email %></td>
            <td class="px-6 py-4 text-gray-500"><%= user.phone || '-' %></td>
            <td class="px-6 py-4 text-center">
              <form action="/admin/users/<%= user.id %>/toggle-admin" method="POST">
                <button type="submit" class="px-2 py-0.5 rounded-full text-xs font-medium <%= user.isAdmin ? 'bg-purple-100 text-purple-700' : 'bg-gray-100 text-gray-500' %>"><%= user.isAdmin ? 'Yes' : 'No' %></button>
              </form>
            </td>
            <td class="px-6 py-4 text-center">
              <form action="/admin/users/<%= user.id %>/toggle-active" method="POST">
                <button type="submit" class="px-2 py-0.5 rounded-full text-xs font-medium <%= user.isActive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' %>"><%= user.isActive ? 'Active' : 'Inactive' %></button>
              </form>
            </td>
            <td class="px-6 py-4 text-gray-500"><%= new Date(user.createdAt).toLocaleDateString('en-IN') %></td>
            <td class="px-6 py-4 text-right">
              <form action="/admin/users/<%= user.id %>/toggle-admin" method="POST" class="inline">
                <button type="submit" class="text-sm <%= user.isAdmin ? 'text-orange-500' : 'text-indigo-600' %> hover:underline mr-2"><%= user.isAdmin ? 'Remove Admin' : 'Make Admin' %></button>
              </form>
            </td>
          </tr>
        <% }) %>
      <% } else { %>
        <tr><td colspan="7" class="px-6 py-12 text-center text-gray-400">No users found.</td></tr>
      <% } %>
    </tbody>
  </table>
</div>

<% if (typeof totalPages !== 'undefined' && totalPages > 1) { %>
  <div class="flex justify-center mt-6 gap-2">
    <% for (let p = 1; p <= totalPages; p++) { %>
      <a href="?page=<%= p %><%= search ? '&search='+search : '' %>" class="px-4 py-2 rounded-lg text-sm <%= p === currentPage ? 'bg-indigo-600 text-white' : 'bg-white border border-gray-300 text-gray-600' %>"><%= p %></a>
    <% } %>
  </div>
<% } %>
