<header>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
  <nav class="navbar navbar-expand-lg custom-navbar fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand d-flex align-items-center" href="{{baseUrl}}">
        <img src="/images/devportalLogo.svg" alt="Logo" class="navbar-logo me-2" />
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="{{baseUrl}}/apis">APIs</a>
          </li>
          {{#if hasWSO2APIs}}
          <li class="nav-item">
            <a class="nav-link" href="{{baseUrl}}/myapis">MyAPIs</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{baseUrl}}/applications">Applications</a>
          </li>
          {{/if}}
          {{!-- {{#if isAdmin}}
          <li class="nav-item">
            <a class="nav-link" href="{{baseUrl}}/configure">Add Content</a>
          </li>
          {{/if}}
           {{#if isSuperAdmin}}
          <li class="nav-item">
            <a class="nav-link" href="/portal">Create organizations</a>
          </li>
          {{/if}} --}}
        </ul>
      </div>
      <div class="d-flex align-items-center">
        {{#if profile}}
        <div class="dropdown ms-3">
          <a class="nav-link dropdown-toggle profile-link d-flex align-items-center" href="#" id="navbarDropdown"
            role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <img src="/images/profile.svg" alt="Profile" class="profile-icon me-2" />
            <span>Hi</span>
          </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
            <li class="dropdown-item">
              <div class="userprofile-info d-flex align-items-center">
                <img src="/images/profile.svg" class="avatar me-2" />
                <div>
                  <span class="user-name d-block">{{profile.name}}</span>
                  <span class="user-email text-muted">{{profile.email}}</span>
                </div>
              </div>
            </li>
            <li>
              <hr class="dropdown-divider" />
            </li>
            <li class="dropdown-item"><i class="fas fa-cog me-2"></i><a href="#">Profile Settings</a></li>
            <li class="dropdown-item"><i class="fas fa-question-circle me-2"></i><a href="#">Help Center</a></li>
            <li class="dropdown-item"><i class="fas fa-arrow-up me-2"></i><a href="#">Upgrade Plan</a></li>
            <li>
              <hr class="dropdown-divider" />
            </li>
            <li class="dropdown-item"><i class="fas fa-sign-out-alt me-2"></i><a href="{{baseUrl}}/logout">Sign Out</a>
            </li>
          </ul>
        </div>
        {{else}}
        <div id="auth-section">
          <a class="btn common-btn-primary me-2" href="{{baseUrl}}/signup">Sign Up</a>
          <a class="btn common-btn-link" href="{{baseUrl}}/login">Log In</a>
        </div>
        {{/if}}
      </div>
    </div>
  </nav>
</header>