@if (!inline) {
  <div class="card-header separator-top-bottom sticky-top bg-inherit">
    <span class="card-title h4">{{ title | 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]="formArray.controls?.length < 2"
>
  @if (!formArray.controls?.length) {
    <div class="p-t-8">
      <ng-content select="c8y-ui-empty-state"></ng-content>
      @if (!emptyState) {
        <c8y-ui-empty-state
          class="p-t-8"
          [icon]="timelineTypeTexts.emptyStateIcon"
          [title]="timelineTypeTexts.emptyStateTitle | translate"
          [subtitle]="timelineTypeTexts.emptyStateSubtitle | translate"
          [horizontal]="true"
        ></c8y-ui-empty-state>
      }
    </div>
  }

  @for (formGroup of formGroups; track formGroup; let index = $index) {
    <div [formGroup]="formGroup">
      <c8y-alarm-event-selector-list-item
        class="d-block"
        cdkDrag
        [cdkDragDisabled]="!canDragAndDrop"
        formControlName="details"
        [showAddRemoveButton]="false"
        [datapoints]="datapoints"
        [optionToRemove]="canRemove"
        [showActiveToggle]="true"
        [timelineType]="timelineType"
        [allowItemEdit]="canEdit"
        [hideSource]="hideSource"
        [displayAsSwitch]="activeToggleAsSwitch"
        [omitProperties]="omitProperties"
        (removed)="onItemRemoved(index)"
      >
        @if (canDragAndDrop) {
          <c8y-li-drag-handle
            title="{{ 'Click and drag to reorder' | translate }}"
            cdkDragHandle
          >
            <i c8yIcon="drag-reorder"></i>
          </c8y-li-drag-handle>
        }
      </c8y-alarm-event-selector-list-item>
    </div>
  }
</c8y-list-group>

<div class="card-footer bg-inherit">
  <button
    class="btn btn-default btn-sm"
    [title]="addButtonLabel | translate"
    type="button"
    (click)="add()"
  >
    @if (canDragAndDrop) {
      <i c8yIcon="plus-circle"></i>
    }
    {{ addButtonLabel | translate }}
  </button>
</div>