{% extends 'adminpanel/base.html' %}

{% block title %}Search Users · Admin Panel{% endblock %}

{% block content %}
<div class="mb-6">
  <a href="{% url 'adminpanel:dashboard' %}" class="text-blue-400 hover:text-blue-300 text-sm">← Back to Dashboard</a>
</div>

<h1 class="text-2xl font-bold mb-6">🔍 Search Users</h1>

<!-- Search Form -->
<div class="p-6 rounded-xl bg-slate-900 border border-slate-800 mb-6">
  <form method="get" class="flex gap-3">
    <input 
      type="text" 
      name="q" 
      value="{{ query }}" 
      placeholder="Search by email, username, or name..." 
      class="flex-1 px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
      autofocus
    />
    <button type="submit" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition">
      Search
    </button>
  </form>
  {% if query %}
    <div class="mt-3 text-sm text-slate-400">
      Found {{ users|length }} result{{ users|length|pluralize }} for "{{ query }}"
    </div>
  {% endif %}
</div>

<!-- Results -->
<div class="p-6 rounded-xl bg-slate-900 border border-slate-800">
  {% if users %}
    <div class="space-y-3">
      {% for user in users %}
        <div class="flex items-center justify-between p-4 rounded-lg bg-slate-800/50 hover:bg-slate-800 transition">
          <div class="flex-1">
            <div class="flex items-center gap-3">
              <a href="{% url 'adminpanel:user_detail' user.id %}" class="font-medium text-blue-400 hover:text-blue-300">
                {{ user.email }}
              </a>
              {% if user.verified %}
                <span class="px-2 py-1 rounded text-xs bg-amber-600">✓ Verified</span>
              {% endif %}
              {% if not user.is_active %}
                <span class="px-2 py-1 rounded text-xs bg-red-600">Inactive</span>
              {% endif %}
              {% if user.is_superuser %}
                <span class="px-2 py-1 rounded text-xs bg-purple-600">Admin</span>
              {% endif %}
            </div>
            <div class="mt-1 text-sm text-slate-400">
              <span>{{ user.username }}</span>
              <span class="mx-2">•</span>
              <span>{{ user.get_role_display }}</span>
              <span class="mx-2">•</span>
              <span>Joined {{ user.date_joined|date:"Y-m-d" }}</span>
            </div>
          </div>
          <a href="{% url 'adminpanel:user_detail' user.id %}" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition">
            View Details →
          </a>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <div class="text-center py-12">
      <div class="text-4xl mb-4">🔍</div>
      {% if query %}
        <p class="text-lg text-slate-300 mb-2">No users found matching "{{ query }}"</p>
        <p class="text-sm text-slate-400">Try a different search term</p>
      {% else %}
        <p class="text-lg text-slate-300 mb-2">Start searching for users</p>
        <p class="text-sm text-slate-400">Enter an email, username, or name above</p>
      {% endif %}
    </div>
  {% endif %}
</div>

{% endblock %}