<!-- htmlhint doctype-first:false -->
<div
  id="users-list-container"
  hx-get="{{ root_path }}/admin/users/partial?page={{ pagination.page }}&per_page={{ pagination.per_page }}"
  hx-trigger="refreshUsers"
  hx-swap="outerHTML"
  hx-indicator="#users-loading"
>
  {% if data %}
  <div class="space-y-4">
    {% for user in data %}
    <div class="user-card border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-white dark:bg-gray-800">
      <div class="flex justify-between items-start">
        <div class="flex-1">
          <div class="flex items-center gap-2 mb-2">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ user.full_name or "N/A" }}</h3>
            {% if user.is_admin %}
            <span class="px-2 py-1 text-xs font-semibold bg-purple-100 text-purple-800 rounded-full dark:bg-purple-900 dark:text-purple-200">Admin</span>
            {% endif %}
            {% if user.is_active %}
            <span class="px-2 py-1 text-xs font-semibold text-green-600 bg-gray-100 dark:bg-gray-700 rounded-full">Active</span>
            {% else %}
            <span class="px-2 py-1 text-xs font-semibold text-red-600 bg-gray-100 dark:bg-gray-700 rounded-full">Inactive</span>
            {% endif %}
            {% if user.email == current_user_email %}
            <span class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded-full dark:bg-blue-900 dark:text-blue-200">You</span>
            {% endif %}
            {% if user.is_last_admin %}
            <span class="px-2 py-1 text-xs font-semibold bg-yellow-100 text-yellow-800 rounded-full dark:bg-yellow-900 dark:text-yellow-200">Last Admin</span>
            {% endif %}
            {% if user.password_change_required %}
            <span class="px-2 py-1 text-xs font-semibold bg-orange-100 text-orange-800 rounded-full dark:bg-orange-900 dark:text-orange-200">
              <i class="fas fa-key mr-1"></i>Password Change Required
            </span>
            {% endif %}
            {% if user.is_locked %}
            <span class="px-2 py-1 text-xs font-semibold bg-red-100 text-red-800 rounded-full dark:bg-red-900 dark:text-red-200">
              <i class="fas fa-lock mr-1"></i>Locked
            </span>
            {% endif %}
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">📧 {{ user.email }}</p>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">🔐 Provider: {{ user.auth_provider }}</p>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">⚠️ Failed attempts: {{ user.failed_login_attempts }}</p>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">🔒 Locked until: {{ user.locked_until.strftime("%Y-%m-%d %H:%M") if user.locked_until else "N/A" }}</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">📅 Created: {{ user.created_at.strftime("%Y-%m-%d %H:%M") }}</p>
        </div>
        <div class="flex gap-2 ml-4">
          <button
            class="px-3 py-1 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 border border-blue-300 dark:border-blue-600 hover:border-blue-500 dark:hover:border-blue-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            hx-get="{{ root_path }}/admin/users/{{ user.email | urlencode }}/edit"
            hx-target="#user-edit-modal-content"
            hx-swap="innerHTML show:top"
            hx-on::before-request="const modal = document.getElementById('user-edit-modal'); if (modal) { modal.style.display = 'block'; modal.classList.remove('hidden'); void modal.offsetHeight; }"
          >
            Edit
          </button>
          {% if not user.is_current_user and not user.is_last_admin %}
            {% if user.is_locked %}
            <button
              class="px-3 py-1 text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 border border-indigo-300 dark:border-indigo-600 hover:border-indigo-500 dark:hover:border-indigo-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              hx-post="{{ root_path }}/admin/users/{{ user.email | urlencode }}/unlock"
              hx-confirm="Unlock this user account?"
              hx-target="closest .user-card"
              hx-swap="outerHTML"
            >
              Unlock
            </button>
            {% endif %}
            {% if not user.is_active %}
            <button
              class="px-3 py-1 text-sm font-medium text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 border border-green-300 dark:border-green-600 hover:border-green-500 dark:hover:border-green-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
              hx-post="{{ root_path }}/admin/users/{{ user.email | urlencode }}/activate"
              hx-confirm="Activate this user?"
              hx-target="closest .user-card"
              hx-swap="outerHTML"
            >
              Activate
            </button>
            {% else %}
            <button
              class="px-3 py-1 text-sm font-medium text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-300 border border-orange-300 dark:border-orange-600 hover:border-orange-500 dark:hover:border-orange-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500"
              hx-post="{{ root_path }}/admin/users/{{ user.email | urlencode }}/deactivate"
              hx-confirm="Deactivate this user?"
              hx-target="closest .user-card"
              hx-swap="outerHTML"
            >
              Deactivate
            </button>
            {% endif %}
          {% endif %}
          {% if not user.is_current_user and not user.is_last_admin %}
            {% if user.password_change_required %}
            <span class="px-3 py-1 text-sm font-medium text-orange-600 dark:text-orange-400 bg-orange-50 dark:bg-orange-900/20 border border-orange-300 dark:border-orange-600 rounded-md">
              Password Change Required
            </span>
            {% else %}
            <button
              class="px-3 py-1 text-sm font-medium text-yellow-600 dark:text-yellow-400 hover:text-yellow-800 dark:hover:text-yellow-300 border border-yellow-300 dark:border-yellow-600 hover:border-yellow-500 dark:hover:border-yellow-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500"
              hx-post="{{ root_path }}/admin/users/{{ user.email | urlencode }}/force-password-change"
              hx-confirm="Force this user to change their password on next login?"
              hx-target="closest .user-card"
              hx-swap="outerHTML"
            >
              Force Password Change
            </button>
            {% endif %}
          {% endif %}
          {% if not user.is_current_user and not user.is_last_admin %}
          <button
            class="px-3 py-1 text-sm font-medium text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 border border-red-300 dark:border-red-600 hover:border-red-500 dark:hover:border-red-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
            hx-delete="{{ root_path }}/admin/users/{{ user.email | urlencode }}"
            hx-confirm="Are you sure you want to delete this user? This action cannot be undone."
            hx-target="closest .user-card"
            hx-swap="outerHTML"
          >
            Delete
          </button>
          {% endif %}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="text-center py-8">
    <p class="text-gray-500 dark:text-gray-400">No users found.</p>
  </div>
  {% endif %}
</div>

<!-- Out-of-band swap for pagination controls -->
<div id="users-pagination-controls" hx-swap-oob="true">
  {% set base_url = root_path + '/admin/users/partial' %}
  {% set hx_target = '#users-list-container' %}
  {% set hx_indicator = '#users-loading' %}
  {% set hx_swap = 'outerHTML' %}
  {% set table_name = 'users' %}
  {% set query_params = {} %}
  {% include 'pagination_controls.html' %}
</div>
