<c8y-li
  class="c8y-list__item__collapse--container-small"
  [formGroup]="formGroup"
  #li
>
  <c8y-li-drag-handle><ng-content select="c8y-li-drag-handle"></ng-content></c8y-li-drag-handle>
  <c8y-li-icon
    class="a-s-center p-r-4"
    *ngIf="showAddRemoveButton"
  >
    <button
      class="btn btn-clean text-primary"
      [title]="'Remove' | translate"
      *ngIf="isSelected"
      (click)="addOrRemoveItem()"
    >
      <i
        class="text-danger"
        c8yIcon="minus-circle"
      ></i>
    </button>
    <button
      class="btn btn-clean text-primary"
      [title]="'Select' | translate"
      *ngIf="!isSelected"
      (click)="addOrRemoveItem()"
      [disabled]="(valid$ | async) === false"
    >
      <i
        class="text-primary"
        c8yIcon="plus-circle"
      ></i>
    </button>
  </c8y-li-icon>

  <c8y-li-checkbox
    class="a-s-center p-r-0"
    *ngIf="showActiveToggle"
    [displayAsSwitch]="displayAsSwitch"
    formControlName="__active"
    (click)="$event.stopPropagation()"
  ></c8y-li-checkbox>

  <div class="d-flex a-i-center p-l-4">
    <div
      class="c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0"
      [title]="colorPickerTitle | translate"
    >
      <div
        class="c8y-colorpicker"
        [ngClass]="{
          'c8y-colorpicker--alarm': timelineType === 'ALARM',
          'c8y-colorpicker--event': timelineType === 'EVENT'
        }"
      >
        <input
          [ngStyle]="{ 'pointer-events': allowItemEdit && !omitProperties.color ? 'auto' : 'none' }"
          type="color"
          formControlName="color"
          (click)="$event.stopPropagation()"
        />
        <span
          class="circle-icon-wrapper"
          [ngStyle]="{ 'background-color': formGroup.value.color }"
        >
          <i
            class="stroked-icon"
            [c8yIcon]="timelineType === 'EVENT' ? 'c8y-events' : 'bell'"
          ></i>
        </span>
      </div>
    </div>
    <button
      class="btn-clean text-truncate"
      [title]="formGroup.value.details?.label"
      (click)="
        allowItemEdit
          ? (li.collapsed = !li.collapsed)
          : showActiveToggle
            ? toggleActive()
            : addOrRemoveItem()
      "
    >
      <span class="text-truncate">
        <c8y-highlight
          [text]="
            omitProperties.label
              ? formGroup.value.details?.filters?.type
              : formGroup.value.details?.label
          "
          [pattern]="highlightText"
          [shouldTrimPattern]="true"
        ></c8y-highlight>
      </span>
      <small
        class="text-truncate text-muted icon-flex"
        *ngIf="formGroup.value.__target && !hideSource"
      >
        <i c8yIcon="exchange"></i>
        <span class="text-truncate">{{ formGroup.value.__target.name }}</span>
      </small>
    </button>

    <button
      class="btn-dot btn-dot--danger m-l-auto"
      title="{{ 'Invalid entries' | translate }}"
      [popover]="'Some entries are invalid. Check the required input fields.' | translate"
      container="body"
      *ngIf="(valid$ | async) === false && li.collapsed"
      [outsideClick]="true"
    >
      <i c8yIcon="exclamation-circle"></i>
    </button>
  </div>

  <c8y-li-action
    [icon]="'minus-circle'"
    *ngIf="optionToRemove"
    [label]="'Remove from list' | translate"
    (click)="remove()"
  ></c8y-li-action>
  <c8y-li-collapse *ngIf="allowItemEdit">
    <div class="data-point-details">
      <c8y-alarm-event-attributes-form
        formControlName="details"
        [timelineType]="timelineType"
        [omitProperties]="omitProperties"
      ></c8y-alarm-event-attributes-form>
    </div>
  </c8y-li-collapse>
</c8y-li>