<form
  [formGroup]="formGroup"
  [bitSubmit]="submit"
  bit-dialog
  [loading]="loading()"
  [title]="dialogTitle()"
  [subtitle]="dialogSubtitle()"
>
  <ng-container bitDialogTitle>
    @let title = policySteps()[currentStep()]?.titleContent?.();
    @if (title) {
      <ng-container [ngTemplateOutlet]="title"></ng-container>
    }
  </ng-container>

  @if (isV2()) {
    <ng-container bitDialogHeaderEnd>
      @if (!loading()) {
        @if (policyEnabled()) {
          <span bitBadge variant="success">{{ "on" | i18n }}</span>
        } @else {
          <span bitBadge variant="secondary">{{ "off" | i18n }}</span>
        }
      }
    </ng-container>
  }

  <ng-container bitDialogContent>
    @if (showDescription()) {
      <p bitTypography="body1">{{ descriptionKey() | i18n }}</p>
    }

    @let bodyTemplate = policySteps()[currentStep()]?.bodyContent?.();
    @if (bodyTemplate) {
      <ng-container [ngTemplateOutlet]="bodyTemplate"></ng-container>
    }
    <!-- Always rendered so viewChild resolves before ngAfterViewInit runs. -->
    <ng-template #policyForm></ng-template>
  </ng-container>

  <ng-container bitDialogFooter>
    @let footerTemplate = policySteps()[currentStep()]?.footerContent?.();
    @if (footerTemplate) {
      <ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>
    } @else {
      <button
        bitButton
        buttonType="primary"
        [disabled]="loading() || saveDisabled()"
        bitFormButton
        type="submit"
      >
        {{ (currentStep() === policySteps().length - 1 ? "save" : "next") | i18n }}
      </button>
      @if (!isV2()) {
        <button bitButton buttonType="secondary" type="button" (click)="cancel()">
          {{ "cancel" | i18n }}
        </button>
      }
    }
  </ng-container>
</form>
