<div class="tw-block tw-h-full tw-relative tw-isolate tw-overflow-hidden">
  <bit-svg
    class="tw-pointer-events-none tw-absolute tw-inset-0 tw-z-0 !tw-max-h-none tw-size-full [&>svg]:tw-size-full"
    [content]="backgroundIllustration()"
  ></bit-svg>

  <popup-page class="tw-relative tw-z-10 [&_main]:!tw-bg-transparent" [disablePadding]="true">
    <popup-header
      slot="header"
      background="alt"
      pageTitle=""
      class="[&_header]:!tw-bg-transparent [&_header]:!tw-px-6 bit-compact:[&_header]:!tw-px-3"
    >
      <div class="tw-w-32">
        <bit-svg [content]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-svg>
      </div>

      <ng-container slot="end">
        <app-pop-out></app-pop-out>
      </ng-container>
    </popup-header>

    <div
      class="tw-flex tw-min-h-full tw-flex-col tw-items-center tw-gap-4 bit-compact:tw-gap-3 tw-px-6 bit-compact:tw-px-3 tw-pb-6 tw-pt-0"
    >
      <div class="tw-max-h-32 tw-max-w-full tw-content-center" aria-hidden="true">
        <bit-svg [content]="iconIllustration()"></bit-svg>
      </div>

      <h1
        bitTypography="h3"
        noMargin
        class="tw-mb-0 tw-text-center"
        id="default-password-manager-prompt-title"
      >
        {{ "defaultPasswordManagerPromptTitle" | i18n }}
      </h1>

      <bit-base-card class="tw-w-full tw-overflow-hidden">
        <ol
          class="tw-m-0 tw-flex tw-list-none tw-flex-col tw-divide-y tw-divide-border-base tw-py-3 tw-pl-6 tw-pr-4"
          role="list"
          aria-labelledby="default-password-manager-prompt-title"
        >
          <li class="tw-flex tw-items-center tw-gap-2 tw-pb-2">
            <span bitTypography="h5" noMargin class="tw-shrink-0" aria-hidden="true">1</span>
            <p bitTypography="body2" class="tw-mb-0 tw-font-normal">
              {{ "select" | i18n }}
              <span bitTypography="body2" class="tw-font-semibold tw-text-fg-heading">{{
                "continue" | i18n
              }}</span
              >.
            </p>
          </li>
          <li class="tw-flex tw-items-center tw-gap-2 tw-py-2">
            <span bitTypography="h5" noMargin class="tw-shrink-0" aria-hidden="true">2</span>
            <p bitTypography="body2" class="tw-mb-0 tw-font-normal">
              {{ "select" | i18n }}
              <span bitTypography="body2" class="tw-font-semibold tw-text-fg-heading">{{
                "allow" | i18n
              }}</span>
              {{ "defaultPasswordManagerPromptStep2AfterAllow" | i18n }}
            </p>
          </li>
          <li class="tw-flex tw-items-center tw-gap-2 tw-pt-2">
            <span bitTypography="h5" noMargin class="tw-shrink-0" aria-hidden="true">3</span>
            <p bitTypography="body2" class="tw-mb-0 tw-font-normal">
              {{ "defaultPasswordManagerPromptStep3" | i18n }}
            </p>
          </li>
        </ol>
      </bit-base-card>

      <div class="tw-flex tw-w-full tw-flex-col tw-gap-3">
        <button
          id="default-password-manager-prompt_button_continue"
          type="button"
          bitButton
          buttonType="primary"
          [block]="true"
          (click)="onContinueClick()"
        >
          {{ "continue" | i18n }}
        </button>
        <button
          id="default-password-manager-prompt_button_skip-for-now"
          type="button"
          bitButton
          buttonType="secondary"
          [block]="true"
          (click)="onSkip()"
        >
          {{ "skip" | i18n }}
        </button>
      </div>
    </div>
  </popup-page>
</div>
