<ng-container *ngIf="view$ | async as view">
  <div cdkOverlayOrigin #trigger="cdkOverlayOrigin" [hidden]="!view.showSwitcher">
    @if (view.activeAccount?.email != null) {
      <button
        class="account-switcher-v2"
        type="button"
        (click)="toggle()"
        [disabled]="disabled"
        aria-haspopup="dialog"
      >
        <bit-avatar
          [text]="view.activeAccount.name ?? view.activeAccount.email"
          [id]="view.activeAccount.id"
          [color]="view.activeAccount.avatarColor"
          [attr.aria-label]="view.activeAccount.name ?? view.activeAccount.email"
        ></bit-avatar>
      </button>
    } @else {
      <div class="tw-rounded-full tw-bg-bg-brand">
        <button
          class="account-switcher-v2 !tw-rounded-full"
          type="button"
          buttonType="contrast"
          bitIconButton="bwi-ellipsis-h"
          [label]="'switchAccount' | i18n"
          (click)="toggle()"
          [disabled]="disabled"
          aria-haspopup="dialog"
        ></button>
      </div>
    }
  </div>

  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayHasBackdrop]="true"
    [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
    (backdropClick)="close()"
    (detach)="close()"
    [cdkConnectedOverlayOpen]="view.showSwitcher && isOpen"
    [cdkConnectedOverlayPositions]="overlayPosition"
    cdkConnectedOverlayMinWidth="250px"
  >
    <div
      class="account-switcher-dropdown"
      [@transformPanel]="'open'"
      cdkTrapFocus
      cdkTrapFocusAutoCapture
      role="dialog"
      aria-modal="true"
    >
      <div class="accounts" *ngIf="view.numberOfAccounts > 0">
        <button
          type="button"
          *ngFor="let account of view.inactiveAccounts | keyvalue"
          class="account account-v3"
          (click)="switch(account.key)"
        >
          <div class="tw-flex tw-gap-4 tw-items-center">
            @if (account.value.email != null) {
              <bit-avatar
                [text]="account.value.name ?? account.value.email"
                [id]="account.value.id"
                [color]="account.value.avatarColor"
                aria-hidden="true"
              ></bit-avatar>
            }
            <div class="accountInfo">
              <span class="sr-only">{{ "switchAccount" | i18n }}:&nbsp;</span>
              <span class="email">{{ account.value.email }}</span>
              <span class="server">
                <span class="sr-only"> / </span>{{ account.value.server }}
              </span>
              <span class="status">
                <span class="sr-only">&nbsp;(</span
                >{{
                  (account.value.authenticationStatus === authStatus.Unlocked
                    ? "unlocked"
                    : "locked"
                  ) | i18n
                }}<span class="sr-only">)</span></span
              >
            </div>
          </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="view.activeAccount">
        <div class="border" *ngIf="view.numberOfAccounts > 0"></div>
        <ng-container *ngIf="view.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="view.numberOfAccounts === 4">
          <span class="accountLimitReached">{{ "accountSwitcherLimitReached" | i18n }} </span>
        </ng-container>
      </ng-container>
    </div>
  </ng-template>
</ng-container>
