<div [formGroup]="formGroup">
  @if (formGroup.controls.label) {
    @let alarmLabelExample = 'Unavailability alarm' | translate;
    @let eventLabelExample = 'Location update' | translate;
    <c8y-form-group class="form-group-sm">
      <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' ? alarmLabelExample : eventLabelExample }
        "
      />
    </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>

  @if (datapoints?.length > 0) {
    <c8y-form-group class="form-group-sm">
      <label>{{ 'Select data point' | translate }}</label>
      <div class="c8y-select-wrapper">
        <select
          class="form-control input-sm"
          (change)="changeDatapointSelection($event)"
        >
          @for (datapoint of datapoints; track trackByFn($index, datapoint)) {
            <option
              [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 | datapointLabel }}
            </option>
          }
        </select>
      </div>
    </c8y-form-group>
  }
</div>