<div class="mb-6 sm:mb-8">
  <h1 class="text-2xl sm:text-3xl font-display font-semibold">Member</h1>
  <p class="text-muted text-sm mt-1">Klik nama untuk lihat detail, riwayat pesanan, & edit data.</p>
</div>

<% if (members && members.length) { %>

  <!-- Desktop table -->
  <div class="card p-0 overflow-hidden tbl-mobile-hide">
    <div class="tbl-wrap">
      <table class="tbl">
        <thead>
          <tr>
            <th>Nama</th>
            <th>Kontak</th>
            <th>Akun Broker</th>
            <th>IB</th>
            <th>Pesanan</th>
            <th>Status</th>
            <th>Daftar</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <% members.forEach(function(m){ %>
            <tr>
              <td>
                <a href="/admin/members/<%= m.id %>" class="font-medium hover:text-gold-200 transition"><%= m.name %></a>
              </td>
              <td>
                <div class="text-sm"><%= m.email %></div>
                <div class="text-xs text-muted mono"><%= m.phone || '-' %></div>
              </td>
              <td class="text-sm mono"><%= m.broker_account || '-' %></td>
              <td>
                <% if (m.is_ib) { %><span class="pill pill-gold">⭐ IB</span><% } else { %><span class="text-muted-2 text-xs">-</span><% } %>
              </td>
              <td>
                <div class="text-sm"><%= m.total_orders %> total</div>
                <div class="text-xs text-muted"><%= m.approved_orders %> approved</div>
              </td>
              <td><span class="pill <%= m.status==='active' ? 'pill-green' : (m.status==='pending_verification' ? 'pill-gold' : 'pill-red') %>"><%= m.status %></span></td>
              <td class="text-xs whitespace-nowrap"><%= new Date(m.created_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short',year:'numeric'}) %></td>
              <td><a href="/admin/members/<%= m.id %>" class="text-gold-300 hover:text-gold-200 text-sm whitespace-nowrap">Detail →</a></td>
            </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Mobile cards -->
  <div class="tbl-mobile-cards space-y-3">
    <% members.forEach(function(m){ %>
      <a href="/admin/members/<%= m.id %>" class="block card p-4 hover:bg-white/[0.06] transition">
        <div class="flex items-start justify-between gap-3 mb-3">
          <div class="min-w-0 flex-1">
            <div class="font-medium text-sm truncate"><%= m.name %></div>
            <div class="text-xs text-muted truncate"><%= m.email %></div>
          </div>
          <div class="flex gap-1.5 shrink-0">
            <% if (m.is_ib) { %><span class="pill pill-gold" style="font-size:9px;padding:2px 8px">IB</span><% } %>
            <span class="pill <%= m.status==='active' ? 'pill-green' : (m.status==='pending_verification' ? 'pill-gold' : 'pill-red') %>" style="font-size:9px;padding:2px 8px"><%= m.status %></span>
          </div>
        </div>
        <div class="grid grid-cols-3 gap-2 text-xs pt-2 border-t border-white/5">
          <div>
            <div class="text-muted-2" style="font-size:9px">PESANAN</div>
            <div class="mt-0.5"><%= m.total_orders %></div>
          </div>
          <div>
            <div class="text-muted-2" style="font-size:9px">APPROVED</div>
            <div class="mt-0.5 text-emerald-300"><%= m.approved_orders %></div>
          </div>
          <div>
            <div class="text-muted-2" style="font-size:9px">DAFTAR</div>
            <div class="mt-0.5"><%= new Date(m.created_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short'}) %></div>
          </div>
        </div>
      </a>
    <% }); %>
  </div>
<% } else { %>
  <div class="card empty-state">
    <div class="empty-icon">👥</div>
    <h2>Belum ada member terdaftar</h2>
    <p>Member akan muncul setelah ada yang daftar di /auth/register.</p>
  </div>
<% } %>
