<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title ? title + ' — ' : '' %>Biz2Biz Chamber Member Portal</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="/css/member.css">
  <%- style %>
</head>
<body class="member-layout">

<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
  <div class="sidebar-header">
    <a href="/" class="sidebar-logo">
      <svg width="30" height="30" viewBox="0 0 36 36" fill="none"><rect width="36" height="36" rx="8" fill="#1a56db"/><path d="M8 10h8v16H8zM20 10h8v8h-8zM20 22h8v4h-8z" fill="white" opacity="0.9"/></svg>
      <span>Biz2Biz</span>
    </a>
    <button class="sidebar-close" id="sidebarClose"><i class="bi bi-x-lg"></i></button>
  </div>

  <nav class="sidebar-nav">
    <a href="/member/dashboard" class="sidebar-link <%= currentPath === '/member/dashboard' ? 'active' : '' %>">
      <i class="bi bi-grid-1x2-fill"></i><span>Dashboard</span>
    </a>
    <a href="/member/profile" class="sidebar-link <%= currentPath.startsWith('/member/profile') ? 'active' : '' %>">
      <i class="bi bi-building"></i><span>My Profile</span>
    </a>
    <div class="sidebar-divider"></div>
    <p class="sidebar-section-label">Business Tools</p>
    <a href="/member/directory" class="sidebar-link <%= currentPath.startsWith('/member/directory') ? 'active' : '' %>">
      <i class="bi bi-search"></i><span>Directory</span>
    </a>
    <a href="/member/bulletin" class="sidebar-link <%= currentPath.startsWith('/member/bulletin') ? 'active' : '' %>">
      <i class="bi bi-pin-map-fill"></i><span>Bulletin Board</span>
    </a>
    <a href="/member/events" class="sidebar-link <%= currentPath.startsWith('/member/events') ? 'active' : '' %>">
      <i class="bi bi-calendar-event-fill"></i><span>Events</span>
    </a>
    <a href="/member/press-releases" class="sidebar-link <%= currentPath.startsWith('/member/press') ? 'active' : '' %>">
      <i class="bi bi-newspaper"></i><span>Press Releases</span>
    </a>
    <a href="/member/social" class="sidebar-link <%= currentPath.startsWith('/member/social') ? 'active' : '' %>">
      <i class="bi bi-share-fill"></i><span>Social Media</span>
    </a>
    <div class="sidebar-divider"></div>
    <p class="sidebar-section-label">Growth Tools</p>
    <a href="/member/loyalty" class="sidebar-link <%= currentPath.startsWith('/member/loyalty') ? 'active' : '' %>">
      <i class="bi bi-star-fill"></i><span>Loyalty Program</span>
    </a>
    <a href="/member/community" class="sidebar-link <%= currentPath.startsWith('/member/community') ? 'active' : '' %>">
      <i class="bi bi-people-fill"></i><span>Community</span>
    </a>
    <a href="/member/connections" class="sidebar-link <%= currentPath.startsWith('/member/connections') ? 'active' : '' %>">
      <i class="bi bi-diagram-3-fill"></i><span>Matchmaking</span>
    </a>
    <div class="sidebar-divider"></div>
    <p class="sidebar-section-label">Member Benefits</p>
    <a href="/member/wallet" class="sidebar-link <%= currentPath.startsWith('/member/wallet') ? 'active' : '' %>">
      <i class="bi bi-wallet2"></i><span>B2B Wallet</span>
    </a>
    <a href="/member/perks" class="sidebar-link <%= currentPath.startsWith('/member/perks') ? 'active' : '' %>">
      <i class="bi bi-gift-fill"></i><span>Member Perks</span>
    </a>
    <a href="/member/payments" class="sidebar-link <%= currentPath.startsWith('/member/payments') ? 'active' : '' %>">
      <i class="bi bi-arrow-left-right"></i><span>B2B Payments</span>
    </a>
    <div class="sidebar-divider"></div>
    <a href="/member/billing" class="sidebar-link <%= currentPath.startsWith('/member/billing') ? 'active' : '' %>">
      <i class="bi bi-credit-card-fill"></i><span>Billing</span>
    </a>
    <% if (currentUser && (currentUser.role === 'super_admin' || currentUser.role === 'admin')) { %>
    <a href="/admin/dashboard" class="sidebar-link sidebar-admin">
      <i class="bi bi-shield-lock-fill"></i><span>Admin Portal</span>
    </a>
    <% } %>
  </nav>

  <div class="sidebar-footer">
    <% if (currentUser) { %>
    <div class="sidebar-user">
      <div class="sidebar-avatar">
        <% if (currentUser.avatar) { %><img src="<%= currentUser.avatar %>" alt="Avatar"><% } else { %><span><%= currentUser.first_name[0] %><%= currentUser.last_name[0] %></span><% } %>
      </div>
      <div class="sidebar-user-info">
        <p class="sidebar-user-name"><%= currentUser.first_name %> <%= currentUser.last_name %></p>
        <p class="sidebar-user-org"><%= currentUser.org_name || 'No organization' %></p>
      </div>
    </div>
    <form action="/logout" method="POST" style="margin:0">
      <button type="submit" class="sidebar-logout"><i class="bi bi-box-arrow-left"></i> Sign Out</button>
    </form>
    <% } %>
  </div>
</aside>
<div class="sidebar-overlay" id="sidebarOverlay"></div>

<!-- Main Content Area -->
<div class="member-main">
  <!-- Top Bar -->
  <header class="topbar">
    <div class="topbar-left">
      <button class="topbar-toggle" id="sidebarToggle"><i class="bi bi-list"></i></button>
      <h1 class="topbar-title"><%= title %></h1>
    </div>
    <div class="topbar-right">
      <div class="topbar-search">
        <i class="bi bi-search"></i>
        <input type="text" placeholder="Search members, events..." id="globalSearch">
      </div>
      <div class="topbar-notif" id="notifDropdown">
        <button class="topbar-icon-btn" id="notifBtn">
          <i class="bi bi-bell-fill"></i>
          <span class="notif-badge" id="notifBadge" style="display:none">0</span>
        </button>
        <div class="notif-dropdown" id="notifPanel">
          <div class="notif-header"><span>Notifications</span><a href="/member/notifications">View all</a></div>
          <div id="notifList"><div class="notif-empty"><i class="bi bi-bell-slash"></i><p>No new notifications</p></div></div>
        </div>
      </div>
      <div class="topbar-user">
        <div class="topbar-avatar">
          <% if (currentUser?.avatar) { %><img src="<%= currentUser.avatar %>" alt=""><% } else { %><span><%= currentUser?.first_name?.[0] || 'U' %></span><% } %>
        </div>
      </div>
    </div>
  </header>

  <!-- Flash Messages -->
  <% if (flash.success && flash.success.length) { %>
    <div class="flash flash-success"><i class="bi bi-check-circle-fill"></i> <%= flash.success[0] %><button onclick="this.parentElement.remove()"><i class="bi bi-x"></i></button></div>
  <% } %>
  <% if (flash.error && flash.error.length) { %>
    <div class="flash flash-error"><i class="bi bi-exclamation-circle-fill"></i> <%= flash.error[0] %><button onclick="this.parentElement.remove()"><i class="bi bi-x"></i></button></div>
  <% } %>

  <!-- Page Content -->
  <div class="member-content"><%- body %></div>
</div>

<script src="/js/member.js"></script>
<%- script %>
</body>
</html>
