<form [formGroup]="customFieldForm" [bitSubmit]="submit" bit-dialog>
  <span bitDialogTitle>
    {{ (variant === "add" ? "addField" : "editField") | i18n }}
  </span>
  <div bitDialogContent>
    @if (variant === "add") {
      <bit-form-field>
        <bit-label>{{ "fieldType" | i18n }}</bit-label>
        <bit-select id="fieldType" formControlName="type">
          @for (type of fieldTypeOptions; track type.value) {
            <bit-option [value]="type.value" [label]="type.name"></bit-option>
          }
        </bit-select>
        <bit-hint>
          {{ getTypeHint() }}
        </bit-hint>
      </bit-form-field>
    }

    <bit-form-field disableMargin>
      <bit-label>{{ "fieldLabel" | i18n }}</bit-label>
      <input bitInput id="fieldLabel" formControlName="label" type="text" />
      @if (customFieldForm.value.type === FieldType.Linked) {
        <bit-hint>
          {{ "linkedFieldLabelHelpText" | i18n }}
        </bit-hint>
      }
    </bit-form-field>
  </div>
  <ng-container bitDialogFooter>
    <button bitButton buttonType="primary" type="submit" [disabled]="customFieldForm.invalid">
      {{ (variant === "add" ? "add" : "save") | i18n }}
    </button>
    <button bitButton bitDialogClose buttonType="secondary" type="button">
      {{ "cancel" | i18n }}
    </button>

    @if (variant === "edit") {
      <button
        type="button"
        buttonType="dangerGhost"
        class="tw-ml-auto"
        bitIconButton="bwi-trash"
        [label]="'deleteCustomField' | i18n: customFieldForm.value.label"
        (click)="removeField()"
      ></button>
    }
  </ng-container>
</form>
