{% extends 'base.html' %}{% load static %}
{% block title %}My Referrals — Unity Nation{% endblock %}
{% block extra_css %}
.ref-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid rgba(255,255,255,.04);transition:background var(--tr)}
.ref-row:hover{background:rgba(255,255,255,.025)}
.ref-hd{background:rgba(255,255,255,.03);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:11px 18px}
.r-av{width:36px;height:36px;border-radius:9px;background:rgba(123,95,230,.2);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:var(--vlt);flex-shrink:0}
.link-copy-box{display:flex;flex-direction:column;gap:7px;min-width:260px}
.link-txt{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:.74rem;color:var(--muted);word-break:break-all;line-height:1.5}
{% endblock %}
{% block content %}
<div class="container pg-wrap">
<div class="pg-hd">
  <div class="ey">Network</div>
  <h1>My Referrals</h1>
  <p>Members you directly referred and their activation status.</p>
</div>

<!-- Stats -->
<div class="stats-grid">
  <div class="stat-card" style="background:linear-gradient(135deg,rgba(0,200,168,.1),rgba(0,200,168,.03));border-color:rgba(0,200,168,.22)">
    <div class="s-lbl">Active Referrals</div>
    <div class="s-val s-g">{{ activated_count|default:referrals|length }}</div>
    <div class="s-sub">{{ remaining|default:0 }} more to unlock marketplace</div>
  </div>
  <div class="stat-card" style="background:linear-gradient(135deg,rgba(123,95,230,.1),rgba(123,95,230,.03));border-color:rgba(123,95,230,.22)">
    <div class="s-lbl">Referral Bonus</div>
    <div class="s-val s-v">$1.00</div>
    <div class="s-sub">Per activated referral, instantly</div>
  </div>
  <div class="stat-card">
    <div class="s-lbl">Marketplace Access</div>
    <div class="s-val" style="font-size:1.4rem">{% if activated_count >= 5 %}🔓{% else %}🔒{% endif %}</div>
    <div class="s-sub">{% if activated_count >= 5 %}Unlocked!{% else %}Need {{ remaining }} more active referrals{% endif %}</div>
  </div>
</div>

<!-- Referral Link Banner -->
<div style="background:linear-gradient(135deg,rgba(123,95,230,.15),rgba(0,200,168,.08));border:1px solid rgba(123,95,230,.3);border-radius:var(--rl);padding:26px 28px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap">
  <div>
    <h3 style="font-family:var(--ff);font-size:1.05rem;font-weight:700;margin-bottom:5px">Your Referral Link</h3>
    <p style="color:var(--muted);font-size:.84rem;margin:0">Share this link and earn $1 for every member who activates.</p>
  </div>
  <div class="link-copy-box">
    <div class="link-txt">{{ request.scheme }}://{{ request.get_host }}/signup/?ref={{ user.username }}</div>
    <button onclick="navigator.clipboard.writeText('{{ request.scheme }}://{{ request.get_host }}/signup/?ref={{ user.username }}');this.innerHTML='<i class=fas fa-check></i> Copied!';setTimeout(()=>this.innerHTML='<i class=fas fa-copy></i> Copy Link',2000)" class="btn btn-violet btn-sm"><i class="fas fa-copy"></i>Copy Link</button>
  </div>
</div>

<!-- Referrals Table -->
<div style="background:var(--panel);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden">
  <div class="ref-hd" style="display:grid;grid-template-columns:1fr auto auto;gap:14px"><span>Member</span><span>Joined</span><span>Status</span></div>
  {% for ref in referrals %}
  <div class="ref-row">
    <div style="display:flex;align-items:center;gap:11px">
      <div class="r-av">{{ ref.referred_user.username|first|upper }}</div>
      <div>
        <div style="font-weight:600;font-size:.88rem">{{ ref.referred_user.username }}</div>
        <div style="font-size:.75rem;color:var(--muted)">{{ ref.referred_user.country|default:"Unknown" }}</div>
      </div>
    </div>
    <div style="font-size:.8rem;color:var(--muted);white-space:nowrap">{{ ref.date_referred|date:"M d, Y" }}</div>
    <div>{% if ref.is_active %}<span class="badge badge-teal"><i class="fas fa-check"></i>Active</span>{% else %}<span class="badge badge-gold"><i class="fas fa-clock"></i>Pending</span>{% endif %}</div>
  </div>
  {% empty %}
  <div style="text-align:center;padding:60px 20px;color:var(--muted)">
    <i class="fas fa-users" style="font-size:2.5rem;display:block;margin-bottom:14px;opacity:.3"></i>
    <h3 style="font-family:var(--ff);color:var(--white);margin-bottom:7px">No referrals yet</h3>
    <p style="margin-bottom:20px">Share your referral link to start building your network.</p>
    <button onclick="navigator.clipboard.writeText('{{ request.scheme }}://{{ request.get_host }}/signup/?ref={{ user.username }}');this.innerHTML='<i class=fas fa-check></i> Copied!';setTimeout(()=>this.innerHTML='<i class=fas fa-share></i> Copy My Link',2000)" class="btn btn-violet"><i class="fas fa-share"></i>Copy My Link</button>
  </div>
  {% endfor %}
</div>
<div style="margin-top:16px;text-align:right"><a href="{% url 'total_team' %}" class="btn btn-ghost btn-sm"><i class="fas fa-network-wired"></i>View Full Team →</a></div>
</div>
{% endblock %}