{% extends 'base.html' %} {% load static %} {% block title %}Manage Users -
Admin Panel - AIBOTXCHANGE{% endblock %} {% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <!-- Header -->
  <div class="mb-8">
    <div class="flex justify-between items-center">
      <div>
        <h1 class="text-3xl font-bold text-gray-900">Manage Users</h1>
        <p class="mt-2 text-gray-600">View and manage all registered users</p>
      </div>
      <a href="{% url 'admin_panel:dashboard' %}" class="btn-secondary">
        <i class="fas fa-arrow-left mr-2"></i>
        Back to Dashboard
      </a>
    </div>
  </div>

  <!-- Search and Filters -->
  <div class="bg-white rounded-lg shadow-sm border p-6 mb-8">
    <form method="GET" class="flex items-center space-x-4">
      <div class="flex-1">
        <input
          type="text"
          name="search"
          value="{{ search }}"
          placeholder="Search by username, email, or name..."
          class="form-input w-full"
        />
      </div>
      <button type="submit" class="btn-primary">
        <i class="fas fa-search mr-2"></i>
        Search
      </button>
      {% if search %}
      <a href="{% url 'admin_panel:manage_users' %}" class="btn-secondary">
        Clear
      </a>
      {% endif %}
    </form>
  </div>

  <!-- Users Table -->
  <div class="bg-white shadow rounded-lg overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200">
      <h2 class="text-lg font-medium text-gray-900">All Users</h2>
    </div>
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
            >
              User
            </th>
            <th
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
            >
              Email
            </th>
            <th
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
            >
              Status
            </th>
            <th
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
            >
              Joined
            </th>
            <th
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
            >
              Last Login
            </th>
            <th
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
            >
              Actions
            </th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          {% for user in users %}
          <tr class="hover:bg-gray-50">
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div
                  class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center mr-4"
                >
                  <span class="text-white font-semibold"
                    >{{ user.first_name|first|default:user.username|first
                    }}</span
                  >
                </div>
                <div>
                  <div class="text-sm font-medium text-gray-900">
                    {{ user.get_full_name|default:user.username }}
                  </div>
                  <div class="text-sm text-gray-500">ID: {{ user.id }}</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900">
                {{ user.email|default:"Not provided" }}
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span
                class="status-badge status-{% if user.is_active %}active{% else %}inactive{% endif %}"
              >
                {% if user.is_active %}Active{% else %}Inactive{% endif %}
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
              {{ user.date_joined|date:"M d, Y" }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
              {{ user.last_login|date:"M d, Y"|default:"Never" }}
            </td>
            <td
              class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
            >
              <a
                href="{% url 'admin_panel:user_detail' user.id %}"
                class="text-blue-600 hover:text-blue-500 mr-3"
              >
                <i class="fas fa-eye"></i>
              </a>
              <a href="#" class="text-gray-600 hover:text-gray-500">
                <i class="fas fa-edit"></i>
              </a>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="6" class="px-6 py-8 text-center">
              <div class="text-gray-500">
                {% if search %} No users found matching "{{ search }}" {% else
                %} No users found {% endif %}
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    {% if is_paginated %}
    <div class="bg-white px-4 py-3 border-t border-gray-200 sm:px-6">
      <div class="flex justify-between items-center">
        <div class="text-sm text-gray-700">
          Showing {{ users.start_index }} to {{ users.end_index }} of {{
          users.paginator.count }} users
        </div>
        <div class="flex items-center space-x-2">
          {% if users.has_previous %}
          <a
            href="?{% if search %}search={{ search }}&{% endif %}page={{ users.previous_page_number }}"
            class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700"
          >
            Previous
          </a>
          {% endif %}

          <span class="px-3 py-2 text-sm font-medium text-gray-900">
            Page {{ users.number }} of {{ users.paginator.num_pages }}
          </span>

          {% if users.has_next %}
          <a
            href="?{% if search %}search={{ search }}&{% endif %}page={{ users.next_page_number }}"
            class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700"
          >
            Next
          </a>
          {% endif %}
        </div>
      </div>
    </div>
    {% endif %}
  </div>

  <!-- Summary Stats -->
  <div class="mt-8 grid grid-cols-1 md:grid-cols-4 gap-6">
    <div class="bg-white rounded-lg shadow p-6 text-center">
      <div class="text-2xl font-bold text-blue-600">
        {{ users.paginator.count|default:0 }}
      </div>
      <div class="text-sm text-gray-500">Total Users</div>
    </div>
    <div class="bg-white rounded-lg shadow p-6 text-center">
      <div class="text-2xl font-bold text-green-600">
        {{ active_users_count|default:0 }}
      </div>
      <div class="text-sm text-gray-500">Active Users</div>
    </div>
    <div class="bg-white rounded-lg shadow p-6 text-center">
      <div class="text-2xl font-bold text-orange-600">
        {{ new_users_today|default:0 }}
      </div>
      <div class="text-sm text-gray-500">New Today</div>
    </div>
    <div class="bg-white rounded-lg shadow p-6 text-center">
      <div class="text-2xl font-bold text-purple-600">
        {{ users_with_subscriptions|default:0 }}
      </div>
      <div class="text-sm text-gray-500">With Subscriptions</div>
    </div>
  </div>
</div>
{% endblock %}