{% extends 'base.html' %}{% load static %}
{% block title %}Activate Users — Unity Nation Admin{% endblock %}
{% block extra_css %}
.act-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid rgba(255,255,255,.04);transition:background var(--tr)}
.act-row:hover{background:rgba(255,255,255,.025)}
.act-hd{background:rgba(255,255,255,.03);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:10px 18px}
.u-av{width:40px;height:40px;border-radius:10px;background:rgba(123,95,230,.2);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--vlt);font-size:1rem;flex-shrink:0}
{% endblock %}
{% block content %}
<div class="container pg-wrap">
<div class="pg-hd"><div class="ey">Admin Panel</div><h1>Activate Users</h1><p>Approve and activate pending member accounts.</p></div>

<div class="stats-grid">
  <div class="stat-card" style="background:linear-gradient(135deg,rgba(245,200,66,.1),rgba(245,200,66,.03));border-color:rgba(245,200,66,.22)"><div class="s-lbl">Pending Review</div><div class="s-val s-gold">{{ pending_users|length }}</div></div>
  <div class="stat-card"><div class="s-lbl">Total Members</div><div class="s-val s-v">{{ total_users|default:"—" }}</div></div>
</div>

<div style="background:var(--panel);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden">
  <div class="act-hd" style="display:grid;grid-template-columns:1fr auto auto;gap:14px"><span>Member</span><span>Registered</span><span>Action</span></div>
  {% for u in pending_users %}
  <div class="act-row">
    <div style="display:flex;align-items:center;gap:12px">
      <div class="u-av">{{ u.username|first|upper }}</div>
      <div><div style="font-weight:600;font-size:.9rem">{{ u.username }}</div><div style="font-size:.76rem;color:var(--muted)">{{ u.email }} · {{ u.country|default:"Unknown" }}</div></div>
    </div>
    <div style="font-size:.8rem;color:var(--muted)">{{ u.date_joined|date:"M d, Y" }}</div>
    <div style="display:flex;gap:7px">
      <form method="post" action="{% url 'activate_user' %}" style="display:inline">{% csrf_token %}<input type="hidden" name="user_id" value="{{ u.id }}"><input type="hidden" name="action" value="activate"><button type="submit" class="btn btn-teal btn-sm"><i class="fas fa-check"></i>Activate</button></form>
      <form method="post" action="{% url 'activate_user' %}" style="display:inline">{% csrf_token %}<input type="hidden" name="user_id" value="{{ u.id }}"><input type="hidden" name="action" value="reject"><button type="submit" class="btn btn-red btn-sm"><i class="fas fa-times"></i>Reject</button></form>
    </div>
  </div>
  {% empty %}
  <div style="text-align:center;padding:60px 20px;color:var(--muted)">
    <div style="width:70px;height:70px;border-radius:18px;background:rgba(0,200,168,.12);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 16px"><i class="fas fa-user-check" style="color:var(--teal)"></i></div>
    <h3 style="font-family:var(--ff);color:var(--white);margin-bottom:7px">All caught up!</h3>
    <p>No pending users — all accounts have been reviewed.</p>
  </div>
  {% endfor %}
</div>
</div>
{% endblock %}