{% extends 'base.html' %}{% load static %}
{% block title %}Marketplace — Unity Nation{% endblock %}
{% block extra_css %}
.mkt-search{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.mkt-search input,.mkt-search select{background:var(--panel);border:1px solid var(--border);border-radius:9px;color:var(--white);padding:9px 13px;font-size:.84rem;font-family:var(--fb);outline:none;transition:border-color var(--tr)}
.mkt-search input{flex:1;min-width:180px}.mkt-search input:focus,.mkt-search select:focus{border-color:var(--violet)}
.mkt-search select option{background:var(--panel)}
.mkt-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:22px}
.m-tab{padding:9px 16px;font-size:.84rem;font-weight:600;color:var(--muted);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all var(--tr);font-family:var(--fb)}
.m-tab.active,.m-tab:hover{color:var(--white);border-bottom-color:var(--violet)}
.mkt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:15px}
.mkt-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;transition:all var(--tr)}
.mkt-card:hover{transform:translateY(-4px);border-color:rgba(123,95,230,.38);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.mkt-img{height:165px;background:linear-gradient(135deg,#1a1a3a,#0d0e1e);display:flex;align-items:center;justify-content:center;font-size:2.5rem;overflow:hidden;position:relative}
.mkt-img img{width:100%;height:100%;object-fit:cover}
.mkt-pill{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border-radius:100px;padding:3px 10px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--teal)}
.mkt-body{padding:16px}
.mkt-merchant{font-size:.72rem;color:var(--muted);margin-bottom:4px}
.mkt-card h3{font-family:var(--ff);font-size:.93rem;font-weight:700;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-desc{font-size:.79rem;color:var(--muted);margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}
.mkt-foot{display:flex;align-items:center;justify-content:space-between}
.mkt-price{font-family:var(--ff);font-weight:700;font-size:1rem;color:var(--teal)}
.gate{background:linear-gradient(135deg,rgba(123,95,230,.12),rgba(0,200,168,.07));border:1px solid rgba(123,95,230,.26);border-radius:var(--rl);padding:55px 36px;text-align:center}
.gate-icon{width:80px;height:80px;border-radius:20px;background:rgba(123,95,230,.18);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 20px}
.prog-track{height:7px;background:rgba(255,255,255,.07);border-radius:100px;overflow:hidden;margin-bottom:8px}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--violet),var(--teal));border-radius:100px}
{% endblock %}
{% block content %}
<div class="container pg-wrap">
<div class="pg-hd"><div class="ey">Marketplace</div><h1>Browse Products &amp; Services</h1><p>Buy from verified Unity Nation merchants using your wallet balance.</p></div>
{% if has_access %}
<div class="mkt-search">
  <input type="text" id="mQ" placeholder="Search products, services…" oninput="fM()">
  <select id="mC" onchange="fM()"><option value="">All Types</option><option value="product">Products</option><option value="service">Services</option></select>
</div>
<div class="mkt-tabs">
  <button class="m-tab active" onclick="swTab(this,'all')">All Listings</button>
  <button class="m-tab" onclick="swTab(this,'product')">Products</button>
  <button class="m-tab" onclick="swTab(this,'service')">Services</button>
  <button class="m-tab" onclick="swTab(this,'merchant')">Merchants</button>
</div>
<div class="mkt-grid" id="mG">
  {% for item in products %}<div class="mkt-card" data-type="product" data-name="{{ item.name|lower }}"><div class="mkt-img"><span class="mkt-pill">Product</span>{% if item.image %}<img src="{{ item.image.url }}" alt="{{ item.name }}">{% else %}📦{% endif %}</div><div class="mkt-body"><div class="mkt-merchant"><i class="fas fa-store" style="font-size:.65rem;margin-right:3px"></i>{{ item.merchant.business_name }}</div><h3>{{ item.name }}</h3><div class="mkt-desc">{{ item.description }}</div><div class="mkt-foot"><span class="mkt-price">${{ item.price }}</span><a href="{% url 'product_detail' item.id %}" class="btn btn-violet btn-sm"><i class="fas fa-eye"></i>View</a></div></div></div>{% endfor %}
  {% for item in services %}<div class="mkt-card" data-type="service" data-name="{{ item.name|lower }}"><div class="mkt-img"><span class="mkt-pill" style="color:var(--vlt)">Service</span>{% if item.image %}<img src="{{ item.image.url }}" alt="{{ item.name }}">{% else %}⚡{% endif %}</div><div class="mkt-body"><div class="mkt-merchant"><i class="fas fa-store" style="font-size:.65rem;margin-right:3px"></i>{{ item.merchant.business_name }}</div><h3>{{ item.name }}</h3><div class="mkt-desc">{{ item.description }}</div><div class="mkt-foot"><span class="mkt-price">${{ item.price }}</span><a href="{% url 'service_detail' item.id %}" class="btn btn-violet btn-sm"><i class="fas fa-eye"></i>View</a></div></div></div>{% endfor %}
  {% if not products and not services %}<div style="grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted)"><div style="width:70px;height:70px;border-radius:18px;background:rgba(123,95,230,.15);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 16px"><i class="fas fa-store" style="color:var(--vlt)"></i></div><h3 style="font-family:var(--ff);color:var(--white);margin-bottom:7px">No listings yet</h3><p>Merchants haven't added products or services yet. Check back soon.</p></div>{% endif %}
</div>
<div id="merG" style="display:none" class="mkt-grid">
  {% for m in merchants %}<div class="mkt-card"><div class="mkt-body" style="padding:22px"><div style="display:flex;align-items:center;gap:12px;margin-bottom:13px"><div style="width:46px;height:46px;border-radius:12px;background:rgba(123,95,230,.2);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0">🏪</div><div><h3 style="margin:0 0 3px;font-family:var(--ff);font-size:.93rem;font-weight:700">{{ m.business_name }}</h3><div style="font-size:.74rem;color:var(--muted)">{{ m.country|default:"Global" }}</div></div></div><div class="mkt-desc" style="margin-bottom:13px">{{ m.description|truncatechars:100 }}</div><a href="{% url 'merchant_detail' m.id %}" class="btn btn-ghost btn-sm btn-block"><i class="fas fa-store"></i>View Store</a></div></div>{% empty %}<div style="grid-column:1/-1;text-align:center;padding:60px;color:var(--muted)"><h3 style="font-family:var(--ff);color:var(--white)">No merchants yet</h3></div>{% endfor %}
</div>
{% else %}
<div class="gate"><div class="gate-icon"><i class="fas fa-lock" style="color:var(--vlt)"></i></div><h2 style="font-family:var(--ff);font-size:1.7rem;font-weight:700;margin-bottom:11px">Marketplace Locked</h2><p style="color:var(--muted);max-width:420px;margin:0 auto 24px;line-height:1.65">You need <strong style="color:var(--white)">5 active referrals</strong> to unlock the full marketplace. You currently have <strong style="color:var(--white)">{{ activated_referrals_count }}</strong>.</p><div style="max-width:280px;margin:0 auto 22px"><div class="prog-track"><div class="prog-fill" style="width:{% widthratio activated_referrals_count 5 100 %}%;max-width:100%"></div></div><div style="display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)"><span>{{ activated_referrals_count }} active</span><span>5 needed</span></div></div><div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><a href="{% url 'successful_referrals' %}" class="btn btn-violet btn-lg"><i class="fas fa-users"></i>View My Referrals</a><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-ghost btn-lg"><i class="fas fa-copy"></i>Copy Referral Link</button></div></div>
{% endif %}
</div>
<script>
function swTab(el,tab){document.querySelectorAll('.m-tab').forEach(t=>t.classList.remove('active'));el.classList.add('active');const g=document.getElementById('mG'),mg=document.getElementById('merG');if(!g)return;if(tab==='merchant'){g.style.display='none';if(mg)mg.style.display='grid'}else{g.style.display='grid';if(mg)mg.style.display='none';document.querySelectorAll('#mG .mkt-card').forEach(c=>c.style.display=(tab==='all'||c.dataset.type===tab)?'':'none')}}
function fM(){const q=document.getElementById('mQ').value.toLowerCase(),cat=document.getElementById('mC').value;document.querySelectorAll('#mG .mkt-card').forEach(c=>{const mq=!q||c.dataset.name?.includes(q),mc=!cat||c.dataset.type===cat;c.style.display=(mq&&mc)?'':'none'})}
</script>
{% endblock %}