{% extends 'base.html' %}
{% block content %}
<div class="h-full flex flex-col">
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="bg-{% if category == 'success' %}green{% else %}blue{% endif %}-50 border border-{% if category == 'success' %}green{% else %}blue{% endif %}-200 text-{% if category == 'success' %}green{% else %}blue{% endif %}-800 px-4 py-3 rounded-md mb-4">
          <p>{{ message }}</p>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  {% if session.get('password_reset_link') %}
    <div class="bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded-md mb-4">
      <p class="font-medium">Please send an email to {{ session.get('reset_user_email') }}</p>
      <p class="mt-1">
        <strong>Be sure to include this password reset link:</strong>
        <a href="{{ session.get('password_reset_link') }}"
           class="text-blue-600 hover:text-blue-800 underline"
           target="_blank">
          {{ session.get('password_reset_link') }}
        </a>
      </p>
    </div>
  {% endif %}
  {% if session.get('password_reset_link') %}
    {% set _ = session.pop('password_reset_link', None) %}
    {% set _ = session.pop('reset_user_email', None) %}
  {% endif %}
  <h1 class="text-xl font-semibold mb-4">Admin: User Management</h1>
  <div class="mb-4 flex items-center">
    <label for="perPage" class="mr-2 text-sm font-medium text-slate-700">Items per page:</label>
    <select id="perPage" x-data="{ perPage: {{ per_page }} }" x-model="perPage" @change="window.location.href = `/admin/users/1?per_page=${$data.perPage}`"
      class="px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
      <option value="10">10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
  </div>
  
  <div class="mb-6">
    <a href="/admin/users/new" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
      Create New User
    </a>
  </div>
  
  <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>
          <th class="px-4 py-3">Actions</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>
          <td class="px-4 py-3 text-sm text-slate-800">
            <form method="POST" action="/admin/users/{{ user.uid }}/reset-password" style="display: inline;">
              <button type="submit"
                      class="text-blue-600 hover:text-blue-800 text-sm font-medium underline"
                      onclick="return confirm('Are you sure you want to reset the password for {{ user.user_email }}? This will send a password reset email to their account.')">
                Reset Password
              </button>
            </form>
          </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 %}