{% extends 'adminpanel/base.html' %}
{% block title %}Users · Admin Dashboard{% endblock %}
{% block page_title %}Users{% endblock %}
{% block content %}
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Total Users</div>
    <div class="text-2xl font-semibold">{{ stats.total|default:0 }}</div>
  </div>
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Investors</div>
    <div class="text-2xl font-semibold">{{ stats.investors|default:0 }}</div>
  </div>
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Traders</div>
    <div class="text-2xl font-semibold">{{ stats.traders|default:0 }}</div>
  </div>
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Verified</div>
    <div class="text-2xl font-semibold">{{ stats.verified|default:0 }}</div>
  </div>
</div>

<div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
  <div class="flex items-center justify-between mb-4">
    <h2 class="font-semibold">Latest Users</h2>
    <a href="{% url 'adminpanel:search_users' %}" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition">
      🔍 Search Users
    </a>
  </div>
  <div class="overflow-x-auto">
    <table class="min-w-full text-sm">
      <thead class="text-slate-400">
        <tr>
          <th class="text-left py-2 pr-4">Email</th>
          <th class="text-left py-2 pr-4">Username</th>
          <th class="text-left py-2 pr-4">Role</th>
          <th class="text-left py-2 pr-4">Status</th>
          <th class="text-left py-2 pr-4">Joined</th>
          <th class="text-left py-2 pr-4">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for u in latest_users %}
          <tr class="border-t border-slate-800 hover:bg-slate-800/30">
            <td class="py-3 pr-4">{{ u.email }}</td>
            <td class="py-3 pr-4">{{ u.username }}</td>
            <td class="py-3 pr-4">
              <span class="px-2 py-1 rounded text-xs {% if u.role == 'trader' %}bg-purple-600{% else %}bg-blue-600{% endif %}">
                {{ u.get_role_display }}
              </span>
            </td>
            <td class="py-3 pr-4">
              <div class="flex flex-col gap-1">
                {% if u.verified %}
                  <span class="text-amber-300 text-xs">✓ Verified</span>
                {% else %}
                  <span class="text-slate-400 text-xs">Not Verified</span>
                {% endif %}
                {% if not u.is_active %}
                  <span class="text-red-300 text-xs">Inactive</span>
                {% endif %}
              </div>
            </td>
            <td class="py-3 pr-4">{{ u.date_joined|date:'Y-m-d H:i' }}</td>
            <td class="py-3 pr-4">
              <a href="{% url 'adminpanel:user_detail' u.id %}" class="text-blue-400 hover:text-blue-300 text-sm">
                View Details →
              </a>
            </td>
          </tr>
        {% empty %}
          <tr><td colspan="6" class="py-4 text-slate-400 text-center">No users yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}