@let content = this.content();
<form [formGroup]="formGroup" [bitSubmit]="submit" bit-dialog [title]="content.title">
  <ng-container bitDialogContent>
    <p bitTypography="body1">{{ content.body }}</p>
    <div class="tw-grid tw-grid-cols-12">
      <bit-form-field class="tw-col-span-7">
        <bit-label>{{ content.label }}</bit-label>
        <input bitInput type="number" [formControl]="formGroup.controls.amount" />
        @if (action() === "add") {
          <bit-hint>
            <!-- Total: 10 GB × $0.50 = $5.00 /month -->
            <strong>{{ "total" | i18n }}</strong>
            {{ formGroup.value.amount }} GB &times; {{ price() | currency: "$" }} =
            {{ price() * formGroup.value.amount | currency: "$" }} /
            {{ term() | i18n }}
          </bit-hint>
        }
      </bit-form-field>
    </div>
  </ng-container>
  <ng-container bitDialogFooter>
    <button
      type="submit"
      bitButton
      bitFormButton
      buttonType="primary"
      [disabled]="formGroup.invalid"
    >
      {{ "submit" | i18n }}
    </button>
    <button
      type="button"
      bitButton
      bitFormButton
      buttonType="secondary"
      [bitDialogClose]="'closed'"
    >
      {{ "cancel" | i18n }}
    </button>
  </ng-container>
</form>