<div class="tw-flex tw-flex-col tw-items-center">
  <ng-container *ngIf="currentState === 'assert'">
    <p
      bitTypography="body1"
      [class.tw-self-start]="leftAlignDescription"
      [class.tw-text-center]="!leftAlignDescription"
    >
      {{ "readingPasskeyLoading" | i18n }}
    </p>
    <button type="button" bitButton block [loading]="true" buttonType="primary" class="tw-mb-4">
      {{ "loading" | i18n }}
    </button>
  </ng-container>

  <ng-container *ngIf="currentState === 'assertFailed'">
    <p
      bitTypography="body1"
      [class.tw-self-start]="leftAlignDescription"
      [class.tw-text-center]="!leftAlignDescription"
    >
      {{ "passkeyAuthenticationFailed" | i18n }}
    </p>
    <button type="button" bitButton block buttonType="primary" class="tw-mb-4" (click)="retry()">
      {{ "tryAgain" | i18n }}
    </button>
  </ng-container>

  <p bitTypography="body1" class="tw-mb-0 tw-text-center">
    @if (showTroubleLoggingInText) {
      {{ "troubleLoggingIn" | i18n }}<br />
    }
    <a bitLink routerLink="/login">{{ "useDifferentLoginMethod" | i18n }}</a>
  </p>
</div>
