<nav #navbar class="navbar active">
  <div class="container-fluid">
    <div class="navbar-header">
      <a onClick="return false;" class="navbar-toggle collapsed" (click)="isNavbarCollapsed = !isNavbarCollapsed"
        aria-expanded="false"></a>
      <!-- mobile menu bars -->
      <a onClick="return false;" class="bars" (click)="mobileMenuSidebarOpen($event,'overlay-open')"></a>
      <a class="navbar-brand" routerLink="/">
        <img [src]="logoUrl" alt="Logo" class="logo-img" />
      </a>
    </div>
    <div class="collapse navbar-collapse" [ngClass]="isNavbarCollapsed ? '' : 'show'">
      <ul class="pull-left collapse-menu-icon">
        <li class="menuBtn">
          <button mat-icon-button (click)="callSidemenuCollapse()" class="sidemenu-collapse nav-notification-icons">
            <mat-icon [ngClass]="{'rotated': isOpenSidebar}" [class]="'header-icon'">menu_open</mat-icon>
          </button>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <!-- Full Screen Button -->
        <li class="fullscreen">
          <button mat-icon-button class="nav-notification-icons" (click)="callFullscreen()">
            <app-feather-icons [icon]="'maximize'" [class]="'header-icon'"></app-feather-icons>
          </button>
        </li>
        <!-- #END# Full Screen Button -->
        <li class="languageMenu">
          <button mat-icon-button [matMenuTriggerFor]="languagemenu" class="lang-dropdown nav-notification-icons">
            <img src="{{language.flag}}" height="16">
          </button>
          <mat-menu #languagemenu="matMenu" class="lang-item-menu">
            @for (item of languages; track item) {
            <div class="lang-item">
              <button mat-menu-item class="dropdown-item lang-item-list" (click)="setNewLanguageRefresh(item.lang)"
                [ngClass]="{'active': language.lang === item.lang}">
                <img src="{{item.flag}}" class="flag-img" height="12"> <span class="align-middle">{{item.name}}</span>
              </button>
            </div>
            }
          </mat-menu>
        </li>
        <!-- [dir]="direction === 'rtl' ? 'ltr' : 'auto'" -->
        <li class="nav-item btnNotification" ngbDropdown>
          <button mat-icon-button [matMenuTriggerFor]="notificationMenu" class="nav-notification-icons">
            <app-feather-icons [icon]="'bell'" [class]="'header-icon'"></app-feather-icons>
            <span class="label-count bg-orange"></span>
          </button>
          <mat-menu #notificationMenu="matMenu" class="nfc-menu">
            <div class="nfc-header">
              <h5 class="mb-0">{{'NOTIFICATIONS' | translate}}</h5>
              <a (click)="markAllAsReadNotification()" class="nfc-mark-as-read cursor-pointer">
                {{'MARK_ALL_AS_READ' | translate}}
              </a>
            </div>
            <div class="nfc-dropdown">
              <ng-scrollbar style="height: 350px" visibility="hover">
                <div class="noti-list header-menu">
                  <div class="menu">
                    <div>
                      @for (notification of notifications; track notification) {
                      <button mat-menu-item onClick="return false;" (click)="viewNotification(notification)">
                        <span class="table-img msg-user">
                          <i class="material-icons-two-tone nfc-type-icon nfc-green">event_available</i>
                        </span>
                        <span class="menu-info" [dir]="direction === 'rtl' ? 'rtl' : 'ltr'">
                          <ng-container *ngIf="notification.message">
                            <small class="menu-title">{{notification.message}} </small>
                          </ng-container>
                          <span class="menu-desc mt-1">
                            <i class="material-icons">access_time</i>
                            {{notification.createdDate | utcToLocalTime:'shortDate' }}
                          </span>
                        </span>
                      </button>
                      }
                    </div>
                  </div>
                </div>
              </ng-scrollbar>
            </div>
            <div class="nfc-footer">
              <a class="nfc-read-all" [routerLink]="['/notifications']">
                {{'VIEW_ALL' | translate}}
              </a>
            </div>
          </mat-menu>
        </li>
        <!-- #END# Notifications-->
        <li class="nav-item user_profile">
          <button mat-button [matMenuTriggerFor]="profilemenu">
            <div class="chip dropdown-toggle" ngbDropdownToggle class="">
              <img src="assets/images/user.jpg" class="rounded-circle" width="32" height="32" alt="User">
            </div>
          </button>
          <mat-menu #profilemenu="matMenu" class="profile-menu">
            <div class="noti-list">
              <div class="menu ">
                <div class="user_dw_menu">
                  <button mat-menu-item class="user-item-list" routerLink="my-profile">
                    <app-feather-icons [icon]="'user'" [class]="'user-menu-icons'"></app-feather-icons>{{'MY_PROFILE' |
                    translate}}
                  </button>
                  <button mat-menu-item (click)="onLogout()" class="user-item-list">
                    <app-feather-icons [icon]="'log-out'" [class]="'user-menu-icons'"></app-feather-icons> {{'LOGOUT' |
                    translate}}
                  </button>
                </div>
              </div>
            </div>
          </mat-menu>
        </li>
        <!-- #END# Tasks -->
      </ul>
    </div>
  </div>
</nav>