{% extends 'base.html' %}
{% block content %}
<div class="h-full flex flex-col">
  <h1 class="text-xl font-semibold mb-4">Admin: User Management</h1>
  
  <div class="overflow-scroll">
    <table class="w-full whitespace-nowrap shadow-md border border-slate-200">
      <thead class="text-left text-sm sticky top-0 z-10 border-b border-blue-800 text-white font-medium" style="background-color: rgb(89, 121, 142);">
        <tr>
          <th class="px-4 py-3">User Email</th>
          <th class="px-4 py-3">Enabled</th>
          <th class="px-4 py-3">Admin</th>
          <th class="px-4 py-3">Case Email</th>
        </tr>
      </thead>
      <tbody class="bg-slate-100 divide-y divide-slate-300">
        {% for user in users %}
        <tr class="hover:bg-slate-200 transition-colors duration-150 ease-in-out cursor-pointer" onclick="window.location.href='/admin/users/{{ user.uid }}'">
          <td class="px-4 py-3 text-sm text-slate-800">{{ user.user_email }}</td>
          <td class="px-4 py-3 text-sm text-slate-800">
            {% if user.enabled %}
              <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">Yes</span>
            {% else %}
              <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs">No</span>
            {% endif %}
          </td>
          <td class="px-4 py-3 text-sm text-slate-800">
            {% if user.is_admin %}
              <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Yes</span>
            {% else %}
              <span class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-xs">No</span>
            {% endif %}
          </td>
          <td class="px-4 py-3 text-sm text-slate-800">{{ user.case_email }}</td>
        </tr>
        {% else %}
        <tr>
          <td colspan="4" class="px-4 py-6 text-center text-slate-500">No users found.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  
  <!-- Pagination -->
  {% include '_pagination.html' %}
</div>
{% endblock %}