{% extends 'base.html' %}{% load static %}
{% block title %}Dashboard — Unity Nation{% endblock %}
{% block extra_css %}
/* Wallet Hero */
.wallet-hero{background:linear-gradient(135deg,rgba(123,95,230,.2),rgba(0,200,168,.1));border:1px solid rgba(123,95,230,.32);border-radius:var(--rl);padding:28px 32px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;position:relative;overflow:hidden}
.wallet-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(123,95,230,.25),transparent 70%);pointer-events:none}
.w-amt{font-family:var(--ff);font-size:3rem;font-weight:800;background:linear-gradient(90deg,var(--vlt),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.w-lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:5px}
.w-sub{font-size:.82rem;color:var(--muted);margin-top:5px;display:flex;align-items:center;gap:8px}
.w-sub .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite;display:inline-block}
/* Feature cards */
.feat-access-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:20px}
.fa-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--rl);padding:22px;display:flex;flex-direction:column;gap:10px;transition:all var(--tr);position:relative;overflow:hidden}
.fa-card::before{content:'';position:absolute;bottom:-20px;right:-20px;width:80px;height:80px;border-radius:50%;opacity:.06;pointer-events:none}
.fa-card.c-v::before{background:var(--violet)}
.fa-card.c-t::before{background:var(--teal)}
.fa-card.c-g::before{background:var(--gold)}
.fa-card:hover{border-color:rgba(123,95,230,.35);transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.4)}
.fa-icon{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.fi-v{background:rgba(123,95,230,.2);color:var(--vlt)}
.fi-t{background:rgba(0,200,168,.16);color:var(--teal)}
.fi-g{background:rgba(245,200,66,.16);color:var(--gold)}
.fa-card h3{font-family:var(--ff);font-size:.95rem;font-weight:700;margin:0}
.fa-card p{font-size:.8rem;color:var(--muted);margin:0;flex:1;line-height:1.55}
.prog-sm{height:5px;background:rgba(255,255,255,.07);border-radius:100px;overflow:hidden}
.prog-sm-f{height:100%;background:linear-gradient(90deg,var(--violet),var(--teal));border-radius:100px}
.lock-note{font-size:.74rem;color:var(--gold);display:flex;align-items:center;gap:5px}
/* Reward strip */
.rstrip{background:rgba(0,200,168,.07);border:1px solid rgba(0,200,168,.2);border-radius:var(--r);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.rstrip-l{display:flex;align-items:center;gap:12px}
.rstrip-icon{width:40px;height:40px;border-radius:9px;background:rgba(0,200,168,.15);display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:1.1rem;flex-shrink:0}
/* Quick links */
.ql-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:9px}
.ql-item{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:14px 10px;text-decoration:none;text-align:center;transition:all var(--tr)}
.ql-item:hover{border-color:rgba(123,95,230,.4);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.ql-item i{font-size:1.2rem;display:block;margin-bottom:7px}
.ql-item span{font-size:.76rem;font-weight:600;color:var(--white)}
/* Ref link */
.ref-link-box{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:.74rem;color:var(--muted);word-break:break-all;margin-bottom:8px;line-height:1.5}
/* Slider */
.slider{border-radius:var(--r);overflow:hidden;margin-bottom:20px}
.slider img{width:100%;max-height:190px;object-fit:cover;display:none}
.slider img.active{display:block}
{% endblock %}
{% block content %}
<div class="container pg-wrap" style="padding-top:28px">

<!-- Greeting -->
<div style="margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px">
  <div>
    <h1 style="font-family:var(--ff);font-size:1.8rem;font-weight:700;letter-spacing:-.02em">Hello, {{ user.username }} 👋</h1>
    <p style="color:var(--muted);margin-top:3px;font-size:.9rem">Here's your Unity Nation overview for today.</p>
  </div>
  <div style="display:flex;gap:8px">
    <a href="{% url 'transfer' %}" class="btn btn-ghost btn-sm"><i class="fas fa-exchange-alt"></i>Transfer</a>
    <a href="{% url 'withdraw' %}" class="btn btn-teal btn-sm"><i class="fas fa-arrow-up"></i>Withdraw</a>
  </div>
</div>

{% if slides %}
<div class="slider" id="sl">{% for s in slides %}<a href="{{ s.button_link }}" target="_blank"><img src="{{ s.image.url }}" alt="Slide {{ forloop.counter }}"{% if forloop.first %} class="active"{% endif %}></a>{% endfor %}</div>
{% endif %}

<!-- Wallet Hero -->
<div class="wallet-hero">
  <div>
    <div class="w-lbl">Wallet Balance</div>
    <div class="w-amt">${{ user.wallet_balance|floatformat:2 }}</div>
    <div class="w-sub"><span class="dot"></span>Daily reward active &nbsp;·&nbsp; Withdrawn: ${{ user.total_withdrawal|floatformat:2 }}</div>
  </div>
  <div style="text-align:right">
    <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px">Your Referral Link</div>
    <div class="ref-link-box" style="max-width:280px">{{ 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>

<!-- Reward Strip -->
<div class="rstrip">
  <div class="rstrip-l">
    <div class="rstrip-icon"><i class="fas fa-coins"></i></div>
    <div>
      <div style="font-family:var(--ff);font-size:.95rem;font-weight:700;margin-bottom:2px">Daily Reward Program</div>
      <div style="font-size:.79rem;color:var(--muted)">$0.20 automatically credited to your wallet every 24 hours for 100 days</div>
    </div>
  </div>
  <span class="badge badge-teal"><i class="fas fa-check"></i>Active</span>
</div>

<!-- Stats -->
<div class="stats-grid">
  <div class="stat-card"><div class="s-lbl">Wallet Balance</div><div class="s-val s-g">${{ user.wallet_balance|floatformat:2 }}</div><div class="s-sub">Available to withdraw</div></div>
  <div class="stat-card"><div class="s-lbl">Active Referrals</div><div class="s-val s-v">{{ activated_referrals_count }}</div><div class="s-sub">{{ remaining_referrals }} more for marketplace</div></div>
  <div class="stat-card"><div class="s-lbl">Total Withdrawn</div><div class="s-val s-gold">${{ user.total_withdrawal|floatformat:2 }}</div><div class="s-sub">Lifetime earnings out</div></div>
  <div class="stat-card"><div class="s-lbl">Total Team</div><div class="s-val s-v">{{ total_team_count|default:"0" }}</div><div class="s-sub">Members in network</div></div>
</div>

<!-- Feature Cards -->
<div style="font-family:var(--ff);font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px">Platform Access</div>
<div class="feat-access-grid">
  <!-- Marketplace -->
  <div class="fa-card c-v">
    <div class="fa-icon fi-v"><i class="fas fa-store"></i></div>
    <h3>Marketplace</h3>
    <p>Browse and buy products &amp; services from verified merchants.</p>
    {% if has_marketplace_access %}<a href="{% url 'marketplace' %}" class="btn btn-violet btn-sm"><i class="fas fa-store"></i>Open Marketplace</a>
    {% else %}
    <div class="prog-sm"><div class="prog-sm-f" style="width:{{ activated_referrals_count|default:0 }}0%;max-width:100%"></div></div>
    <div class="lock-note"><i class="fas fa-lock"></i>{{ activated_referrals_count }}/5 active referrals needed</div>
    {% endif %}
  </div>
  <!-- Merchant -->
  <div class="fa-card c-g">
    <div class="fa-icon fi-g"><i class="fas fa-shop"></i></div>
    <h3>Merchant Panel</h3>
    <p>Sell products and services to the Unity Nation community.</p>
    {% if is_merchant %}<a href="{% url 'merchant_dashboard' %}" class="btn btn-gold btn-sm"><i class="fas fa-chart-line"></i>My Dashboard</a>
    {% else %}<a href="{% url 'join_marketplace' %}" class="btn btn-ghost btn-sm"><i class="fas fa-plus"></i>Apply to Sell</a>{% endif %}
  </div>
  <!-- Chat -->
  <div class="fa-card c-t">
    <div class="fa-icon fi-t"><i class="fas fa-comments"></i></div>
    <h3>Community Chat</h3>
    <p>Connect with Unity Nation members in community rooms.</p>
    <a href="{% url 'community_chat_list' %}" class="btn btn-teal btn-sm"><i class="fas fa-comments"></i>Open Chat</a>
  </div>
  <!-- Tasks -->
  <div class="fa-card c-v">
    <div class="fa-icon fi-v"><i class="fas fa-tasks"></i></div>
    <h3>Tasks &amp; Adverts</h3>
    <p>Complete social media tasks for extra rewards. Post adverts for your audience.</p>
    <div style="display:flex;gap:7px;flex-wrap:wrap">
      <a href="{% url 'view_tasks' %}" class="btn btn-ghost btn-sm"><i class="fas fa-tasks"></i>Tasks</a>
      <a href="{% url 'create_advert' %}" class="btn btn-ghost btn-sm"><i class="fas fa-bullhorn"></i>Adverts</a>
    </div>
  </div>
  <!-- Referrals -->
  <div class="fa-card c-t">
    <div class="fa-icon fi-t"><i class="fas fa-users"></i></div>
    <h3>My Referrals</h3>
    <p>Track your active referrals and view your full 7-level network tree.</p>
    <div style="display:flex;gap:7px;flex-wrap:wrap">
      <a href="{% url 'successful_referrals' %}" class="btn btn-ghost btn-sm"><i class="fas fa-user-check"></i>Direct</a>
      <a href="{% url 'total_team' %}" class="btn btn-ghost btn-sm"><i class="fas fa-network-wired"></i>Full Team</a>
    </div>
  </div>
  {% if user.is_staff %}
  <!-- Admin -->
  <div class="fa-card c-g">
    <div class="fa-icon fi-g"><i class="fas fa-shield-alt"></i></div>
    <h3>Admin Panel</h3>
    <p>Activate users, approve merchants, and manage the platform.</p>
    <div style="display:flex;gap:7px;flex-wrap:wrap">
      <a href="{% url 'activate_user' %}" class="btn btn-gold btn-sm"><i class="fas fa-user-check"></i>Activate Users</a>
      <a href="{% url 'admin_merchant_approvals' %}" class="btn btn-ghost btn-sm"><i class="fas fa-store"></i>Merchants</a>
    </div>
  </div>
  {% endif %}
</div>

<!-- Quick Links -->
<div style="font-family:var(--ff);font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px;margin-top:8px">Quick Access</div>
<div class="ql-grid">
  <a href="{% url 'transaction_history' %}" class="ql-item"><i class="fas fa-history" style="color:var(--vlt)"></i><span>History</span></a>
  <a href="{% url 'withdraw' %}" class="ql-item"><i class="fas fa-arrow-up" style="color:var(--teal)"></i><span>Withdraw</span></a>
  <a href="{% url 'transfer' %}" class="ql-item"><i class="fas fa-exchange-alt" style="color:var(--gold)"></i><span>Transfer</span></a>
  <a href="{% url 'update_profile' %}" class="ql-item"><i class="fas fa-user-edit" style="color:var(--vlt)"></i><span>Profile</span></a>
  <a href="{% url 'successful_referrals' %}" class="ql-item"><i class="fas fa-users" style="color:var(--teal)"></i><span>Team</span></a>
  <a href="{% url 'community_chat_list' %}" class="ql-item"><i class="fas fa-comments" style="color:var(--vlt)"></i><span>Chat</span></a>
  <a href="{% url 'marketplace' %}" class="ql-item"><i class="fas fa-store" style="color:var(--gold)"></i><span>Market</span></a>
  <a href="{% url 'view_tasks' %}" class="ql-item"><i class="fas fa-tasks" style="color:var(--teal)"></i><span>Tasks</span></a>
</div>
</div>
{% if slides %}<script>(function(){const imgs=document.querySelectorAll('#sl img');if(!imgs.length)return;let c=0;setInterval(()=>{imgs[c].classList.remove('active');c=(c+1)%imgs.length;imgs[c].classList.add('active')},4000)})();</script>{% endif %}
{% endblock %}