@if (loggedInUser) {
  <nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
    <div class="container-fluid">

      <!-- Brand link leading to the home page -->
      <a class="navbar-brand" routerLink="/">{{loggedInUser.allianceName}}</a>

      <!-- Displaying the application version -->
      <span ngbTooltip="Changelog" placement="auto" (click)="onVersion()" class="version">v.{{version}}</span>

      <!-- Toggle button for collapsed navigation on smaller screens -->
      <button (click)="isShown = !isShown" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"
        class="navbar-toggler" data-bs-target="#navbar" data-bs-toggle="collapse"
        type="button">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- Collapsible navigation links -->
      <div [ngClass]="{'show': isShown}" class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav me-auto">

          <!-- Home link -->
          <li class="nav-item">
            <a (click)="isShown = false" class="nav-link" routerLink="/players" routerLinkActive="active">Players
            </a>
          </li>

          <li class="nav-item">
            <a (click)="isShown = false" class="nav-link" routerLink="/dismiss-players" routerLinkActive="active">Dismissed Players
            </a>
          </li>

          <li class="nav-item">
            <a (click)="isShown = false" class="nav-link" routerLink="/mvp" routerLinkActive="active">MVP
            </a>
          </li>

          <li class="nav-item">
            <a (click)="isShown = false" class="nav-link" routerLink="/marshal-guard" routerLinkActive="active">Marshal Guard
            </a>
          </li>

          <li class="nav-item">
            <a (click)="isShown = false" class="nav-link" routerLink="/vs-duel" routerLinkActive="active">VS - Duel
            </a>
          </li>

          <li class="nav-item">
            <a (click)="isShown = false" class="nav-link" routerLink="/desert-storm" routerLinkActive="active">Dessert Storm
            </a>
          </li>

          <li class="nav-item">
            <a (click)="isShown = false" class="nav-link" routerLink="/zombie-siege" routerLinkActive="active">Zombie Siege
            </a>
          </li>

          <li class="nav-item">
            <a (click)="isShown = false" class="nav-link" routerLink="/custom-event" routerLinkActive="active">Custom Event
            </a>
          </li>

          <li class="nav-item">
            <a (click)="isShown = false" class="nav-link" routerLink="/alliance" routerLinkActive="active">Alliance
            </a>
          </li>

          <li class="nav-item">
            <a href="https://ko-fi.com/C0C11EVSE0"
              target="_blank"
              rel="noopener noreferrer"
              class="kofi-custom-button">
              <img src="https://storage.ko-fi.com/cdn/cup-border.png" alt="Ko-fi" />
              <span>Donate</span>
            </a>
          </li>

        </ul>

        <!-- User menu (visible only when user is logged in) -->
        @if (loggedInUser) {
          <div class="login">
            <ul class="navbar-nav me-auto">
              <li ngbDropdown display="dynamic" class="nav-item" role="presentation">
                <button type="button" class="nav-link" ngbDropdownToggle>
                  <i class="bi bi-person-circle"></i>
                  {{loggedInUser.userName}}
                </button>
                <div ngbDropdownMenu>
                  <button (click)="isShown = false" routerLink="/account" ngbDropdownItem>Account</button>
                  <button (click)="isShown = false" routerLink="/change-password" ngbDropdownItem>Change password</button>
                  <button (click)="isShown = false" routerLink="/feedback" ngbDropdownItem>Submit Feedback</button>
                  <div class="dropdown-divider"></div>
                  <button (click)="onLogout()" ngbDropdownItem>Logout</button>
                </div>
              </li>
            </ul>
          </div>
        }

        <!-- Login button (visible only when user is not logged in) -->
        @if (!loggedInUser) {
          <div class="d-flex login" routerLink="/login">
            <button (click)="isShown = false" class="btn btn-secondary" routerLink="/login"><i
            class="bi bi-box-arrow-right"></i> Login
          </button>
        </div>
      }
    </div>
  </div>
</nav>
}


<!-- Router outlet for displaying routed components -->
<router-outlet></router-outlet>