@if (state === SetupExtensionState.Loading) {
  <i
    class="bwi bwi-spinner bwi-spin bwi-3x tw-text-muted"
    aria-hidden="true"
    [appA11yTitle]="'loading' | i18n"
  ></i>
}

@if (state === SetupExtensionState.NeedsExtension) {
  <section class="tw-text-center tw-mt-4">
    <h1 class="tw-text-xl tw-font-medium tw-text-main sm:tw-text-2xl">
      {{ "setupExtensionPageTitle" | i18n }}
    </h1>
    <h2 class="tw-text-sm tw-text-main tw-mb-6 tw-font-normal sm:tw-text-base">
      {{ "setupExtensionPageDescription" | i18n }}
    </h2>
    <vault-add-extension-videos></vault-add-extension-videos>
    <div class="tw-flex tw-flex-col tw-gap-4 tw-items-center">
      <a
        bitButton
        buttonType="primary"
        [href]="webStoreUrl"
        target="_blank"
        rel="noopener noreferrer"
      >
        {{ "getTheExtension" | i18n }}
      </a>
      <button type="button" bitLink (click)="addItLater()">
        {{ "addItLater" | i18n }}
      </button>
    </div>
  </section>
}

@if (showSuccessUI) {
  <section class="tw-flex tw-flex-col tw-items-center">
    <div class="tw-size-[90px]">
      <bit-svg [content]="PartyIcon"></bit-svg>
    </div>
    <h1 bitTypography="h2" class="tw-mb-6 tw-mt-4 tw-text-center">
      {{
        (state === SetupExtensionState.Success
          ? "bitwardenExtensionInstalled"
          : "bitwardenExtensionIsInstalled"
        ) | i18n
      }}
    </h1>
    <div
      class="tw-flex tw-flex-col tw-rounded-2xl tw-bg-background tw-border tw-border-solid tw-border-secondary-300 tw-p-8 tw-max-w-md md:tw-w-[28rem] tw-text-center"
    >
      <p>
        {{ "openExtensionToAutofill" | i18n }}
      </p>
      <button
        type="button"
        bitButton
        buttonType="primary"
        class="tw-mb-2"
        (click)="openExtension()"
      >
        {{ "openBitwardenExtension" | i18n }}
      </button>
      <a bitButton buttonType="secondary" routerLink="/vault">
        {{ "skipToWebApp" | i18n }}
      </a>
      @if (state === SetupExtensionState.ManualOpen) {
        <div aria-live="polite" class="tw-text-center tw-mt-4">
          <vault-manually-open-extension></vault-manually-open-extension>
        </div>
      }
    </div>

    <p class="tw-mt-4 tw-max-w-96 tw-text-center">
      {{ "gettingStartedWithBitwardenPart1" | i18n }}
      <a target="_blank" bitLink href="https://bitwarden.com/help/learning-center/">
        {{ "gettingStartedWithBitwardenPart2" | i18n }}
      </a>
      {{ "and" | i18n }}
      <a target="_blank" bitLink href="https://bitwarden.com/help">
        {{ "gettingStartedWithBitwardenPart3" | i18n }}
      </a>
    </p>
  </section>
}