<nav class="main-header navbar navbar-expand navbar-white navbar-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
    </li>
    <li class="nav-item d-none d-sm-inline-block">
      <a href="/dashboard" class="nav-link">Home</a>
    </li>
  </ul>

  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="#" role="button" id="darkModeToggle" title="Toggle dark mode">
        <i class="fas fa-moon"></i>
      </a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link" data-toggle="dropdown" href="#">
        <% if (currentUser.avatar) { %>
          <img src="<%= currentUser.avatar %>" class="img-circle elevation-1 mr-1" style="width:1.6rem;height:1.6rem;object-fit:cover" alt="Avatar">
        <% } else { %>
          <i class="fas fa-user-circle mr-1"></i>
        <% } %>
        <%= currentUser.name %>
      </a>
      <div class="dropdown-menu dropdown-menu-right">
        <span class="dropdown-item-text text-muted small">
          <%= currentUser.email %> &middot; <%= currentUser.role.replace('_', ' ') %>
        </span>
        <div class="dropdown-divider"></div>
        <a href="/profile" class="dropdown-item">
          <i class="fas fa-user-cog mr-2"></i> Profil Saya
        </a>
        <div class="dropdown-divider"></div>
        <form action="/logout" method="POST" class="m-0">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>">
          <button type="submit" class="dropdown-item">
            <i class="fas fa-sign-out-alt mr-2"></i> Logout
          </button>
        </form>
      </div>
    </li>
  </ul>
</nav>
