<ng-container *ngIf="extensionRefreshFlag">
  <bit-item *ngIf="account.id !== specialAccountAddId">
    <button bit-item-content type="button" (click)="selectAccount(account.id)">
      <bit-avatar
        slot="start"
        [id]="account.id"
        [text]="account.name"
        [color]="account.avatarColor"
        size="small"
        aria-hidden="true"
      ></bit-avatar>

      <span class="tw-sr-only" *ngIf="status.text === 'active'">
        {{ "activeAccount" | i18n }}:
      </span>
      <span class="tw-sr-only" *ngIf="status.text !== 'active'">
        {{ "switchToAccount" | i18n }}
      </span>
      <div class="tw-max-w-64 tw-truncate">
        {{ account.email }}
      </div>

      <ng-container slot="secondary">
        <div class="tw-max-w-64 tw-truncate tw-text-sm">
          <span class="tw-sr-only">{{ "hostedAt" | i18n }}</span>
          {{ account.server }}
        </div>

        <div class="tw-text-sm tw-italic" [attr.aria-hidden]="status.text === 'active'">
          <span class="tw-sr-only">(</span>
          <span [ngClass]="status.text === 'active' ? 'tw-font-bold tw-text-success' : ''">{{
            status.text
          }}</span>
          <span class="tw-sr-only">)</span>
        </div>
      </ng-container>

      <i slot="end" class="bwi tw-text-2xl" [ngClass]="status.icon" aria-hidden="true"></i>
    </button>
  </bit-item>

  <bit-item *ngIf="account.id === specialAccountAddId">
    <button type="button" bit-item-content (click)="selectAccount(account.id)">
      <i slot="start" class="bwi bwi-plus tw-text-2xl tw-text-main" aria-hidden="true"></i>
      {{ account.name | i18n }}
    </button>
  </bit-item>
</ng-container>

<ng-container *ngIf="!extensionRefreshFlag">
  <button
    *ngIf="account.id !== specialAccountAddId"
    type="button"
    class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-border-none tw-p-3"
    (click)="selectAccount(account.id)"
  >
    <div class="tw-flex-shrink-0">
      <bit-avatar
        [id]="account.id"
        [text]="account.name"
        [color]="account.avatarColor"
        size="small"
        aria-hidden="true"
      ></bit-avatar>
    </div>
    <div class="tw-text-left">
      <span class="tw-sr-only" *ngIf="status.text === 'active'">
        {{ "activeAccount" | i18n }}:
      </span>
      <span class="tw-sr-only" *ngIf="status.text !== 'active'">
        {{ "switchToAccount" | i18n }}
      </span>
      <div class="tw-max-w-64 tw-truncate">
        {{ account.email }}
      </div>

      <div class="account-switcher-row-details tw-max-w-64 tw-truncate tw-text-sm">
        <span class="tw-sr-only">{{ "hostedAt" | i18n }}</span>
        {{ account.server }}
      </div>

      <div
        class="account-switcher-row-details tw-text-sm tw-italic"
        [attr.aria-hidden]="status.text === 'active'"
      >
        <span class="tw-sr-only">(</span>
        <span [ngClass]="status.text === 'active' ? 'tw-font-bold tw-text-success' : ''">{{
          status.text
        }}</span>
        <span class="tw-sr-only">)</span>
      </div>
    </div>
    <div class="tw-ml-auto tw-flex-shrink-0">
      <i class="bwi tw-text-2xl" [ngClass]="status.icon" aria-hidden="true"></i>
    </div>
  </button>

  <button
    *ngIf="account.id === specialAccountAddId"
    type="button"
    class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-border-none tw-p-3"
    (click)="selectAccount(account.id)"
  >
    <i class="bwi bwi-plus tw-text-2xl" aria-hidden="true"></i>
    <div>
      {{ account.name | i18n }}
    </div>
  </button>
</ng-container>
