<aside class="main-sidebar sidebar-dark-primary elevation-4">
  <a href="/dashboard" class="brand-link">
    <i class="fas fa-envelope-open-text brand-image ml-2" style="opacity:.9;font-size:1.4rem;line-height:2.2rem"></i>
    <span class="brand-text font-weight-light">Email Manager</span>
  </a>

  <div class="sidebar">
    <div class="user-panel mt-3 pb-3 mb-3 d-flex">
      <div class="image d-flex align-items-center justify-content-center">
        <% if (currentUser.avatar) { %>
          <img src="<%= currentUser.avatar %>" class="img-circle elevation-2" style="width:2.1rem;height:2.1rem;object-fit:cover" alt="Avatar">
        <% } else { %>
          <i class="fas fa-user-circle fa-2x text-white-50"></i>
        <% } %>
      </div>
      <div class="info">
        <a href="/profile" class="d-block"><%= currentUser.name %></a>
        <span class="badge badge-secondary text-capitalize"><%= currentUser.role.replace('_', ' ') %></span>
      </div>
    </div>

    <nav class="mt-2">
      <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
        <li class="nav-item">
          <a href="/dashboard" class="nav-link <%= activeMenu === 'dashboard' ? 'active' : '' %>">
            <i class="nav-icon fas fa-tachometer-alt"></i>
            <p>Dashboard</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="/email" class="nav-link <%= activeMenu === 'email' ? 'active' : '' %>">
            <i class="nav-icon fas fa-envelope"></i>
            <p>Email Management</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="/otp" class="nav-link <%= activeMenu === 'otp' ? 'active' : '' %>">
            <i class="nav-icon fas fa-key"></i>
            <p>OTP Terbaru</p>
          </a>
        </li>
        <% if (menuAccess.import) { %>
        <li class="nav-item">
          <a href="/email/import" class="nav-link <%= activeMenu === 'import' ? 'active' : '' %>">
            <i class="nav-icon fas fa-file-excel"></i>
            <p>Bulk Import</p>
          </a>
        </li>
        <% } %>
        <% if (menuAccess.logs) { %>
        <li class="nav-item">
          <a href="/logs" class="nav-link <%= activeMenu === 'logs' ? 'active' : '' %>">
            <i class="nav-icon fas fa-clipboard-list"></i>
            <p>Activity Log</p>
          </a>
        </li>
        <% } %>
        <% if (menuAccess.users) { %>
        <li class="nav-item">
          <a href="/users" class="nav-link <%= activeMenu === 'users' ? 'active' : '' %>">
            <i class="nav-icon fas fa-users-cog"></i>
            <p>Manajemen User</p>
          </a>
        </li>
        <% } %>
        <% if (menuAccess.settingsEmail) { %>
        <li class="nav-item">
          <a href="/email-settings" class="nav-link <%= activeMenu === 'settingsEmail' ? 'active' : '' %>">
            <i class="nav-icon fas fa-sliders-h"></i>
            <p>Settings Email</p>
          </a>
        </li>
        <% } %>
        <% if (currentUser.role === 'super_admin') { %>
        <li class="nav-item">
          <a href="/settings" class="nav-link <%= activeMenu === 'settings' ? 'active' : '' %>">
            <i class="nav-icon fas fa-cogs"></i>
            <p>Settings</p>
          </a>
        </li>
        <% } %>
      </ul>
    </nav>
  </div>
</aside>
