<!-- Please remove this disable statement when editing this file! -->
<!-- eslint-disable @angular-eslint/template/button-has-type -->
<button
  class="account-switcher"
  (click)="toggle()"
  cdkOverlayOrigin
  #trigger="cdkOverlayOrigin"
  [hidden]="!showSwitcher"
  aria-haspopup="dialog"
>
  <ng-container *ngIf="activeAccount?.email != null; else noActiveAccount">
    <app-avatar
      [text]="activeAccount.name"
      [id]="activeAccount.id"
      [color]="activeAccount.avatarColor"
      [size]="25"
      [circle]="true"
      [fontSize]="14"
      [dynamic]="true"
      *ngIf="activeAccount.email != null"
      aria-hidden="true"
    ></app-avatar>
    <div class="active-account">
      <div>{{ activeAccount.email }}</div>
      <span>{{ activeAccount.server }}</span>
      <span class="sr-only">&nbsp;({{ "switchAccount" | i18n }})</span>
    </div>
  </ng-container>
  <ng-template #noActiveAccount>
    <span>{{ "switchAccount" | i18n }}</span>
  </ng-template>
  <i
    class="bwi"
    aria-hidden="true"
    [ngClass]="{ 'bwi-angle-down': !isOpen, 'bwi-angle-up': isOpen }"
  ></i>
</button>

<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayHasBackdrop]="true"
  [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
  (backdropClick)="close()"
  (detach)="close()"
  [cdkConnectedOverlayOpen]="showSwitcher && isOpen"
  [cdkConnectedOverlayPositions]="overlayPosition"
  cdkConnectedOverlayMinWidth="250px"
>
  <div
    class="account-switcher-dropdown"
    [@transformPanel]="'open'"
    cdkTrapFocus
    cdkTrapFocusAutoCapture
    role="dialog"
    aria-modal="true"
  >
    <div class="accounts" *ngIf="numberOfAccounts > 0">
      <button
        *ngFor="let account of inactiveAccounts | keyvalue"
        class="account"
        (click)="switch(account.key)"
      >
        <app-avatar
          [text]="account.value.name ?? account.value.email"
          [id]="account.value.id"
          [size]="25"
          [circle]="true"
          [fontSize]="14"
          [dynamic]="true"
          [color]="account.value.avatarColor"
          *ngIf="account.value.email != null"
          aria-hidden="true"
        ></app-avatar>
        <div class="accountInfo">
          <span class="sr-only">{{ "switchAccount" | i18n }}:&nbsp;</span>
          <span class="email" aria-hidden="true">{{ account.value.email }}</span>
          <span class="server" aria-hidden="true">
            <span class="sr-only"> / </span>{{ account.value.server }}
          </span>
          <span class="status" aria-hidden="true"
            ><span class="sr-only">&nbsp;(</span
            >{{
              (account.value.authenticationStatus === authStatus.Unlocked ? "unlocked" : "locked")
                | i18n
            }}<span class="sr-only">)</span></span
          >
        </div>
        <i
          class="bwi bwi-2x text-muted"
          [ngClass]="
            account.value.authenticationStatus === authStatus.Unlocked ? 'bwi-unlock' : 'bwi-lock'
          "
          aria-hidden="true"
        ></i>
      </button>
    </div>
    <ng-container *ngIf="activeAccount?.email != null">
      <div class="border" *ngIf="numberOfAccounts > 0"></div>
      <ng-container *ngIf="numberOfAccounts < 4">
        <button type="button" class="add" (click)="addAccount()">
          <i class="bwi bwi-plus" aria-hidden="true"></i> {{ "addAccount" | i18n }}
        </button>
      </ng-container>
      <ng-container *ngIf="numberOfAccounts === 4">
        <span class="accountLimitReached">{{ "accountSwitcherLimitReached" | i18n }} </span>
      </ng-container>
    </ng-container>
  </div>
</ng-template>
