<popup-page [loading]="formLoading()">
  <popup-header slot="header" [pageTitle]="'admin' | i18n" showBackButton>
    <ng-container slot="end">
      <app-pop-out></app-pop-out>
    </ng-container>
  </popup-header>

  <div class="tw-px-1 tw-pt-1">
    @if (showAutoConfirmSpotlight$ | async) {
      <bit-callout [icon]="null" (dismiss)="dismissSpotlight()">
        {{ "autoConfirmOnboardingCallout" | i18n }}
      </bit-callout>
    }

    <form [formGroup]="adminForm">
      <bit-card>
        <bit-form-control disableMargin>
          <bit-switch formControlName="autoConfirm"></bit-switch>
          <bit-label>
            <span class="tw-text-sm">
              {{ "automaticUserConfirmation" | i18n }}
            </span>
          </bit-label>
          <bit-hint class="tw-max-w-[18rem]">{{ "automaticUserConfirmationHint" | i18n }}</bit-hint>
        </bit-form-control>
      </bit-card>
    </form>
  </div>
</popup-page>
