<div class="c8y-cq-440">
  <div
    class="hidden-xs c8y-list__item c8y-list--timeline hidden-cq"
    [ngClass]="{ 'separator-top-bottom': devicesColumnHeaders.length > 0 }"
  >
    <div class="d-flex container-fluid">
      <div class="c8y-list--timeline__item__date"></div>
      <div class="c8y-list__item__block flex-grow min-width-0">
        <div class="c8y-list__item__body">
          <div class="d-flex row">
            <ng-container *ngIf="hasMultipleDatapoints">
              <div
                class="min-width-0"
                [title]="'Device' | translate"
                [c8yDynamicColumn]="devicesColumnHeaders.length"
              >
                <span class="text-medium text-truncate">
                  {{ 'Device' | translate }}
                </span>
              </div>
            </ng-container>
            <!-- Data points column headers -->
            <ng-container *ngFor="let header of devicesColumnHeaders">
              <div
                class="min-width-0"
                title="{{ header | columnTitle }}"
                [c8yDynamicColumn]="devicesColumnHeaders.length"
              >
                <span class="text-medium text-truncate">{{ header.label }} {{ header.unit }}</span>
              </div>
            </ng-container>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- The record list -->
<ng-container *ngIf="!isLoading; else loading">
  <ng-container *ngIf="!hasNoPermissionsToReadAnyMeasurement; else missingAllPermissions">
    <ng-container *ngIf="datapointsTableItems.length; else emptyState">
      <c8y-list-group
        class="p-t-8 flex-grow c8y-cq-440"
        c8yVirtualScrollListener
        (scrolled)="onListScrolled()"
        (scrolledToTop)="onListScrolledToTop()"
      >
        <c8y-li-timeline
          *c8yFor="
            let tableItem of { data: datapointsTableItems, res: null };
            enableVirtualScroll: true;
            virtualScrollElementSize: 40;
            virtualScrollStrategy: 'fixed'
          "
        >
          {{ tableItem.dateAndTime | c8yDate: 'mediumDate' }}
          {{
            tableItem.dateAndTime
              | c8yDate: 'mediumTime'
              | adjustAggregatedTimeRange: aggregationType
          }}
          <c8y-li>
            <c8y-li-body>
              <div class="d-flex row">
                <div
                  class="min-width-0"
                  [c8yDynamicColumn]="devicesColumnHeaders.length"
                  *ngIf="devicesColumnHeaders.length > 1"
                  [attr.data-label]="'Device' | translate"
                >
                  <div
                    class="text-truncate"
                    title="{{ tableItem.deviceName }}"
                  >
                    {{ tableItem.deviceName }}
                  </div>
                </div>
                <!-- Data point value row cells -->
                <ng-container *ngFor="let row of tableItem.rowItems">
                  <ng-container *ngIf="row !== null; else emptyRowContent">
                    <ng-container [ngSwitch]="row.renderType">
                      <div
                        [c8yDynamicColumn]="devicesColumnHeaders.length"
                        [ngClass]="row.value.min ?? null | applyRangeClass: getRangeValues(row)"
                        *ngSwitchCase="'min'"
                        [attr.data-label]="row.label"
                      >
                        <div
                          class="text-truncate"
                          title="{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}"
                        >
                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}
                        </div>
                      </div>
                      <div
                        class="col-md-4"
                        [ngClass]="row.value.min ?? null | applyRangeClass: getRangeValues(row)"
                        *ngSwitchCase="'max'"
                      >
                        <div
                          class="text-truncate"
                          title="{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}"
                        >
                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}
                        </div>
                      </div>
                      <div
                        [c8yDynamicColumn]="devicesColumnHeaders.length"
                        *ngSwitchCase="'area'"
                      >
                        <span
                          class="text-truncate"
                          title="{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}"
                          [ngClass]="row.value.min ?? null | applyRangeClass: getRangeValues(row)"
                        >
                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}
                        </span>
                        ...
                        <span
                          class="text-truncate"
                          title="{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}"
                          [ngClass]="row.value.max ?? null | applyRangeClass: getRangeValues(row)"
                        >
                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}
                        </span>
                      </div>
                      <div
                        [c8yDynamicColumn]="devicesColumnHeaders.length"
                        *ngSwitchDefault
                      >
                        <span
                          class="text-truncate"
                          title="{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}"
                          [ngClass]="row.value.min ?? null | applyRangeClass: getRangeValues(row)"
                        >
                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}
                        </span>
                      </div>
                    </ng-container>
                  </ng-container>
                  <ng-template #emptyRowContent>
                    <div [c8yDynamicColumn]="devicesColumnHeaders.length"></div>
                  </ng-template>
                </ng-container>
              </div>
            </c8y-li-body>
          </c8y-li>
        </c8y-li-timeline>
      </c8y-list-group>
    </ng-container>
  </ng-container>
</ng-container>
<ng-template #loading>
  <c8y-loading></c8y-loading>
</ng-template>
<ng-template #emptyState>
  <div class="p-relative p-l-24">
    <c8y-ui-empty-state
      [icon]="'c8y-alert-idle'"
      [title]="'No data to display.' | translate"
      [horizontal]="true"
      data-cy="datapoints-table-list--empty-state"
    >
      <p c8y-guide-docs>
        <small translate>
          Find out more in the
          <a c8y-guide-href="/docs/cockpit/widgets-collection/#data-point-table">
            user documentation
          </a>
          .
        </small>
      </p>
    </c8y-ui-empty-state>
  </div>
</ng-template>
<ng-template #missingAllPermissions>
  <div class="p-t-24 p-r-16 p-l-16 p-b-16 d-flex">
    <div class="center-block">
      <c8y-dynamic-component-alerts
        [alerts]="missingAllPermissionsAlert"
      ></c8y-dynamic-component-alerts>
    </div>
  </div>
</ng-template>