<form
  [formGroup]="formGroup"
  [bitSubmit]="submit"
  bit-dialog
  dialogSize="large"
  [loading]="loading()"
>
  <span bitDialogTitle class="tw-font-medium">{{ upgradeToMessage() }}</span>

  <ng-container bitDialogContent>
    <section>
      <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">
        <app-display-payment-method-inline
          #paymentMethodComponent
          [subscriber]="subscriber()"
          [paymentMethod]="paymentMethod()"
          [externalFormGroup]="formGroup.controls.paymentMethodForm"
          [showBankAccountOption]="false"
        >
        </app-display-payment-method-inline>
        <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: showTaxIdField() }"
        >
        </app-enter-billing-address>
      </div>
    </section>
    <section>
      <billing-cart-summary
        #cartSummaryComponent
        [cart]="cart()"
        [hidePricingTerm]="true"
      ></billing-cart-summary>
    </section>
  </ng-container>
  <ng-container bitDialogFooter>
    <button
      bitButton
      bitFormButton
      buttonType="primary"
      [disabled]="loading() || !isFormValid()"
      type="submit"
    >
      {{ "upgrade" | i18n }}
    </button>
    <button
      bitButton
      type="button"
      buttonType="secondary"
      (click)="goBack.emit()"
      [disabled]="loading()"
    >
      {{ "back" | i18n }}
    </button>
  </ng-container>
</form>
