<app-header>
  <div class="left">
    <button type="button" (click)="back()">{{ "close" | i18n }}</button>
  </div>
  <div class="center tw-font-bold">{{ "switchAccounts" | i18n }}</div>
</app-header>

<main
  *ngIf="loading"
  class="tw-absolute tw-z-50 tw-box-border tw-flex tw-cursor-not-allowed tw-items-center tw-justify-center tw-bg-background tw-opacity-60"
>
  <i class="bwi bwi-spinner bwi-2x bwi-spin" aria-hidden="true"></i>
</main>
<main>
  <div class="tw-p-2">
    <div *ngIf="availableAccounts$ | async as availableAccounts">
      <ul class="tw-grid tw-list-none tw-gap-2" role="listbox">
        <ng-container *ngFor="let availableAccount of availableAccounts; first as isFirst">
          <li *ngIf="availableAccount.isActive" class="tw-mb-4" role="option">
            <auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
          </li>
          <div *ngIf="isFirst" class="tw-uppercase tw-text-muted">
            {{ "availableAccounts" | i18n }}
          </div>
          <li *ngIf="!availableAccount.isActive" role="option">
            <auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
          </li>
        </ng-container>
      </ul>
      <!--
        If the user has not reached the account limit, the last 'availableAccount' will have an 'id' of
        'SPECIAL_ADD_ACCOUNT_ID'. Since we don't want to count this as one of the actual accounts,
        we check to make sure the 'id' of the last 'availableAccount' is not equal to 'SPECIAL_ADD_ACCOUNT_ID'
    -->
      <p
        class="tw-text-sm tw-text-muted"
        *ngIf="
          availableAccounts.length >= accountLimit &&
          availableAccounts[availableAccounts.length - 1].id !== specialAddAccountId
        "
      >
        {{ "accountLimitReached" | i18n }}
      </p>
    </div>

    <div class="tw-mt-8" *ngIf="currentAccount$ | async as currentAccount">
      <div class="tw-mb-2 tw-uppercase tw-text-muted">{{ "options" | i18n }}</div>
      <div class="tw-grid tw-gap-2">
        <button
          type="button"
          class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3 disabled:tw-cursor-not-allowed disabled:tw-border-text-muted/60 disabled:!tw-text-muted/60"
          (click)="lock()"
          [disabled]="currentAccount.status === lockedStatus || !activeUserCanLock"
          [title]="!activeUserCanLock ? ('unlockMethodNeeded' | i18n) : ''"
        >
          <i class="bwi bwi-lock tw-text-2xl" aria-hidden="true"></i>
          {{ "lockNow" | i18n }}
        </button>
        <button
          type="button"
          class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3"
          (click)="logOut()"
        >
          <i class="bwi bwi-sign-out tw-text-2xl" aria-hidden="true"></i>
          {{ "logOut" | i18n }}
        </button>
        <button
          type="button"
          class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3"
          (click)="lockAll()"
        >
          <i class="bwi bwi-lock tw-text-2xl" aria-hidden="true"></i>
          {{ "lockAll" | i18n }}
        </button>
      </div>
    </div>
  </div>
</main>
