<form [formGroup]="formGroup">
  <div class="d-flex-md row">
    <div class="col-md-6">
      <div
        class="form-group"
        style="padding-top: var(--c8y-font-size-base)"
      >
        <label for="resultType">{{ 'Result type' | translate }}</label>
        <div class="c8y-select-wrapper">
          <select
            class="form-control"
            id="resultType"
            formControlName="resultType"
          >
            @for (type of resultTypes | keyvalue; track type.key) {
              <option [ngValue]="type.value.value">
                {{ type.value.label | translate }}
              </option>
            }
          </select>
        </div>
      </div>
      <div class="form-group form-group-sm">
        <label
          [title]="'Number of decimal places' | translate"
          for="numberOfDecimalPlaces"
          translate
        >
          Number of decimal places
        </label>
        <input
          class="form-control"
          id="numberOfDecimalPlaces"
          name="numberOfDecimalPlaces"
          type="number"
          formControlName="numberOfDecimalPlaces"
          [placeholder]="'e.g. {{ example }}' | translate: { example: 2 }"
        />
        <c8y-messages
          [show]="
            formGroup.controls?.numberOfDecimalPlaces?.touched &&
            formGroup?.controls?.numberOfDecimalPlaces?.errors
          "
        ></c8y-messages>
      </div>
    </div>
    <div class="col-md-6 no-card-context">
      <c8y-datapoint-selection-list
        class="bg-inherit"
        name="dp"
        [config]="datapointSelectionConfig"
        [minActiveCount]="minSelectCount"
        [maxActiveCount]="maxSelectCount"
        formControlName="dp"
      ></c8y-datapoint-selection-list>
    </div>
  </div>
</form>