<%- include('../partials/head') %>
<body class="bg-blobs relative min-h-screen">
  <%- include('../partials/flash') %>

  <% const memberItems = [
    { href: '/member', label: 'Dashboard', icon: 'home' },
    { href: '/member/orders', label: 'Pesanan Saya', icon: 'file' },
    { href: '/member/downloads', label: 'Download EA', icon: 'download' },
    { href: '/member/sets', label: 'Download Set', icon: 'set' },
    { href: '/member/ib-request', label: 'Kode Aktivasi IB', icon: 'key' },
    { href: '/member/brokers', label: 'Rekomendasi Broker', icon: 'building' },
    { href: '/member/profile', label: 'Profil & Password', icon: 'user' },
    { href: '/member/announcements', label: 'Pengumuman & Promo', icon: 'megaphone' },
  ]; %>

  <% function renderIcon(icon) { %>
    <% if (icon==='home') { %><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="m3 10 9-7 9 7"/><path d="M5 10v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10"/></svg><% } %>
    <% if (icon==='file') { %><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v6h6"/></svg><% } %>
    <% if (icon==='download') { %><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/></svg><% } %>
    <% if (icon==='user') { %><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M20 21a8 8 0 0 0-16 0"/><circle cx="12" cy="7" r="4"/></svg><% } %>
  <% } %>

  <div class="flex min-h-screen relative z-10">
    <!-- Desktop Sidebar -->
    <aside class="hidden lg:flex w-64 flex-col border-r border-white/5 p-5 sticky top-0 h-screen">
      <a href="/" class="flex items-center gap-3 mb-8">
        <div class="grid h-10 w-10 place-items-center rounded-2xl border border-gold-300/25 bg-gradient-to-br from-gold-300/20 to-gold-500/5">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 text-gold-300"><path d="m22 7-8.5 8.5-5-5L2 17"/><path d="M16 7h6v6"/></svg>
        </div>
        <div>
          <div class="font-display font-semibold text-sm">TRADER REBAHAN</div>
          <div class="text-[10px] text-muted">Member Panel</div>
        </div>
      </a>

      <nav class="space-y-1 flex-1">
        <% memberItems.forEach(function(it){
             const active = (it.href === '/member' && currentPath === '/member') || (it.href !== '/member' && currentPath.startsWith(it.href));
        %>
          <a href="<%= it.href %>" class="side-item <%= active ? 'active' : '' %>">
            <%- (function(){ let h=''; if(it.icon==='home') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="m3 10 9-7 9 7"/><path d="M5 10v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10"/></svg>'; if(it.icon==='file') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v6h6"/></svg>'; if(it.icon==='download') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/></svg>'; if(it.icon==='key') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><circle cx="7" cy="15" r="4"/><path d="M21 4l-2 2m-3 3l-3.5-3.5"/><path d="m9.5 12.5 6.5-6.5"/></svg>'; if(it.icon==='set') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18"/><path d="M8 14h.01M12 14h.01M16 14h.01"/></svg>'; if(it.icon==='building') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M9 9h.01M15 9h.01M9 13h.01M15 13h.01M9 17h.01M15 17h.01"/></svg>'; if(it.icon==='megaphone') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg>'; if(it.icon==='user') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M20 21a8 8 0 0 0-16 0"/><circle cx="12" cy="7" r="4"/></svg>'; return h; })() %>
            <span><%= it.label %></span>
          </a>
        <% }); %>
      </nav>

      <div class="card-soft p-4">
        <div class="text-xs text-muted">Login sebagai</div>
        <div class="font-medium mt-1 truncate"><%= user.name %></div>
        <div class="text-[11px] text-muted-2 truncate"><%= user.email %></div>
        <form action="/auth/logout" method="post" class="mt-3">
          <button class="btn btn-outline w-full py-2 rounded-xl text-xs" data-no-loading>Keluar</button>
        </form>
      </div>
    </aside>

    <!-- Mobile Drawer -->
    <div class="drawer-backdrop"></div>
    <aside class="drawer" id="member-drawer">
      <button class="drawer-close" data-drawer-close aria-label="Tutup">×</button>
      <a href="/" class="flex items-center gap-3 mb-7 mt-2">
        <div class="grid h-10 w-10 place-items-center rounded-2xl border border-gold-300/25 bg-gradient-to-br from-gold-300/20 to-gold-500/5">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5 text-gold-300"><path d="m22 7-8.5 8.5-5-5L2 17"/><path d="M16 7h6v6"/></svg>
        </div>
        <div>
          <div class="font-display font-semibold text-sm tracking-wide">TRADER REBAHAN</div>
          <div class="text-[10px] text-muted">Member Panel</div>
        </div>
      </a>
      <nav class="space-y-1 flex-1">
        <% memberItems.forEach(function(it){
             const active = (it.href === '/member' && currentPath === '/member') || (it.href !== '/member' && currentPath.startsWith(it.href));
        %>
          <a href="<%= it.href %>" class="side-item <%= active ? 'active' : '' %>" data-drawer-close>
            <%- (function(){ let h=''; if(it.icon==='home') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="m3 10 9-7 9 7"/><path d="M5 10v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10"/></svg>'; if(it.icon==='file') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v6h6"/></svg>'; if(it.icon==='download') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/></svg>'; if(it.icon==='key') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><circle cx="7" cy="15" r="4"/><path d="M21 4l-2 2m-3 3l-3.5-3.5"/><path d="m9.5 12.5 6.5-6.5"/></svg>'; if(it.icon==='set') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18"/><path d="M8 14h.01M12 14h.01M16 14h.01"/></svg>'; if(it.icon==='building') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M9 9h.01M15 9h.01M9 13h.01M15 13h.01M9 17h.01M15 17h.01"/></svg>'; if(it.icon==='megaphone') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg>'; if(it.icon==='user') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M20 21a8 8 0 0 0-16 0"/><circle cx="12" cy="7" r="4"/></svg>'; return h; })() %>
            <span><%= it.label %></span>
          </a>
        <% }); %>
      </nav>
      <div class="card-soft p-4 mt-6">
        <div class="text-xs text-muted">Login sebagai</div>
        <div class="font-medium mt-1 truncate"><%= user.name %></div>
        <div class="text-[11px] text-muted-2 truncate"><%= user.email %></div>
        <form action="/auth/logout" method="post" class="mt-3">
          <button class="btn btn-outline w-full py-2 rounded-xl text-xs" data-no-loading>Keluar</button>
        </form>
      </div>
    </aside>

    <!-- Main -->
    <div class="flex-1 flex flex-col min-w-0">
      <header class="lg:hidden flex items-center justify-between gap-3 p-4 border-b border-white/5 sticky top-0 bg-[#080808]/90 backdrop-blur z-30">
        <button class="hamburger" data-drawer-open="#member-drawer" aria-label="Buka menu">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
        </button>
        <a href="/member" class="flex items-center gap-2">
          <div class="grid h-8 w-8 place-items-center rounded-xl border border-gold-300/25 bg-gradient-to-br from-gold-300/20 to-gold-500/5">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4 text-gold-300"><path d="m22 7-8.5 8.5-5-5L2 17"/><path d="M16 7h6v6"/></svg>
          </div>
          <span class="font-semibold font-display text-sm">Member Panel</span>
        </a>
        <div style="width:44px"></div>
      </header>

      <main class="flex-1 p-4 sm:p-6 lg:p-10 fade-in">
        <%- body %>
      </main>
    </div>
  </div>

  <script src="/js/app.js"></script>
</body>
</html>
