<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 *ngIf="showAddRemoveButton" class="a-s-center p-r-4">
    <button
      *ngIf="isSelected"
      class="btn btn-clean text-primary"
      (click)="addOrRemoveItem()"
      [title]="'Remove' | translate"
    >
      <i c8yIcon="minus-circle" class="text-danger"></i>
    </button>
    <button
      *ngIf="!isSelected"
      class="btn btn-clean text-primary"
      (click)="addOrRemoveItem()"
      [title]="'Select' | translate"
    >
      <i c8yIcon="plus-circle" class="text-primary"></i>
    </button>
  </c8y-li-icon>

  <c8y-li-checkbox
    *ngIf="showActiveToggle"
    [displayAsSwitch]="true"
    formControlName="__active"
    (click)="$event.stopPropagation()"
    class="a-s-center p-r-0"
  ></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]="'Change color' | translate">
      <div class="c8y-colorpicker">
        <input type="color" formControlName="color" (click)="$event.stopPropagation()" />
        <span [style.background-color]="formGroup.value.color"></span>
      </div>
    </div>
    <button
      class="btn-clean data-point-label text-truncate"
      [title]="formGroup.value.details?.label"
      (click)="li.collapsed = !li.collapsed"
    >
      <span class="text-truncate">
        <c8y-highlight
          [text]="formGroup.value.details?.label"
          [pattern]="highlightText"
          [shouldTrimPattern]="true"
        ></c8y-highlight>
      </span>
      <small class="text-truncate text-muted icon-flex" *ngIf="formGroup.value.__target">
        <i c8yIcon="exchange"></i>
        <span class="text-truncate">{{ formGroup.value.__target.name }}</span>
      </small>
    </button>

    <button
      class="btn-clean m-l-auto"
      *ngIf="!(isValid$ | async)"
      [popover]="'Some entries are invalid. Check the input fields with red borders.' | translate"
      container="body"
      [outsideClick]="true"
    >
      <i class="text-danger" c8yIcon="warning"></i>
    </button>
  </div>

  <c8y-li-action
    *ngIf="optionToRemove"
    [icon]="'minus-circle'"
    [label]="'Remove from list' | translate"
    (click)="remove(formGroup.value)"
  >
  </c8y-li-action>
  <c8y-li-action
    *ngFor="let action of actions"
    [icon]="action.icon"
    [label]="action.label"
    (click)="action.callback(formGroup.value)"
  ></c8y-li-action>
  <c8y-li-collapse>
    <div class="data-point-details">
      <ul class="list-unstyled small m-b-16">
        <li class="p-t-4 p-b-4 flex-row separator-top-bottom">
          <label class="small m-b-0 m-r-8 flex-item-v-start text-muted" translate>Fragment</label>
          <span class="flex-item-right">
            <c8y-highlight
              [text]="formGroup.value.fragment"
              [pattern]="highlightText"
              [shouldTrimPattern]="true"
            ></c8y-highlight>
          </span>
        </li>
        <li class="p-t-4 p-b-4 flex-row separator-bottom">
          <label class="small m-b-0 m-r-8 flex-item-v-start text-muted" translate>Series</label>
          <span class="flex-item-right">
            <c8y-highlight
              [text]="formGroup.value.series"
              [pattern]="highlightText"
              [shouldTrimPattern]="true"
            ></c8y-highlight>
          </span>
        </li>
      </ul>
      <div
        class="form-group"
        *ngIf="datapointLibraryEntries && datapointLibraryEntries | async as libraryEntries"
      >
        <label class="d-inline-block" translate> Data point template </label>
        <button
          class="btn btn-clean"
          [popover]="datapointHintPopoverTemplate"
          (click)="$event.stopPropagation()"
          container="body"
          [outsideClick]="true"
        >
          <i [c8yIcon]="'question-circle-o'" class="m-l-4 text-info"></i>
        </button>

        <ng-template #datapointHintPopoverTemplate>
          {{
            'Using a data point template sets color, label, unit and ranges. Removing the template allows you to set the values manually.'
              | translate
          }}
        </ng-template>
        <div class="d-flex">
          <c8y-typeahead
            [placeholder]="'No template' | translate"
            [ngModel]="formGroup.value.__template ? formGroup.value.details : undefined"
            [ngModelOptions]="{ standalone: true }"
            (onSearch)="setPipe($event)"
            [displayProperty]="'label'"
            [hideNew]="true"
            *ngIf="datapointLibraryEntries"
            [disabled]="isSelected && disableTypeaheadIfSelected"
            class="flex-grow"
          >
            <c8y-li
              *c8yFor="
                let item of datapointLibraryEntries;
                loadMore: 'auto';
                pipe: filterPipe;
                notFound: notFoundTemplate
              "
              class="p-l-8 p-r-8 c8y-list__item--link interact"
              (click)="dataPointTemplateSelected(item)"
              [active]="formGroup.value.__template === item.id"
            >
              <c8y-highlight [text]="item.c8y_Kpi?.label" [pattern]="pattern"></c8y-highlight>
              <c8y-li-icon icon="circle" [style.color]="item.c8y_Kpi?.color"></c8y-li-icon>
            </c8y-li>
            <ng-template #notFoundTemplate>
              <c8y-li class="bg-gray-lighter p-8" *ngIf="pattern.length > 0">
                <span>No match found.</span>
              </c8y-li>
            </ng-template>
          </c8y-typeahead>
          <button
            *ngIf="formGroup.value.__template"
            class="btn btn-info btn-xs btn-icon a-s-center m-l-8"
            [popover]="datapointOverviewPopoverTemplate"
            placement="left"
            container="body"
            [outsideClick]="true"
            [title]="'Info' | translate"
          >
            <i c8yIcon="info" class="text-info"></i>
          </button>
          <button
            *ngIf="formGroup.value.__template && hasUnlinkTemplateOption"
            class="btn btn-danger btn-xs btn-icon a-s-center m-l-8"
            (click)="unlinkDatapointTemplate()"
            [title]="'Unlink datapoint template' | translate"
          >
            <i c8yIcon="unlink"></i>
          </button>
        </div>
      </div>
      <ng-template #datapointOverviewPopoverTemplate>
        <c8y-datapoint-template-popover
          [datapoint]="formGroup.value.details"
        ></c8y-datapoint-template-popover>
      </ng-template>
      <c8y-datapoint-attributes-form
        *ngIf="defaultFormOptions"
        [showTarget]="defaultFormOptions.showTarget"
        [showRange]="defaultFormOptions.showRange"
        [showYellowRange]="defaultFormOptions.showYellowRange"
        [showRedRange]="defaultFormOptions.showRedRange"
        [showChart]="defaultFormOptions.showChart"
        [showFormIfTemplateWasSelected]="defaultFormOptions.showFormIfTemplateWasSelected"
        formControlName="details"
      ></c8y-datapoint-attributes-form>
    </div>
  </c8y-li-collapse>
</c8y-li>