<div class="tw-mt-5 tw-flex tw-justify-center" *ngIf="loading">
  <div>
    <bit-svg
      class="tw-w-72 tw-block tw-mb-4"
      [content]="logo"
      [ariaLabel]="'appLogoLabel' | i18n"
    ></bit-svg>
    <p class="tw-text-center">
      <i
        class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
        title="{{ 'loading' | i18n }}"
        aria-hidden="true"
      ></i>
      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
    </p>
  </div>
</div>
<div *ngIf="!loading && !authed">
  <p bitTypography="body1" class="tw-text-center">
    {{ providerName }}
    <span bitTypography="body1" class="tw-font-medium">{{ email }}</span>
  </p>
  <p bitTypography="body1">{{ "joinProviderDesc" | i18n }}</p>
  <hr />
  <div class="tw-flex tw-gap-2">
    <a
      bitButton
      buttonType="primary"
      routerLink="/login"
      [queryParams]="{ email: email }"
      [block]="true"
    >
      {{ "logIn" | i18n }}
    </a>
    <button type="button" bitButton buttonType="primary" (click)="register()" [block]="true">
      {{ "createAccount" | i18n }}
    </button>
  </div>
</div>
