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

  <% const adminItems = [
    { href: '/admin', label: 'Dashboard', icon: 'home' },
    { href: '/admin/orders', label: 'Pesanan', icon: 'cart' },
    { href: '/admin/ib-requests', label: 'Request IB', icon: 'key' },
    { href: '/admin/eas', label: 'Kelola EA', icon: 'box' },
    { href: '/admin/sets', label: 'File Set EA', icon: 'set' },
    { href: '/admin/brokers', label: 'Broker Rekomendasi', icon: 'building' },
    { href: '/admin/announcements', label: 'Pengumuman & Promo', icon: 'megaphone' },
    { href: '/admin/members', label: 'Member', icon: 'users' },
    { href: '/admin/payments', label: 'Pembayaran', icon: 'card' },
    { href: '/admin/monitors', label: 'Akun Pantau', icon: 'chart' },
    { href: '/admin/settings', label: 'Pengaturan', icon: 'cog' },
  ]; %>

  <%
  function adminIcon(icon) {
    let h='';
    if(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(icon==='cart') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2 2h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57L22 7H5.12"/></svg>';
    if(icon==='box') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="m7.5 4.27 9 5.15"/><path d="M21 8 12 13 3 8"/><path d="M3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8"/></svg>';
    if(icon==='users') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>';
    if(icon==='card') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>';
    if(icon==='chart') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg>';
    if(icon==='cog') h='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>';
    if(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(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(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(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>';
    return h;
  }
  %>

  <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="/admin" 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="M20 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3v8Z"/><path d="m9 12 2 2 4-4"/></svg>
        </div>
        <div>
          <div class="font-display font-semibold text-sm">ADMIN PANEL</div>
          <div class="text-[10px] text-muted">Trader Rebahan</div>
        </div>
      </a>
      <nav class="space-y-1 flex-1">
        <% adminItems.forEach(function(it){
             const active = (it.href === '/admin' && currentPath === '/admin') || (it.href !== '/admin' && currentPath.startsWith(it.href));
        %>
          <a href="<%= it.href %>" class="side-item <%= active ? 'active' : '' %>">
            <%- adminIcon(it.icon) %>
            <span><%= it.label %></span>
          </a>
        <% }); %>
      </nav>
      <div class="card-soft p-4">
        <div class="text-xs text-muted">Admin</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="admin-drawer">
      <button class="drawer-close" data-drawer-close aria-label="Tutup">×</button>
      <a href="/admin" 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="M20 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3v8Z"/><path d="m9 12 2 2 4-4"/></svg>
        </div>
        <div>
          <div class="font-display font-semibold text-sm tracking-wide">ADMIN PANEL</div>
          <div class="text-[10px] text-muted">Trader Rebahan</div>
        </div>
      </a>
      <nav class="space-y-1 flex-1">
        <% adminItems.forEach(function(it){
             const active = (it.href === '/admin' && currentPath === '/admin') || (it.href !== '/admin' && currentPath.startsWith(it.href));
        %>
          <a href="<%= it.href %>" class="side-item <%= active ? 'active' : '' %>" data-drawer-close>
            <%- adminIcon(it.icon) %>
            <span><%= it.label %></span>
          </a>
        <% }); %>
      </nav>
      <div class="card-soft p-4 mt-6">
        <div class="text-xs text-muted">Admin</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="#admin-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="/admin" 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="M20 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3v8Z"/></svg>
          </div>
          <span class="font-semibold font-display text-sm">Admin</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>
