Untitled

<div class="layout-topbar">
  <div class="topbar-start">
    <button
      #menubutton
      type="button"
      class="topbar-menubutton p-link p-trigger"
      (click)="onMenuButtonClick()"
    >
      <i class="pi pi-bars"></i>
    </button>
    <nav class="layout-breadcrumb" *ngIf="organizationSelectorVisible">
      <ol>
        <li *ngIf="organizations?.length">
          <span class="p-input-icon-left">
            <i class="pi pi-search"></i>
            <p-dropdown
              [options]="organizations"
              [(ngModel)]="selectedOrganization"
              (onChange)="onSelectOrganization($event.value)"
              optionLabel="name"
              placeholder="Select a Organization"
            >
            </p-dropdown>
          </span>
        </li>
      </ol>
    </nav>
  </div>
  <!-- <div *ngIf="searchHidden class="topbar-center w-24rem sm:16rem">
    <p-autoComplete
      name="search"
      type="text"
      [disabled]="searchDisabled"
      [(ngModel)]="searchText"
      (onSelect)="onSearchDropdownSelect($event.value)"
      (onDropdownClick)="onSearchDropdownClick()"
      (onKeyUp)="onSearch($event.key)"
      placeholder="Search"
      styleClass="w-24rem sm:16rem"
      dropdownIcon="pi pi-sort-down"
      field="value"
      [suggestions]="searchDropdownOptions"
      [group]="searchDropdownOptionsGrouped"
      [showClear]="true"
      [dropdown]="true"
      dropdownMode="blank"
    ></p-autoComplete>
  </div> -->

  <div class="topbar-end">
    <ul class="topbar-menu">
      <li class="topbar-lang">
        <span class="p-input-icon-left">
          <i class="pi pi-search"></i>
          <p-dropdown
            [options]="langs"
            [(ngModel)]="selectedLang"
            (onChange)="onSelectLang($event.value)"
            placeholder="Select a Language"
          >
            <ng-template pTemplate="selectedItem">
              <div class="lang-item lang-item-value flex" *ngIf="selectedLang">
                <img
                  src="assets/images/flag_placeholder.png"
                  [class]="'flag ' + selectedLang.icon"
                />
                <div class="ml-3">{{ selectedLang.label }}</div>
              </div>
            </ng-template>
            <ng-template let-lang pTemplate="item">
              <div class="lang-item flex">
                <img
                  src="assets/images/flag_placeholder.png"
                  [class]="'flag ' + lang.icon"
                />
                <div class="ml-3">{{ lang.label }}</div>
              </div>
            </ng-template>
          </p-dropdown>
        </span>
      </li>
      <button
        class="p-button-text p-button text-500 px-3"
        (click)="minkiosque.toggle($event)"
      >
        <i class="pi pi-th-large text-2xl"></i>
      </button>
      <p-overlayPanel class="p-0" #minkiosque>
        <ng-template class="p-0" pTemplate="content">
          <div class="flex flex-wrap" style="max-width: 40rem">
            <div
              [ngClass]="{
                'col-12': true,
                'md:col-12 lg:col-6': applications.length == 2,
                'md:col-6 lg:col-4': applications.length > 2,
              }"
              *ngFor="let app of applications"
              (click)="app.onClick()"
            >
              <div
                class="bg-white relative text-blue-800 shadow-1 transition-delay-150 hover:transition-delay-150 hover:text-blue-800 hover:shadow-2 cursor-pointer border-round-xl overflow-hidden flex align-items-center justify-content-center p-3 h-full"
              >
                <div class="absolute right-0 top-0 p-2">
                  <i
                    class="pi pi-info-circle text-sm text-primary cursour-pointer"
                  ></i>
                </div>
                <div class="text-center mb-3">
                  <div class="mb-2">
                    <span
                      class="iconify text-5xl"
                      [attr.data-icon]="app.imageKey"
                    ></span>
                  </div>
                  <p class="mb-0 text-xl font-medium">{{ app.name }}</p>
                </div>
                <div class="absolute right-0 bottom-0 p-2 text-green-500">
                  <span
                    *ngIf="app.isAppConnected"
                    [ngClass]="{
                      'text-green-500': !app.isAppLocked,
                      'text-red-500': app.isAppLocked
                    }"
                    class="iconify text-md"
                    data-icon="fa6-solid:lock"
                  ></span>
                  <span
                    *ngIf="app.isAppConnected"
                    [ngClass]="{
                      'text-green-500': app.isAppVerified,
                      'text-red-500': !app.isAppVerified
                    }"
                    class="iconify text-md"
                    data-icon="ion:shield"
                  ></span>
                </div>
              </div>
            </div>

            <!-- <div class="col-12 text-center">
              <button
                type="button"
                icon="pi pi-angle-right"
                class="p-element pbutton p-button p-component text-sm"
                (click)="navigateToKiosk()"
              >
                <span class="p-button-label"
                  >Voir d'autres applications de kiosque</span
                >
              </button>
            </div> -->
          </div>
        </ng-template>
      </p-overlayPanel>

      <!-- <li class="ml-3">
        <button
          pButton
          type="button"
          icon="pi pi-palette"
          class="p-button-text p-button-secondary p-button-rounded flex-shrink-0"
          (click)="onConfigButtonClick()"
        ></button>
      </li>

      <li class="ml-3 relative">
        <button
          pButton
          type="button"
          icon="pi pi-bell"
          class="p-button-text p-button-secondary p-button-rounded flex-shrink-0"
          (click)="onNotificationsButtonClick()"
        ></button>

        <p-badge
          severity="danger"
          [ngClass]="{ 'badge-empty': !profileBadgeValue }"
          value="{{ profileBadgeValue }}"
          class="zw-count-badge"
        ></p-badge>
      </li> -->

      <!-- <div
        accessControl
        id="hide_admin_layout"
        resource="admin"
        action="admin"
        applicationId="iam"
        group="admin"
      >
        <li class="ml-3">
          <button
            pButton
            type="button"
            icon="pi pi-users"
            class="p-button-text p-button-secondary p-button-rounded flex-shrink-0"
            (click)="onClick()"
          ></button>
        </li>
      </div> -->
      <li class="topbar-profile">
        <button
          type="button"
          class="p-link relative"
          (click)="onProfileButtonClick()"
        >
          <img [src]="avatar" alt="Profile image" />
        </button>
      </li>
    </ul>
  </div>
</div>