<form
  [formGroup]="formGroup"
  [bitSubmit]="submit"
  bit-dialog
  dialogSize="large"
  [loading]="loading()"
>
  <span bitDialogTitle class="tw-font-medium">{{ upgradeToMessage() }}</span>
  <ng-container bitDialogContent>
    <section>
      @if (isFamiliesPlan()) {
        @if (userIsOwnerOfFreeOrg$ | async) {
          <div class="tw-pb-2">
            <bit-callout type="info">
              {{ "formWillCreateNewFamiliesOrgMessage" | i18n }}
              <a
                bitLink
                bitDialogClose
                linkType="primary"
                [routerLink]="adminConsoleRouteForOwnedOrganization$ | async"
                endIcon="bwi-angle-right"
              >
                {{ "upgradeNow" | i18n }}
              </a>
            </bit-callout>
          </div>
        }
        <div class="tw-pb-4">
          <bit-form-field class="!tw-mb-0">
            <bit-label>{{ "organizationName" | i18n }}</bit-label>
            <input bitInput type="text" formControlName="organizationName" required />
            <bit-hint bitTypography="helper" class="tw-text-muted">
              {{ "organizationNameDescription" | i18n }}
            </bit-hint>
          </bit-form-field>
        </div>
      }
      <div class="tw-pb-8 !tw-mx-0">
        <h5 bitTypography="h5">{{ "paymentMethod" | i18n }}</h5>
        <app-enter-payment-method
          [showBankAccount]="isFamiliesPlan()"
          [showAccountCredit]="!isFamiliesPlan()"
          [group]="formGroup.controls.paymentForm"
          [includeBillingAddress]="false"
          [hasEnoughAccountCredit]="hasEnoughAccountCredit$ | async"
          #paymentComponent
        ></app-enter-payment-method>
        <h5 bitTypography="h5" class="tw-pt-4 tw-pb-2">{{ "billingAddress" | i18n }}</h5>
        <app-enter-billing-address
          [group]="formGroup.controls.billingAddress"
          [scenario]="{ type: 'checkout', supportsTaxId: false }"
        >
        </app-enter-billing-address>
      </div>
    </section>

    <section>
      <billing-cart-summary
        #cartSummaryComponent
        [cart]="cart()"
        [showDiscountBadges]="true"
      ></billing-cart-summary>
      @if (isFamiliesPlan()) {
        <p bitTypography="helper" class="tw-italic tw-text-muted !tw-mb-0">
          {{ "paymentChargedWithTrialSpecificLength" | i18n: defaultTrialDays }}
        </p>
      }
    </section>
  </ng-container>

  <ng-container bitDialogFooter>
    <button
      bitButton
      bitFormButton
      buttonType="primary"
      [disabled]="loading() || !isFormValid() || !(hasEnoughAccountCredit$ | async)"
      type="submit"
    >
      {{ "upgrade" | i18n }}
    </button>
    <button
      bitButton
      type="button"
      buttonType="secondary"
      (click)="goBack.emit()"
      [disabled]="loading()"
    >
      {{ "back" | i18n }}
    </button>
  </ng-container>
</form>
