{% extends 'base.html' %}{% load static %}
{% block title %}Full Team — Unity Nation{% endblock %}
{% block extra_css %}
.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.member-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:13px;display:flex;align-items:center;gap:10px;transition:border-color var(--tr)}
.member-card:hover{border-color:rgba(123,95,230,.3)}
.m-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}
{% endblock %}
{% block content %}
<div class="container pg-wrap">
<div class="pg-hd"><div class="ey">Network</div><h1>Full Team</h1><p>All members across all 7 levels of your referral network.</p></div>

<div class="stats-grid">
  <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">Total Team</div><div class="s-val s-v">{{ total_count|default:"0" }}</div><div class="s-sub">Across all 7 levels</div></div>
  <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">Direct (Level 1)</div><div class="s-val s-g">{{ level_counts.1|default:"0" }}</div><div class="s-sub">Your direct referrals</div></div>
  <div class="stat-card"><div class="s-lbl">Network Depth</div><div class="s-val s-gold">7</div><div class="s-sub">Levels deep</div></div>
</div>

{% if team_members %}
<div class="member-grid">
{% for member in team_members %}
<div class="member-card">
  <div class="m-av">{{ member.username|first|upper }}</div>
  <div><div style="font-size:.85rem;font-weight:600">{{ member.username }}</div><div style="font-size:.73rem;color:var(--muted)">L{{ member.level|default:"1" }} · {{ member.country|default:"Unknown" }}</div></div>
</div>
{% endfor %}
</div>
{% else %}
<div style="text-align:center;padding:70px 20px;color:var(--muted)">
  <div style="width:80px;height:80px;border-radius:20px;background:rgba(123,95,230,.12);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 18px"><i class="fas fa-network-wired" style="color:var(--vlt)"></i></div>
  <h3 style="font-family:var(--ff);color:var(--white);margin-bottom:7px">No team members yet</h3>
  <p style="margin-bottom:20px">Share your referral link to start building your network.</p>
  <a href="{% url 'successful_referrals' %}" class="btn btn-violet"><i class="fas fa-users"></i>Get My Referral Link</a>
</div>
{% endif %}

<div style="margin-top:20px"><a href="{% url 'successful_referrals' %}" class="btn btn-ghost btn-sm"><i class="fas fa-arrow-left"></i>Direct Referrals Only</a></div>
</div>
{% endblock %}