<div [formGroup]="formGroup">
  <c8y-form-group
    class="form-group-sm"
    *ngIf="formGroup.controls.label"
  >
    <label class="m-0">{{ 'Label' | translate }}</label>
    <input
      class="form-control flex-grow"
      name="label"
      formControlName="label"
      [placeholder]="
        'e.g. {{ example }}'
          | translate
            : {
                example: timelineType === 'ALARM' ? 'Alarm unavailable' : 'Location update'
              }
      "
    />
  </c8y-form-group>

  <div formGroupName="filters">
    <c8y-form-group class="form-group-sm">
      <label class="m-0">{{ 'Type' | translate }}</label>
      <input
        class="form-control flex-grow"
        name="type"
        formControlName="type"
        [placeholder]="
          'e.g. {{ example }}'
            | translate
              : {
                  example:
                    timelineType === 'ALARM' ? 'c8y_UnavailabilityAlarm' : 'c8y_LocationUpdate'
                }
        "
      />
      <c8y-messages>
        <c8y-message
          name="duplicateType"
          [text]="'Type already used.' | translate"
        ></c8y-message>
      </c8y-messages>
    </c8y-form-group>
  </div>

  <c8y-form-group
    class="form-group-sm"
    *ngIf="datapoints?.length > 0"
  >
    <label>{{ 'Select data point' | translate }}</label>
    <div class="c8y-select-wrapper">
      <select
        class="form-control input-sm"
        (change)="changeDatapointSelection($event)"
      >
        <option
          title="{{ 'Widget configuration' | translate }}"
          *ngFor="let datapoint of datapoints; trackBy: trackByFn"
          [ngValue]="{
            target: datapoint.__target.id,
            fragment: datapoint.fragment,
            series: datapoint.series
          }"
          [selected]="
            datapoint.__target.id === formGroup.value.selectedDatapoint?.target &&
            datapoint.fragment === formGroup.value.selectedDatapoint?.fragment &&
            datapoint.series === formGroup.value.selectedDatapoint?.series
          "
        >
          {{ datapoint?.label }}
        </option>
      </select>
    </div>
  </c8y-form-group>
</div>