<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>
      <fieldset class="c8y-fieldset">
        <legend>{{ 'Value format' | translate }}</legend>
        <div class="form-group">
          <label
            class="c8y-checkbox"
            [title]="'Format as numeric string' | translate"
          >
            <input
              name="formatAsNumericString"
              type="checkbox"
              formControlName="formatAsNumericString"
            />
            <span></span>
            <span translate>Format as numeric string</span>
            <button
              class="btn-help btn-help--sm"
              [attr.aria-label]="'Help' | translate"
              popover="{{
                'Rounds the value to the number of decimal places and returns it as text. Clear it to get the value exactly as the device sent it.'
                  | translate
              }}"
              placement="top"
              triggers="focus"
              container="body"
              type="button"
            ></button>
          </label>
        </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>
      </fieldset>
    </div>
    <div class="col-md-6 no-card-context bg-component">
      <c8y-datapoint-selection-list
        class="bg-inherit"
        name="dp"
        [config]="datapointSelectionConfig"
        [minActiveCount]="minSelectCount"
        [maxActiveCount]="maxSelectCount"
        formControlName="dp"
      ></c8y-datapoint-selection-list>
    </div>
  </div>
</form>