<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 p-r-0"
      [displayAsSwitch]="true"
      formControlName="__active"
      (click)="$event.stopPropagation()"
    ></c8y-li-checkbox>
  }

  <div class="d-flex a-i-center">
    <div
      class="c8y-list__item__colorpicker p-t-0 p-b-0 p-l-16"
      [title]="'Change color' | translate"
    >
      <div class="c8y-colorpicker">
        <input
          [attr.aria-label]="'Color' | translate"
          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"
      [attr.aria-expanded]="!li.collapsed"
      type="button"
      (click)="li.collapsed = !li.collapsed"
    >
      <span
        class="text-truncate"
        [title]="formGroup.value.details?.label"
      >
        <c8y-highlight
          [text]="formGroup.value.details?.label"
          [pattern]="highlightText"
          [shouldTrimPattern]="true"
        ></c8y-highlight>
      </span>
      @if (formGroup.value.__target) {
        <small class="text-truncate text-muted icon-flex">
          <i c8yIcon="exchange"></i>
          <span class="text-truncate">{{ formGroup.value.__target.name }}</span>
        </small>
      }
    </button>

    @if (!(isValid$ | async)) {
      <button
        class="btn btn-dot btn-dot--danger m-l-auto"
        [attr.aria-label]="'Invalid' | translate"
        [popover]="
          errorMessage
            ? errorMessage
            : ('Some entries are invalid. Check the input fields with red borders.' | translate)
        "
        placement="left"
        triggers="focus"
        container="body"
        type="button"
      >
        <i c8yIcon="warning"></i>
      </button>
    }
    @if (addButtonType === AddButtonTypes.addRemove) {
      <div class="m-l-auto a-s-center p-r-4">
        @if (isSelected) {
          <button
            class="btn btn-dot btn-dot--danger"
            [attr.aria-label]="'Remove' | translate"
            [tooltip]="'Remove from selected data points' | translate"
            type="button"
            [delay]="500"
            (click)="addOrRemoveItem()"
            [attr.data-cy]="'datapoint-selector-list-item--remove-datapoint-button'"
          >
            <i
              class="icon-20"
              c8yIcon="minus-circle"
            ></i>
          </button>
        }
        @if (!isSelected) {
          <button
            class="btn btn-dot text-primary"
            [attr.aria-label]="'Add to selected data points' | translate"
            [tooltip]="'Add to selected data points' | translate"
            type="button"
            [delay]="500"
            [disabled]="!(isValid$ | async)"
            (click)="addOrRemoveItem()"
            [attr.data-cy]="'datapoint-selector-list-item--add-datapoint-button'"
          >
            <i
              class="text-primary icon-20"
              c8yIcon="plus-circle"
            ></i>
          </button>
        }
      </div>
    }
    @if (addButtonType === AddButtonTypes.select) {
      <button
        class="btn btn-default btn-sm m-l-auto"
        [attr.aria-label]="'Select' | translate"
        [tooltip]="'Select data point' | translate"
        type="button"
        [delay]="500"
        (click)="addOrRemoveItem()"
      >
        {{ 'Select' | translate }}
      </button>
    }
  </div>

  @if (optionToRemove) {
    <c8y-li-action
      [icon]="'minus-circle'"
      [label]="'Remove from list' | translate"
      (click)="remove()"
    ></c8y-li-action>
  }
  @for (action of actions; track action) {
    <c8y-li-action
      [icon]="action.icon"
      [label]="action.label"
      (click)="action.callback(formGroup.value)"
    ></c8y-li-action>
  }
  @if (editable) {
    <c8y-li-collapse>
      <div class="data-point-details">
        <ul class="list-unstyled small m-b-16">
          <li class="p-t-4 p-b-4 d-flex separator-top-bottom">
            <label
              class="small m-b-0 m-r-8 a-s-start text-muted"
              translate
            >
              Fragment
            </label>
            <span
              class="m-l-auto text-truncate"
              title="{{ formGroup.value.fragment }}"
            >
              <c8y-highlight
                [text]="formGroup.value.fragment"
                [pattern]="highlightText"
                [shouldTrimPattern]="true"
              ></c8y-highlight>
            </span>
          </li>
          <li class="p-t-4 p-b-4 d-flex separator-bottom">
            <label
              class="small m-b-0 m-r-8 a-s-start text-muted"
              translate
            >
              Series
            </label>
            <span
              class="m-l-auto text-truncate"
              title="{{ formGroup.value.series }}"
            >
              <c8y-highlight
                [text]="formGroup.value.series"
                [pattern]="highlightText"
                [shouldTrimPattern]="true"
              ></c8y-highlight>
            </span>
          </li>
        </ul>
        @if (datapointLibraryEntries && datapointLibraryEntries | async; as libraryEntries) {
          <div class="form-group form-group-sm">
            <label>
              {{ 'Data point template' | translate }}
              <button
                class="btn-help btn-help--sm"
                [attr.aria-label]="'Help' | translate"
                [popover]="datapointHintPopoverTemplate"
                placement="top"
                triggers="focus"
                type="button"
                (click)="$event.stopPropagation()"
              ></button>
            </label>

            <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="input-group input-group-sm">
              @if (datapointLibraryEntries) {
                <c8y-typeahead
                  class="flex-grow"
                  [placeholder]="'No template' | translate"
                  [ngModel]="formGroup.value.__template ? formGroup.value.details : undefined"
                  [ngModelOptions]="{ standalone: true }"
                  (onSearch)="setPipe($event)"
                  [displayProperty]="'label'"
                  [hideNew]="true"
                  [disabled]="isSelected && disableTypeaheadIfSelected"
                >
                  <c8y-li
                    class="p-l-8 p-r-8 c8y-list__item--link interact"
                    *c8yFor="
                      let item of datapointLibraryEntries;
                      loadMore: 'auto';
                      pipe: filterPipe;
                      notFound: notFoundTemplate
                    "
                    (click)="dataPointTemplateSelected(item)"
                    [active]="formGroup.value.__template === item.id"
                    [attr.role]="'menuitem'"
                  >
                    <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>
                    @if (pattern.length > 0) {
                      <c8y-li class="bg-level-2 p-8">
                        <span>No match found.</span>
                      </c8y-li>
                    }
                  </ng-template>
                </c8y-typeahead>
              }
              <div class="input-group-btn">
                @if (formGroup.value.__template) {
                  <button
                    class="btn btn-default"
                    [attr.aria-label]="'Info' | translate"
                    [popover]="datapointOverviewPopoverTemplate"
                    placement="left"
                    triggers="focus"
                    container="body"
                    type="button"
                  >
                    <i
                      class="text-info"
                      c8yIcon="info"
                    ></i>
                  </button>
                }
              </div>
              <div class="input-group-btn">
                @if (formGroup.value.__template && hasUnlinkTemplateOption) {
                  <button
                    class="btn btn-default"
                    [attr.aria-label]="'Unlink data point template' | translate"
                    tooltip="{{ 'Unlink data point template' | translate }}"
                    placement="left"
                    container="body"
                    type="button"
                    [delay]="500"
                    [adaptivePosition]="false"
                    (click)="unlinkDatapointTemplate()"
                  >
                    <i c8yIcon="unlink"></i>
                  </button>
                }
              </div>
            </div>
          </div>
        }
        <ng-template #datapointOverviewPopoverTemplate>
          <c8y-datapoint-template-popover
            [datapoint]="formGroup.value.details"
          ></c8y-datapoint-template-popover>
        </ng-template>
        @if (defaultFormOptions) {
          <c8y-datapoint-attributes-form
            [showTarget]="defaultFormOptions.showTarget"
            [showRange]="defaultFormOptions.showRange"
            [showYellowRange]="defaultFormOptions.showYellowRange"
            [showRedRange]="defaultFormOptions.showRedRange"
            [showChart]="defaultFormOptions.showChart"
            [showFormIfTemplateWasSelected]="defaultFormOptions.showFormIfTemplateWasSelected"
            [selectableChartRenderTypes]="defaultFormOptions.selectableChartRenderTypes"
            [selectableChartLineTypes]="defaultFormOptions.selectableChartLineTypes"
            [selectableAxisTypes]="defaultFormOptions.selectableAxisTypes"
            [showErrorsImmediately]="true"
            formControlName="details"
          ></c8y-datapoint-attributes-form>
        }
      </div>
    </c8y-li-collapse>
  }
</c8y-li>