@if (!removeTitle) {
  <div class="card-header separator sticky-top bg-inherit">
    <span class="card-title h4">
      {{ (listTitle ? listTitle : DATA_POINTS_LABEL) | translate }}
    </span>
  </div>
}

<c8y-list-group
  class="flex-grow ff-scroll-fix cdk-droplist"
  [class.separator-top]="formArray.controls?.length"
  cdkDropList
  (cdkDropListDropped)="drop($event)"
  [cdkDropListDisabled]="!allowDragAndDrop || formArray.controls?.length < 2"
>
  @if (formArray.errors?.minActiveCount && formArray.touched) {
    <div
      class="alert alert-warning m-t-8"
      role="alert"
    >
      {{ minActiveErrorMessage | translate: { minActive: minActiveCount } }}
    </div>
  }

  @if (formArray.errors?.maxActiveCount && formArray.touched) {
    <div
      class="alert alert-warning m-t-8"
      role="alert"
    >
      {{ maxActiveErrorMessage | translate: { maxActive: maxActiveCount } }}
    </div>
  }

  <ng-content select=".alert"></ng-content>

  @if (defaultFormOptions?.showAdvancedChartOptions && formArray.controls?.length) {
    <fieldset class="c8y-fieldset m-t-0 m-b-16">
      <legend>
        {{ 'Aggregation display' | translate }}
        <button
          class="btn-help btn-help--sm"
          [attr.aria-label]="
            'Select which aggregations to display for all data points. These options apply to every data point in the list.'
              | translate
          "
          popover="{{
            'Select which aggregations to display for all data points. These options apply to every data point in the list.'
              | translate
          }}"
          placement="top"
          triggers="focus"
          container="body"
          type="button"
        ></button>
      </legend>
      <div class="m-b-8">
        @for (rt of GLOBAL_AGGREGATION_TYPES; track rt.val) {
          @let aggregationState = getAggregationState(rt.val);
          <label
            class="c8y-checkbox checkbox-inline"
            [title]="rt.text | translate"
            [attr.aria-label]="rt.text | translate"
          >
            <input
              type="checkbox"
              [checked]="aggregationState === 'all'"
              [indeterminate]="aggregationState === 'mixed'"
              [disabled]="wouldLeaveAnyEmpty(rt.val)"
              (change)="toggleGlobalAggregation(rt.val)"
            />
            <span></span>
            <span>{{ rt.text | translate }}</span>
          </label>
        }
      </div>
    </fieldset>
  }

  @if (!formArray.controls?.length) {
    <div class="p-t-8">
      <c8y-ui-empty-state
        class="p-t-8"
        [icon]="'c8y-data-points'"
        [title]="'No data points to display.' | translate"
        [subtitle]="'Add your first data point.' | translate"
        [horizontal]="true"
      ></c8y-ui-empty-state>
    </div>
  }

  @for (formGroup of formGroups; track formGroup; let index = $index) {
    <div [formGroup]="formGroup">
      <c8y-datapoint-selector-list-item
        class="d-block"
        [defaultFormOptions]="defaultFormOptions"
        [activeToggleDisabled]="maxActiveCountReached"
        [showActiveToggle]="true"
        [addButtonType]="AddButtonTypes.none"
        [showOptions]="true"
        [editable]="true"
        [colorPickerDisabled]="false"
        [actions]="actions"
        [optionToRemove]="true"
        [datapointLibraryEntries]="datapointLibraryEntries"
        [hasUnlinkTemplateOption]="true"
        formControlName="details"
        (removed)="onItemRemoved(index)"
        cdkDrag
      >
        <c8y-li-drag-handle
          title="{{ 'Click and drag to reorder' | translate }}"
          cdkDragHandle
        >
          <i c8yIcon="drag-reorder"></i>
        </c8y-li-drag-handle>
      </c8y-datapoint-selector-list-item>
    </div>
  }

  <div class="card-footer bg-inherit">
    <button
      class="btn btn-default btn-sm"
      [title]="'Add data point' | translate"
      type="button"
      data-cy="c8y-datapoint-selection-list--add-datapoint-button"
      (click)="add()"
    >
      <i c8yIcon="plus-circle"></i>
      {{ 'Add data point' | translate }}
    </button>
  </div>
</c8y-list-group>