{% extends 'base.html' %}{% load static %}
{% block title %}Referral Tree — Unity Nation{% endblock %}
{% block extra_css %}
.tree-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--rl);padding:36px 24px;overflow-x:auto}
.tree-level{display:flex;justify-content:center;gap:12px;margin-bottom:8px;position:relative}
.tree-level::before{content:'';position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:1px;height:14px;background:var(--border)}
.tree-level:first-child::before{display:none}
.tnode{display:flex;flex-direction:column;align-items:center;gap:3px}
.tn-c{border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}
.tn-you{width:54px;height:54px;background:linear-gradient(135deg,var(--violet),var(--vlt));color:#fff;font-size:.8rem;box-shadow:0 0 24px rgba(123,95,230,.4)}
.tn-l1{width:42px;height:42px;background:rgba(123,95,230,.25);color:var(--vlt);border:1px solid rgba(123,95,230,.35)}
.tn-l2{width:35px;height:35px;background:rgba(0,200,168,.15);color:var(--teal);border:1px solid rgba(0,200,168,.3);font-size:.68rem}
.tn-l3{width:30px;height:30px;background:rgba(245,200,66,.12);color:var(--gold);border:1px solid rgba(245,200,66,.25);font-size:.64rem}
.tn-lbl{font-size:.66rem;color:var(--muted);white-space:nowrap}
.tn-bonus{font-size:.67rem;font-weight:700;color:var(--teal)}
{% endblock %}
{% block content %}
<div class="container pg-wrap">
<div class="pg-hd"><div class="ey">Network</div><h1>Referral Tree</h1><p>Visual map of your full referral network structure.</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>
  <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 (L1)</div><div class="s-val s-g">{{ l1_count|default:"0" }}</div></div>
  <div class="stat-card"><div class="s-lbl">Levels</div><div class="s-val s-gold">7</div></div>
</div>

<div class="tree-card">
  <div style="text-align:center;margin-bottom:30px"><div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--vlt);margin-bottom:6px">Your Network</div><div style="font-family:var(--ff);font-size:1.1rem;font-weight:700">Referral Tree Visualized</div></div>

  <div class="tree-level" style="margin-bottom:10px"><div class="tnode"><div class="tn-c tn-you">YOU</div><div class="tn-lbl">{{ user.username }}</div></div></div>

  {% if level1_refs %}
  <div style="display:flex;justify-content:center;gap:32px;margin-bottom:6px">{% for r in level1_refs|slice:":5" %}<div style="width:1px;height:16px;background:var(--border)"></div>{% endfor %}</div>
  <div class="tree-level">
  {% for r in level1_refs %}<div class="tnode"><div class="tn-c tn-l1">{{ r.username|first|upper }}</div><div class="tn-lbl">{{ r.username|truncatechars:8 }}</div><div class="tn-bonus">+$1</div></div>{% endfor %}
  </div>
  {% else %}
  <div style="text-align:center;color:var(--muted);font-size:.86rem;padding:30px 0">
    <i class="fas fa-info-circle" style="margin-right:6px"></i>No referrals yet. Share your link to build your tree!
  </div>
  {% endif %}

  {% if level2_refs %}
  <div style="display:flex;justify-content:center;gap:20px;margin:8px 0">{% for r in level2_refs|slice:":6" %}<div style="width:1px;height:14px;background:var(--border)"></div>{% endfor %}</div>
  <div class="tree-level">{% for r in level2_refs %}<div class="tnode"><div class="tn-c tn-l2">{{ r.username|first|upper }}</div><div class="tn-lbl">{{ r.username|truncatechars:6 }}</div><div class="tn-bonus" style="font-size:.6rem">L2</div></div>{% endfor %}</div>
  {% endif %}

  {% if level3_refs %}
  <div style="display:flex;justify-content:center;gap:14px;margin:8px 0">{% for r in level3_refs|slice:":6" %}<div style="width:1px;height:14px;background:var(--border)"></div>{% endfor %}</div>
  <div class="tree-level">{% for r in level3_refs %}<div class="tnode"><div class="tn-c tn-l3">{{ r.username|first|upper }}</div><div class="tn-bonus" style="font-size:.58rem">L3</div></div>{% endfor %}</div>
  {% endif %}

  {% if level1_refs %}<div style="text-align:center;color:var(--muted);font-size:.78rem;margin-top:16px">Network continues up to Level 7 · <a href="{% url 'total_team' %}" style="color:var(--vlt)">View Full Team List →</a></div>{% endif %}
</div>

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