<form
  class="no-card-context"
  [formGroup]="formGroup"
>
<fieldset class="c8y-fieldset">
  <legend>{{ 'Date' | translate }}</legend>
    <!-- global-time-context-selector -->
    <div class="form-group form-group-sm m-b-16">
    <label
      class="d-flex a-i-center p-t-4"
      for="dateSelection"
    >
      {{ 'Date selection' | translate }}
      <button
        class="btn-help btn-help--sm"
        [attr.aria-label]="'Help' | translate"
        [popover]="popoverTemplate"
        placement="right"
        triggers="focus"
        container="body"
        type="button"
        [adaptivePosition]="true"
      ></button>
    </label>
    <ng-template #popoverTemplate>
      <span translate>
        Choose how to select a date range, the available options are:
        <ul class="m-l-0 p-l-8 m-t-8 m-b-0">
          <li>
            <b>Dashboard time range:</b>
            restricts date selection to the global dashboard configuration only
          </li>
          <li>
            <b>Widget configuration:</b>
            restricts the date selection only to the widget configuration
          </li>
          <li>
            <b>Widget and widget configuration:</b>
            restricts the date selection to the widget view and widget configuration only
          </li>
        </ul>
      </span>
    </ng-template>
    <div class="c8y-select-wrapper">
      <select
        class="form-control text-12"
        [title]="'Date selection' | translate"
        [attr.aria-label]="'Date selection' | translate"
        id="globalDateSelector"
        formControlName="globalDateSelector"
      >
        <option
          *ngFor="let dataSelectionValue of DATE_SELECTION_VALUES_ARR"
          [ngValue]="dataSelectionValue"
        >
          {{ DATE_SELECTION_LABELS[dataSelectionValue] | translate }}
        </option>
      </select>
    </div>
  </div>
  <div class="row tight-grid d-flex flex-wrap" *ngIf="!isWidgetLinkedToGlobalTimeContext">
    <div class="col-md-6" >
      <c8y-form-group class="form-group-sm">
        <label>{{ 'Date filter' | translate }}</label>
        <div class="c8y-select-wrapper">
          <select
            class="form-control text-12"
            [title]="'Interval' | translate"
            id="interval"
            formControlName="interval"
          >
            <option
              *ngFor="let intervalValue of INTERVAL_VALUES_ARR"
              [ngValue]="intervalValue"
            >
              {{ TIME_RANGE_INTERVAL_LABELS[intervalValue] | translate }}
            </option>
          </select>
        </div>
      </c8y-form-group>
    </div>
    <div class="col-md-6" >
      <c8y-date-range-picker *ngIf="formGroup.value.interval === 'custom'"></c8y-date-range-picker>
    </div>
    <div class="col-md-6">
      <c8y-form-group class="form-group-sm">
        <label>
          {{ 'Aggregation' | translate }}
        </label>
        <div class="c8y-select-wrapper">
          <!-- Setting below [attr.disabled] ensures that the control is visually disabled and user interaction is prevented,
        while still allowing the value to be updated and saved correctly in the form.
        This solution covers the case where the user enables auto-refresh, in which case aggregation must be set to NONE. -->
          <select
            class="form-control text-12"
            [title]="'Aggregation' | translate"
            id="aggregation"
            formControlName="aggregation"
            [attr.disabled]="formGroup.value.isAutoRefreshEnabled ? true : null"
          >
            <option
              *ngFor="let aggregationValue of AGGREGATION_VALUES_ARR"
              [ngValue]="aggregationValue"
              [disabled]="disabledAggregationOptions[aggregationValue]"
            >
              {{ AGGREGATION_LABELS[aggregationValue] | translate }}
            </option>
          </select>
        </div>
      </c8y-form-group>
    </div>
    <div class="col-md-6">
      <!-- interval selector -->
      <c8y-form-group class="form-group-sm">
        <label class="d-flex a-i-center">
          {{ 'Auto refresh' | translate }}
          <button
            class="btn-help btn-help--sm"
            [attr.aria-label]="'Help' | translate"
            [popover]="
              'Change the state of interval automatic refresh and set the refresh frequency.'
                | translate
            "
            placement="top"
            triggers="focus"
            container="body"
            type="button"
            [adaptivePosition]="true"
          ></button>
        </label>
        <div class="d-flex gap-4 a-i-center">
          <label class="c8y-switch c8y-switch--inline">
            <input
              id="refreshToggle"
              name="isAutoRefreshEnabled"
              type="checkbox"
              formControlName="isAutoRefreshEnabled"
              (click)="toggleRefreshIntervalControl()"
            />
            <span></span>
            <span class="sr-only">{{ 'Auto refresh' | translate }}</span>
          </label>
          <div class="c8y-select-wrapper">
            <select
              class="form-control"
              [title]="'Refresh interval in seconds' | translate"
              id="refreshInterval"
              formControlName="refreshInterval"
            >
              <option
                *ngFor="let refreshInterval of REFRESH_INTERVAL_VALUES_ARR"
                [ngValue]="refreshInterval"
              >
                {{ '{{ seconds }} s' | translate: { seconds: refreshInterval / 1000 } }}
              </option>
            </select>
          </div>
        </div>
      </c8y-form-group>
    </div>
  </div>
</fieldset>

<!-- decimal input -->
<fieldset class="c8y-fieldset">
  <legend>
    {{ 'Decimal places' | translate }}
  </legend>
  <c8y-form-group class="p-t-8">
    <input
      class="form-control"
      name="decimalPlaces"
      type="number"
      formControlName="decimalPlaces"
      step="1"
    />
  </c8y-form-group>
</fieldset>


  <!-- <datapoints-selector> -->
  <c8y-datapoint-selection-list
    class="bg-inherit"
    listTitle="{{ 'Data points' | translate }}"
    name="datapoints"
    [defaultFormOptions]="defaultFormOptions"
    [config]="datapointSelectionConfig"
    [minActiveCount]="1"
    formControlName="datapoints"
  ></c8y-datapoint-selection-list>
  
</form>