@if (pageState$ | async; as pageState) {
  <div class="tw-text-center">
    @if (pageState === BrowserPromptState.Loading) {
      <ng-container>
        <i class="bwi bwi-spinner bwi-spin bwi-3x tw-text-primary-600" aria-hidden="true"></i>
        <p bitTypography="body1" class="tw-mb-0 tw-mt-2">{{ "openingExtension" | i18n }}</p>
      </ng-container>
    }

    @let page = extensionPage$ | async;
    @if (pageState === BrowserPromptState.Error) {
      <ng-container>
        <p bitTypography="body1" class="tw-mb-4 tw-text-xl">{{ "openingExtensionError" | i18n }}</p>
        <button
          bitButton
          buttonType="primary"
          type="button"
          (click)="openExtension(page)"
          id="bw-extension-prompt-button"
          endIcon="bwi-external-link"
        >
          {{ "openExtension" | i18n }}
        </button>
      </ng-container>
    }

    @if (pageState === BrowserPromptState.Success) {
      <ng-container>
        <i class="bwi tw-text-2xl bwi-check-circle tw-text-success-700" aria-hidden="true"></i>
        <p bitTypography="body1" class="tw-mb-4 tw-text-xl">
          {{ pageToI18nKeyMap[page] | i18n }}
        </p>
      </ng-container>
    }

    @if (pageState === BrowserPromptState.ManualOpen) {
      <ng-container>
        <vault-manually-open-extension></vault-manually-open-extension>
      </ng-container>
    }

    @if (pageState === BrowserPromptState.MobileBrowser) {
      <ng-container>
        <p bitTypography="body1" class="tw-mb-0 tw-text-xl">
          {{ "reopenLinkOnDesktop" | i18n }}
        </p>
      </ng-container>
    }
  </div>
}