<div
  dropdown
  class="dropdown"
>
  <button
    class="main-header-button c8y-dropdown dropdown-toggle text-nowrap"
    dropdownToggle
  >
    <span
      class="d-inline-block hidden-xs text-truncate m-r-8"
      style="vertical-align: text-bottom; max-width: 104px;"
      title="{{ui.currentUser | async | shortenUserName}}"
    >
      {{ui.currentUser | async | shortenUserName}}
    </span>
    <i
      [c8yIcon]="'c8y-user'"
      class="icon-2x"
    ></i>
  </button>
  <ul
    *dropdownMenu
    class="dropdown-menu dropdown-menu-right"
    style="max-width: 240px;"
  >
    <ng-container *ngFor="let item of getSortedItems()">
      <ng-container *ngIf="item.template">
        <ng-container *c8yOutlet="item.template"></ng-container>
      </ng-container>
      <ng-container *ngIf="!item.template">
        <li (click)="item.click()">
          <a class="interact" [attr.href]="item.link" [attr.target]="item.target">
            <i [c8yIcon]="item.icon"></i>
            {{item.label | translate}}
          </a>
        </li>
      </ng-container>
    </ng-container>
    <li
      *ngIf="!(ui.state$ | async).hidePowered"
      role="separator"
      class="divider"
    ></li>
    <li
      class="dropdown-header bg-gray-white text-pre-normal"
      style="margin-top: -1px;"
      *ngIf="!(ui.state$ | async).hidePowered"
    >
      <div class="flex-row">
        <i
          [c8yIcon]="'info-circle'"
          class="text-info flex-item-v-start text-14"
          style="margin: 1px 6px 0 -3px;"
        ></i>
        <span class="text-muted text-truncate">
          {{'Tenant ID' | translate}}: <strong>
            <span class="text-primary interact" (click)="$event.stopPropagation(); copyIt(ui.currentTenant.value.name)">
              {{ui.currentTenant.value.name}}&nbsp;
              <i [c8yIcon]="'clipboard'"></i>
            </span>
            </strong><br>
          {{'Backend' | translate}}: <strong>{{(ui.state$ | async).versions.backend}}</strong><br>
          {{'UI' | translate }}: <strong>{{ui.uiVersion}}</strong>
        </span>
      </div>
    </li>
  </ul>
</div>

<!-- the default items -->
<c8y-user-menu-item
  [icon]="'user-menu-male'"
  [label]="'User settings' | translate"
  [priority]="20"
  (click)="editUser()"
></c8y-user-menu-item>
<c8y-user-menu-item
  [icon]="'sign-out'"
  [label]="'Logout' | translate"
  (click)="logout()"
></c8y-user-menu-item>
<c8y-user-menu-item
  *ngIf="!(ui.currentUser | async).supportUserEnabled && ((ui.state$ | async).activateSupportUserAvailable)"
  [icon]="'c8y-c8y-support'"
  [label]="'Activate support' | translate"
  (click)="activateSupportAccess()"
></c8y-user-menu-item>
<c8y-user-menu-item
  *ngIf="(ui.currentUser | async).supportUserEnabled && ((ui.state$ | async).activateSupportUserAvailable)"
  [icon]="'c8y-c8y-support'"
  [label]="'Deactivate support' | translate"
  (click)="deactivateSupportAccess()"
></c8y-user-menu-item>
<c8y-user-menu-item
  *ngIf="(ui.state$ | async).supportUrl"
  [icon]="'question-circle'"
  [link]="(ui.state$ | async).supportUrl"
  [target]="'_blank'"
  [label]="'Request support' | translate"
></c8y-user-menu-item>