<div class="d-grid grid__row--1 fit-h" [ngClass]="allowChangingContext ? 'grid__col--3-6-3--md' : 'grid__col--8-4--md'">
  <div class="d-flex d-col p-relative bg-gray-white" *ngIf="allowChangingContext">
    <c8y-asset-selector-miller
      [(ngModel)]="contextAsset"
      [asset]="contextAsset"
      (onSelected)="selectionChanged($event)"
      [container]="''"
      [config]="{
        view: 'miller',
        groupsSelectable: true,
        columnHeaders: true,
        showChildDevices: true,
        showUnassignedDevices: true,
        singleColumn: true,
        search: allowSearch
      }"
      class="d-contents"
    ></c8y-asset-selector-miller>
  </div>
  <!-- center column -->
  <div class="inner-scroll bg-component">
    <ng-template #noDeviceEmptyState>
      <div class="p-16">
        <div class="c8y-empty-state text-left">
          <h1 class="c8y-icon c8y-icon-data-points c8y-icon-duocolor"></h1>
          <div>
            <p>
              <strong translate>No data points to display.</strong>
            </p>
            <small translate>Select an asset from the list.</small>
          </div>
        </div>
      </div>
    </ng-template>
    <ng-template #loadingData>
      <div class="p-16 text-center">
        <c8y-loading></c8y-loading>
      </div>
    </ng-template>
    <div *ngIf="assetSelection | async as asset; else noDeviceEmptyState" class="bg-inherit">
      <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 *ngIf="!loadingDatapoints" id="search" class="input-group input-group-search m-t-4">
          <input
            type="search"
            class="form-control"
            placeholder="Search…"
            [ngModel]="searchString"
            (ngModelChange)="searchStringChanged($event)"
          />
          <span class="input-group-addon">
            <i c8yIcon="search" *ngIf="!searchString; else clearSearchString"></i>
            <ng-template #clearSearchString>
                <i
                  c8yIcon="times"
                  class="text-muted"
                  *ngIf="searchString"
                  (click)="searchString = ''"
                ></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 ? ('Try another search term.' | translate) : ('Select an asset with data points from the list.' | translate)"
                [horizontal]="true"
              ></c8y-ui-empty-state>
            </div>



            <c8y-list-group>
              <c8y-list-item *ngIf="datapoints.length > maxNumberOfDatapoints && filteredDatapoints.length >= maxNumberOfDatapoints"
                class="sticky-top"
                style="top: 72px"
                translate
              >
                <div class="alert alert-warning m-b-0">
                  {{ 'Due to the large number, only a subset of data points are displayed. Use search to narrow down the number of results.' | translate}}
                </div>
              </c8y-list-item>
              <c8y-datapoint-selector-list-item
                [ngModel]="dp"
                [isSelected]="selectedDatapoints | includesDatapoint: dp"
                [datapointLibraryEntries]="datapointLibraryEntries"
                [disableTypeaheadIfSelected]="true"
                (added)="datapointAdded($event)"
                (removed)="datapointRemoved($event)"
                [highlightText]="searchStringChanges$ | async"
                class="d-contents"
                *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-gray-white">
    <p
      class="text-medium m-b-4 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-b-16">
      <div class="c8y-datapoint-pill" *ngFor="let selectedDp of selectedDatapoints">
        <button
          [title]="'Remove' | translate"
          type="button"
          class="c8y-datapoint-pill__btn"
          (click)="datapointRemoved(selectedDp)"
        >
          <i c8yIcon="remove" class="icon-14"></i>
        </button>
        <div
          class="c8y-datapoint-pill__label"
          [title]="selectedDp | datapointLabel: { doNotUseLabel: true, includeDevice: true }"
        >
          <i
            c8yIcon="circle"
            class="m-r-4 icon-14"
            [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-16" *ngIf="!selectedDatapoints || !selectedDatapoints.length">
      <div class="c8y-empty-state text-left">
        <h1 class="c8y-icon c8y-icon-data-points c8y-icon-duocolor"></h1>
        <p>
          <strong translate>No data points selected.</strong>
        </p>
      </div>
    </div>
  </div>
</div>