{% extends 'base.html' %}{% load static %}
{% block title %}{{ merchant.business_name }} — Unity Nation{% endblock %}
{% block extra_css %}
.m-hero{background:linear-gradient(135deg,rgba(123,95,230,.15),rgba(0,200,168,.08));border:1px solid rgba(123,95,230,.28);border-radius:var(--rl);padding:28px 32px;margin-bottom:28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.m-logo{width:68px;height:68px;border-radius:16px;background:rgba(123,95,230,.25);display:flex;align-items:center;justify-content:center;font-size:1.9rem;flex-shrink:0}
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:13px}
.item-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;transition:all var(--tr)}
.item-card:hover{border-color:rgba(123,95,230,.35);transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.4)}
.item-img{height:145px;background:linear-gradient(135deg,#1a1a3a,#0d0e1e);display:flex;align-items:center;justify-content:center;font-size:2.2rem;overflow:hidden}
.item-img img{width:100%;height:100%;object-fit:cover}
.item-body{padding:14px}
.item-body h3{font-family:var(--ff);font-size:.92rem;font-weight:700;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-body .desc{font-size:.78rem;color:var(--muted);margin-bottom:11px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-foot{display:flex;align-items:center;justify-content:space-between}
.item-price{font-family:var(--ff);font-weight:700;color:var(--teal)}
{% endblock %}
{% block content %}
<div class="container pg-wrap">
<div style="margin-bottom:18px"><a href="{% url 'marketplace' %}" style="color:var(--muted);font-size:.83rem;text-decoration:none;display:inline-flex;align-items:center;gap:5px"><i class="fas fa-arrow-left"></i>Marketplace</a></div>

<div class="m-hero">
  <div class="m-logo">🏪</div>
  <div style="flex:1">
    <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--vlt);margin-bottom:5px">Verified Merchant</div>
    <h1 style="font-family:var(--ff);font-size:1.8rem;font-weight:700;letter-spacing:-.025em;margin-bottom:5px">{{ merchant.business_name }}</h1>
    <div style="font-size:.86rem;color:var(--muted)">{{ merchant.business_address }}{% if merchant.country %} · {{ merchant.country }}{% endif %}{% if merchant.business_phone %} · {{ merchant.business_phone }}{% endif %}</div>
    {% if merchant.description %}<div style="font-size:.86rem;color:var(--muted);margin-top:8px">{{ merchant.description }}</div>{% endif %}
  </div>
  <span class="badge badge-teal" style="font-size:.8rem;padding:6px 13px"><i class="fas fa-check-circle"></i>Approved</span>
</div>

{% if products %}
<h2 style="font-family:var(--ff);font-size:1.2rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:9px"><i class="fas fa-box" style="color:var(--teal)"></i>Products</h2>
<div class="item-grid" style="margin-bottom:30px">
{% for item in products %}
<div class="item-card">
  <div class="item-img">{% if item.image %}<img src="{{ item.image.url }}" alt="{{ item.name }}">{% else %}📦{% endif %}</div>
  <div class="item-body"><h3>{{ item.name }}</h3><div class="desc">{{ item.description }}</div><div class="item-foot"><span class="item-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 %}
</div>{% endif %}

{% if services %}
<h2 style="font-family:var(--ff);font-size:1.2rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:9px"><i class="fas fa-bolt" style="color:var(--vlt)"></i>Services</h2>
<div class="item-grid">
{% for item in services %}
<div class="item-card">
  <div class="item-img">{% if item.image %}<img src="{{ item.image.url }}" alt="{{ item.name }}">{% else %}⚡{% endif %}</div>
  <div class="item-body"><h3>{{ item.name }}</h3><div class="desc">{{ item.description }}</div><div class="item-foot"><span class="item-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 %}
</div>{% endif %}

{% if not products and not services %}
<div style="text-align:center;padding:60px 20px;color:var(--muted)">
  <div style="width:70px;height:70px;border-radius:18px;background:rgba(123,95,230,.12);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 16px">🏪</div>
  <h3 style="font-family:var(--ff);color:var(--white);margin-bottom:7px">No listings yet</h3>
  <p>This merchant hasn't added products or services yet.</p>
</div>{% endif %}
</div>
{% endblock %}