<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">
        <c8y-loading></c8y-loading>
      </div>
    </ng-template>
    <div *ngIf="assetSelection | async as asset; else noDeviceEmptyState" class="bg-inherit">
      <p
        class="
          text-medium
          p-l-16 p-r-16 p-t-8 p-b-8
          text-truncate
          sticky-top
          bg-inherit
          separator-bottom
        "
        [title]="'Available data points' | translate"
      >
        {{ 'Available data points' | translate }}
      </p>
      <ng-container *ngIf="datapoints$ | async as data; else loadingData">
        <div class="p-16" *ngIf="!data.length && !loadingDatapoints">
          <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 with data points from the list.</small>
            </div>
          </div>
        </div>

        <c8y-list-group *ngIf="!loadingDatapoints; else loadingData">
          <div *ngIf="data?.length" id="search" class="input-group input-group-search p-4">
            <input
              type="search"
              class="form-control"
              placeholder="Search…"
              [(ngModel)]="searchString"
            />
            <span class="input-group-addon">
              <i c8yIcon="search" *ngIf="!searchString"></i>
              <i
                c8yIcon="times"
                class="text-muted"
                *ngIf="searchString"
                (click)="searchString = ''"
              ></i>
            </span>
          </div>
          <c8y-datapoint-selector-list-item
            [ngModel]="dp"
            [isSelected]="selectedDatapoints | includesDatapoint: dp"
            [datapointLibraryEntries]="datapointLibraryEntries"
            [disableTypeaheadIfSelected]="true"
            (added)="datapointAdded($event)"
            (removed)="datapointRemoved($event)"
            [highlightText]="searchString"
            class="d-contents"
            *ngFor="let dp of data | filterDatapoints: searchString"
          ></c8y-datapoint-selector-list-item>
        </c8y-list-group>
      </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>