<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>
  @if (showActiveToggle) {
    <c8y-li-checkbox
      class="a-s-center m-t-4 p-r-0"
      [displayAsSwitch]="displayAsSwitch"
      formControlName="__active"
      (click)="$event.stopPropagation()"
    ></c8y-li-checkbox>
  }

  <div class="d-flex a-i-center p-l-0">
    <div
      class="c8y-list__item__colorpicker p-t-0 p-b-0 p-l-16"
      [title]="colorPickerTitle | translate"
    >
      <div
        class="c8y-colorpicker"
        [class.c8y-colorpicker--alarm]="timelineType === 'ALARM'"
        [class.c8y-colorpicker--event]="timelineType === 'EVENT'"
      >
        <input
          [style.pointer-events]="allowItemEdit && !omitProperties.color ? 'auto' : 'none'"
          type="color"
          formControlName="color"
          (click)="$event.stopPropagation()"
        />
        <span
          class="circle-icon-wrapper circle-icon-wrapper--medium"
          [style.background-color]="formGroup.value.color"
        >
          <i
            class="stroked-icon"
            [c8yIcon]="timelineType === 'EVENT' ? 'online1' : '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>
      @if (formGroup.value.__target && !hideSource) {
        <small class="text-truncate text-muted icon-flex">
          <i c8yIcon="exchange"></i>
          <span class="text-truncate">{{ formGroup.value.__target.name }}</span>
        </small>
      }
    </button>

    <span class="m-l-auto d-flex a-i-center m-r-4">
      @if ((valid$ | async) === false && li.collapsed) {
        <button
          class="btn-dot btn-dot--danger"
          title="{{ 'Invalid entries' | translate }}"
          [popover]="'Some entries are invalid. Check the required input fields.' | translate"
          container="body"
          type="button"
          [outsideClick]="true"
        >
          <i
            class="icon-20"
            c8yIcon="exclamation-circle"
          ></i>
        </button>
      }
      @if (showAddRemoveButton) {
        <span>
          @if (isSelected) {
            <button
              class="btn btn-dot text-danger"
              [attr.aria-label]="'Remove' | translate"
              [tooltip]="'Remove' | translate"
              placement="top"
              container="body"
              type="button"
              [delay]="500"
              (click)="addOrRemoveItem()"
            >
              <i
                class="icon-20"
                c8yIcon="minus-circle"
              ></i>
            </button>
          } @else {
            <button
              class="btn btn-dot text-primary"
              [attr.aria-label]="'Select' | translate"
              [tooltip]="'Select' | translate"
              placement="top"
              container="body"
              type="button"
              [disabled]="(valid$ | async) === false"
              [delay]="500"
              (click)="addOrRemoveItem()"
            >
              <i
                class="icon-20"
                c8yIcon="plus-circle"
              ></i>
            </button>
          }
        </span>
      }
      @if (optionToRemove) {
        <button
          class="showOnHover btn btn-dot btn-dot--danger m-r-4"
          [attr.aria-label]="'Remove from list' | translate"
          [tooltip]="'Remove from list' | translate"
          placement="top"
          container="body"
          type="button"
          data-cy="alarm-event-selector-list-item--remove-btn"
          [delay]="500"
          (click)="remove()"
        >
          <i c8yIcon="minus-circle"></i>
        </button>
      }
    </span>
  </div>

  @if (allowItemEdit) {
    <c8y-li-collapse>
      <div class="data-point-details">
        <c8y-alarm-event-attributes-form
          formControlName="details"
          [timelineType]="timelineType"
          [omitProperties]="omitProperties"
          [datapoints]="datapoints"
          [target]="formGroup.value.__target"
        ></c8y-alarm-event-attributes-form>
      </div>
    </c8y-li-collapse>
  }
</c8y-li>