<form [formGroup]="formGroup" class="row">
  <div class="col-sm-6">
    <c8y-datapoint-selection-list
      [defaultFormOptions]="defaultFormOptions"
      [config]="datapointSelectionConfig"
      [minActiveCount]="1"
      [maxActiveCount]="1"
      formControlName="datapoints"
      name="datapoints"
    >
    </c8y-datapoint-selection-list>
  </div>
  <div class="col-sm-6">
    <c8y-form-group>
      <label translate>Icon</label>
      <div class="d-flex a-i-center">
        <div class="p-r-8 icon-32 text-muted">
          <i [c8yIcon]="formGroup.value.icon"></i>
        </div>
        <button class="btn btn-default btn-xs" (click)="openIconSelector()">
          {{ 'Change' | translate }}
        </button>
      </div>
    </c8y-form-group>
    <c8y-form-group>
      <label [title]="'Number of decimal places' | translate" translate>
        Number of decimal places
      </label>
      <input
        class="form-control"
        formControlName="numberOfDecimalPlaces"
        name="numberOfDecimalPlaces"
        type="number"
        [placeholder]="'e.g. {{ example }}' | translate: { example: 1 }"
      />
      <c8y-messages [show]="formGroup.controls?.numberOfDecimalPlaces?.touched && formGroup?.controls?.numberOfDecimalPlaces?.errors">
      </c8y-messages>
    </c8y-form-group>
    <div>
      <label> {{ 'Display' | translate }}</label>
      <div class="d-flex gap-16 flex-wrap">
        <c8y-form-group>
          <label [title]="'Show timestamp' | translate" class="c8y-checkbox">
            <input type="checkbox" formControlName="showTimestamp" name="showTimestamp" />
            <span></span>
            <span translate>Show timestamp</span>
          </label>
        </c8y-form-group>

        <c8y-form-group>
          <label [title]="'Show icon' | translate" class="c8y-checkbox">
            <input type="checkbox" formControlName="showIcon" name="showIcon" />
            <span></span>
            <span translate>Show icon</span>
          </label>
        </c8y-form-group>

        <c8y-form-group>
          <label [title]="'Show trend icon' | translate" class="c8y-checkbox">
            <input type="checkbox" formControlName="showTrend" name="showTrend" />
            <span></span>
            <span translate>Show trend icon</span>
            <button
              class="btn btn-clean"
              popover="{{
                'Indicates the trend between the last two measurement values.' | translate
              }}"
              container="body"
              [outsideClick]="true"
            >
              <i [c8yIcon]="'question-circle-o'" class="text-info"></i>
            </button>
          </label>
        </c8y-form-group>
      </div>

      <c8y-form-group>
        <label [title]="'Font size of measurement value (px)' | translate" translate>
          Font size of measurement value (px)
        </label>
        <input
          class="form-control"
          formControlName="fontSize"
          name="fontSize"
          type="number"
          [placeholder]="'e.g. {{ example }}' | translate: { example: 36 }"
        />
        <c8y-messages [show]="formGroup.controls?.fontSize?.touched && formGroup?.controls?.fontSize?.errors">
        </c8y-messages>
      </c8y-form-group>
    </div>
  </div>
</form>