<div class="card-header separator sticky-top bg-component">
  <span
    class="card-title h4"
    *ngIf="listTitle"
  >
    {{ listTitle | translate }}
  </span>
  <span
    class="card-title h4"
    *ngIf="!listTitle"
  >
    {{ 'Data points' | translate }}
  </span>
</div>

<c8y-list-group
  class="flex-grow ff-scroll-fix cdk-droplist"
  cdkDropList
  (cdkDropListDropped)="drop($event)"
  [cdkDropListDisabled]="!allowDragAndDrop || formArray.controls?.length < 2"
>
  <div
    class="alert alert-warning m-t-8"
    role="alert"
    ngNonBindable
    *ngIf="formArray.errors?.minActiveCount"
    translate
    [translateParams]="formArray.errors?.minActiveCount"
  >
    At least {{ minActive }} active data points must be selected.
  </div>

  <div
    class="alert alert-warning m-t-8"
    role="alert"
    ngNonBindable
    *ngIf="formArray.errors?.maxActiveCount"
    translate
    [translateParams]="formArray.errors?.maxActiveCount"
  >
    At maximum {{ maxActive }} active data points are allowed to be selected.
  </div>

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

  <div
    class="p-t-8"
    *ngIf="!formArray.controls?.length"
  >
    <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>
  <div
    [formGroup]="dpForm"
    *ngFor="let dpForm of formArray.controls; let index = index"
  >
    <c8y-datapoint-selector-list-item
      class="d-block"
      [defaultFormOptions]="defaultFormOptions"
      [activeToggleDisabled]="maxActiveCountReached"
      [showActiveToggle]="true"
      [showAddRemoveButton]="false"
      [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>
</c8y-list-group>

<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>