{% extends 'base.html' %}{% load static %}
{% block title %}Merchant Approvals — Admin{% endblock %}
{% block extra_css %}
.apr-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid rgba(255,255,255,.04);transition:background var(--tr)}
.apr-row:hover{background:rgba(255,255,255,.025)}
.apr-hd{background:rgba(255,255,255,.03);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:10px 18px}
{% endblock %}
{% block content %}
<div class="container pg-wrap">
<div class="pg-hd"><div class="ey">Admin</div><h1>Merchant Approvals</h1><p>Review and approve or reject merchant applications.</p></div>

<div class="stats-grid">
  <div class="stat-card" style="background:linear-gradient(135deg,rgba(245,200,66,.1),rgba(245,200,66,.03));border-color:rgba(245,200,66,.22)"><div class="s-lbl">Pending</div><div class="s-val s-gold">{{ pending_count|default:"0" }}</div><div class="s-sub">Awaiting review</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">Approved</div><div class="s-val s-g">{{ approved_count|default:"0" }}</div><div class="s-sub">Active merchants</div></div>
  <div class="stat-card"><div class="s-lbl">Total Applications</div><div class="s-val s-v">{{ total_count|default:"0" }}</div></div>
</div>

<div style="background:var(--panel);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden">
  <div class="apr-hd" style="display:grid;grid-template-columns:1fr auto auto;gap:14px"><span>Merchant</span><span>Type</span><span>Actions</span></div>
  {% for m in merchants %}
  <div class="apr-row">
    <div>
      <div style="display:flex;align-items:center;gap:9px;margin-bottom:3px">
        <div style="font-weight:600;font-size:.9rem">{{ m.business_name }}</div>
        <span class="badge {% if m.is_approved %}badge-teal{% else %}badge-gold{% endif %}">{% if m.is_approved %}Approved{% else %}Pending{% endif %}</span>
      </div>
      <div style="font-size:.76rem;color:var(--muted)">{{ m.user.username }} · {{ m.country }} · Applied {{ m.created_at|date:"M d, Y" }}</div>
    </div>
    <span class="badge badge-violet">{{ m.get_merchant_type_display }}</span>
    <div style="display:flex;gap:7px;flex-wrap:wrap">
      <a href="{% url 'admin_merchant_detail' m.id %}" class="btn btn-ghost btn-sm"><i class="fas fa-eye"></i>Review</a>
      {% if not m.is_approved %}
      <form method="post" action="{% url 'admin_merchant_approvals' %}" style="display:inline">{% csrf_token %}<input type="hidden" name="merchant_id" value="{{ m.id }}"><input type="hidden" name="action" value="approve"><button type="submit" class="btn btn-teal btn-sm"><i class="fas fa-check"></i>Approve</button></form>
      <form method="post" action="{% url 'admin_merchant_approvals' %}" style="display:inline">{% csrf_token %}<input type="hidden" name="merchant_id" value="{{ m.id }}"><input type="hidden" name="action" value="reject"><button type="submit" class="btn btn-red btn-sm"><i class="fas fa-times"></i>Reject</button></form>
      {% endif %}
    </div>
  </div>
  {% empty %}
  <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"><i class="fas fa-store" style="color:var(--vlt)"></i></div>
    <h3 style="font-family:var(--ff);color:var(--white);margin-bottom:7px">No applications yet</h3>
    <p>Merchant applications will appear here when members apply.</p>
  </div>
  {% endfor %}
</div>
</div>
{% endblock %}