<div class="p-l-24 p-r-24">
  <form [formGroup]="formGroup" class="row no-card-context">
    <div class="col-sm-6 bg-level-0">
      <c8y-datapoint-selection-list
        [defaultFormOptions]="defaultFormOptions"
        [config]="datapointSelectionConfig"
        [minActiveCount]="1"
        [maxActiveCount]="1"
        formControlName="datapoints"
        name="datapoints"
        class="bg-inherit"
      ></c8y-datapoint-selection-list>
    </div>
    <div class="col-sm-6">
      <div class="card-header separator">
        <div class="card-title h4">{{ 'Layout' | translate }}</div>
      </div>
      <label translate>Icon</label>
      <div class="d-flex a-i-center">
        <c8y-icon-selector-wrapper name="icon" formControlName="icon"></c8y-icon-selector-wrapper>
      </div>
      <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-help btn-help--sm"
                type="button"
                [attr.aria-label]="'Help' | translate"
                popover="{{
                  'Indicates the trend between the last two measurement values.' | translate
                }}"
                placement="right"
                triggers="focus"
                container="body"
              ></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>
</div>