<div class="hidden-toolbar"></div>
<div class="toolbar">
  <div class="logo-wrapper">
    <div class="logo"
         (click)="navigateToInstitution()"
    >
      <dlcm-shared-icon [iconName]="iconNameEnum.unigeWhite"
                        class="xxxlg unige-logo"
      ></dlcm-shared-icon>
    </div>
  </div>
  <div class="right-part">
    <ul class="menu">
      <li *ngFor="let menu of getListMenuUserAndAdminMenu()"
          (click)="menu.click(menu)"
          [class.is-active]="currentPath === menu.path"
          [matTooltip]="menu.labelToTranslate | translate"
          [matTooltipPosition]="'right'"
          id="menu-vertical-{{menu.path}}"
      >
        <ng-template [ngIf]="!(menu.badgeCounter | isNullOrUndefined)"
                     [ngIfElse]="simpleIcon"
        >
        <span [matBadge]="menu.badgeCounter()"
              matBadgeColor="primary"
              matBadgeSize="small"
              [matBadgeHidden]="menu.badgeHidden()"
              [matBadgeDescription]="menu.badgeDescription"
        >
          <dlcm-shared-icon class="lg"
                            [iconName]="menu.icon"
          ></dlcm-shared-icon>
        </span>
        </ng-template>
        <ng-template #simpleIcon>
          <dlcm-shared-icon class="lg"
                            [iconName]="menu.icon"
          ></dlcm-shared-icon>
        </ng-template>
      </li>
    </ul>
    <dlcm-language-selector [currentLanguage]="currentLanguage"
                            (languageChange)="useLanguage($event)"
    >
    </dlcm-language-selector>


    <dlcm-theme-selector *ngIf="!isProduction || isDemoMode"
                         [(theme)]="theme"
    >
    </dlcm-theme-selector>

    <ul class="menu">
      <ng-template [ngIf]="!logged"
                   [ngIfElse]="loggedOut"
      >
        <li data-test="login-vertical-input"
            class="login"
            [matTooltip]="'app.module.login' | translate"
            [matTooltipPosition]="'right'"
            (click)="login()"
        >
          <dlcm-shared-icon [iconName]="iconNameEnum.login"
                            class="lg"
          ></dlcm-shared-icon>
        </li>
      </ng-template>

      <ng-template #loggedOut>
        <li class="logout">
          <dlcm-avatar data-test="logout-vertical-input"
                       [user]="user"
                       (logoutChange)="logout()"
          ></dlcm-avatar>
        </li>
      </ng-template>
    </ul>
  </div>
</div>