<div
  class="d-grid grid__row--1 fit-h"
  [ngClass]="{
    'grid__col--3-6-3--md': allowChangingContext && !hideSelection,
    'grid__col--8-4--md': !allowChangingContext && !hideSelection,
    'grid__col--4-8--md': allowChangingContext && hideSelection
  }"
>
  <div class="d-flex d-col p-relative bg-level-1" *ngIf="allowChangingContext">
    <c8y-asset-selector-miller
      class="d-contents"
      [(ngModel)]="contextAsset"
      [asset]="contextAsset"
      (onSelected)="selectionChanged($event)"
      [container]="''"
      [config]="{
        view: 'miller',
        groupsSelectable: true,
        columnHeaders: true,
        showChildDevices: true,
        showUnassignedDevices: true,
        singleColumn: true,
        search: allowSearch,
        showFilter: true
      }"
    ></c8y-asset-selector-miller>
  </div>
  <!-- center column -->
  <div class="inner-scroll bg-component">
    <ng-template #noDeviceEmptyState>
      <div class="p-16">
        <c8y-ui-empty-state
          [icon]="'c8y-data-points'"
          [title]="'No data points to display.' | translate"
          [subtitle]="'Select an asset from the list.' | translate"
          [horizontal]="true"
        ></c8y-ui-empty-state>
      </div>
    </ng-template>
    <ng-template #loadingData>
      <div class="p-16 text-center">
        <c8y-loading></c8y-loading>
      </div>
    </ng-template>
    <div class="bg-inherit" *ngIf="assetSelection | async as asset; else noDeviceEmptyState">
      <div class="p-l-16 p-r-16 p-t-8 p-b-8 sticky-top bg-inherit separator-bottom">
        <p class="text-medium text-truncate" [title]="'Available data points' | translate">
          {{ 'Available data points' | translate }}
        </p>
        <div class="input-group input-group-search m-t-4" id="search" *ngIf="!loadingDatapoints">
          <input
            class="form-control"
            type="search"
            placeholder="Search…"
            [ngModel]="searchString"
            (ngModelChange)="searchStringChanged($event)"
          />
          <span class="input-group-addon">
            <i c8yIcon="search" *ngIf="!searchString; else clearSearchString"></i>
            <ng-template #clearSearchString>
              <i class="text-muted" c8yIcon="times" (click)="searchStringChanged()"></i>
            </ng-template>
          </span>
        </div>
      </div>
      <ng-container *ngIf="filteredDatapoints$ | async as filteredDatapoints; else loadingData">
        <ng-container *ngIf="!loadingDatapoints; else loadingData">
          <ng-container *ngIf="datapoints$ | async as datapoints">
            <div class="p-16" *ngIf="!filteredDatapoints.length">
              <c8y-ui-empty-state
                [icon]="'c8y-data-points'"
                [title]="'No data points to display.' | translate"
                [subtitle]="
                  datapoints.length
                    ? (emptyStateSubtitleWhenNoMatchingDataPoints | translate)
                    : (emptyStateSubtitleWhenNoDataPointsInAsset | translate)
                "
                [horizontal]="true"
              ></c8y-ui-empty-state>
            </div>

            <c8y-list-group>
              <c8y-list-item
                class="sticky-top"
                style="top: 72px"
                *ngIf="
                  datapoints.length > maxNumberOfDatapoints &&
                  filteredDatapoints.length >= maxNumberOfDatapoints
                "
              >
                <div class="alert alert-warning m-b-0">
                  {{
                    'Due to the large number, only a subset of data points is displayed. Use search to narrow down the number of results.'
                      | translate
                  }}
                </div>
              </c8y-list-item>
              <c8y-datapoint-selector-list-item
                class="d-contents"
                [ngModel]="dp"
                [isSelected]="selectedDatapoints | includesDatapoint: dp"
                [datapointLibraryEntries]="datapointLibraryEntries"
                [disableTypeaheadIfSelected]="true"
                (added)="datapointAdded($event)"
                (removed)="datapointRemoved($event)"
                [highlightText]="searchStringChanges$ | async"
                *ngFor="let dp of filteredDatapoints; trackBy: trackByFn"
              ></c8y-datapoint-selector-list-item>
            </c8y-list-group>
          </ng-container>
        </ng-container>
      </ng-container>
    </div>
  </div>
  <!-- last column  -->
  <div class="inner-scroll bg-level-1" *ngIf="!hideSelection">
    <p
      class="text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate"
      [title]="'Selected data points' | translate"
      translate
    >
      Selected data points
    </p>
    <div
      class="d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16"
      *ngIf="selectedDatapoints?.length"
    >
      <div class="c8y-datapoint-pill" *ngFor="let selectedDp of selectedDatapoints">
        <button
          class="c8y-datapoint-pill__btn"
          type="button"
          [title]="'Remove' | translate"
          (click)="datapointRemoved(selectedDp)"
        >
          <i class="icon-14" c8yIcon="remove"></i>
        </button>
        <div
          class="c8y-datapoint-pill__label"
          [title]="selectedDp | datapointLabel: { doNotUseLabel: true, includeDevice: true }"
        >
          <i class="m-r-4 icon-14" c8yIcon="circle" [style.color]="selectedDp.color"></i>
          <span class="text-truncate">
            <span class="text-truncate">{{ selectedDp | datapointLabel }}</span>
            <small class="text-muted text-10" *ngIf="selectedDp?.__target?.name">
              {{ selectedDp?.__target?.name }}
            </small>
          </span>
        </div>
      </div>
    </div>
    <div class="p-r-8" *ngIf="!selectedDatapoints || !selectedDatapoints.length">
      <c8y-ui-empty-state
        [icon]="'c8y-data-points'"
        [title]="'No data points selected.' | translate"
        [subtitle]="
          'Select the asset, then on the available data points list, click on the plus button on the desired data point.'
            | translate
        "
        [horizontal]="true"
      ></c8y-ui-empty-state>
    </div>
  </div>
</div>