<!--********************************************************************************
 * Copyright (c) 2015, 2023 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 *
 ********************************************************************************-->
<div *ngIf="loading" style="text-align: center; margin: 1em">
  <div class="fa fa-spinner fa-pulse fa-fw"></div>
  <!--   Suchergebnisse werden geladen-->
  {{ "tableview.tableview.loading-search-results" | translate }}
</div>
<div *ngIf="!loading" style="overflow-x: auto">
  <p-contextMenu #cm [model]="menuItems" appendTo="body"></p-contextMenu>
  <p-table
    [value]="viewRows"
    [columns]="turboViewColumns"
    [resizableColumns]="true"
    columnResizeMode="expand"
    [reorderableColumns]="true"
    sortMode="single"
    [customSort]="true"
    (sortFunction)="customSort($event)"
    [sortField]="view?.sortField"
    [sortOrder]="view?.sortOrder"
    [(selection)]="selectedViewRows"
    (dataKey)="(idField)"
    [(contextMenuSelection)]="menuSelectedRow"
    [contextMenu]="cm"
    [paginator]="true"
    [pageLinks]="3"
    [rows]="10"
    [rowsPerPageOptions]="[3, 10, 20, 50, 100, 200, 500, 1000]"
    (onColReorder)="onColReorder($event)"
    (onColResize)="onColResize($event)"
    (onSort)="onSort($event)"
    (onContextMenuSelect)="onContextMenuSelect($event)"
    (onRowSelect)="onSelectionChanged($event)"
    (onRowUnselect)="onSelectionChanged($event)"
    styleClass="table-hover p-datatable-gridlines"
    responsiveLayout="scroll"
    paginatorDropdownAppendTo="body"
  >
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th style="width: 3em">
          <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
        </th>
        <th style="width: 3em"></th>
        <th style="width: 3em"></th>
        <th
          *ngFor="let col of columns"
          [pSortableColumn]="col.field"
          pReorderableColumn
          pResizableColumn
          pTooltip="{{ col.type | mdmTranslate | async }}"
        >
          <div class="table-view-col-header">
            {{ col.type | mdmTranslate : undefined : col.attribute | async }}
            <p-sortIcon [field]="col.field"></p-sortIcon>
          </div>
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr [pSelectableRow]="rowData" [pContextMenuRow]="rowData">
        <td>
          <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
        </td>
        <td>
          <a
            class="icon"
            [ngClass]="getNodeClass(rowData.type)"
            title="{{ getRowTitle(rowData) }}"
            style="color: black; cursor: pointer"
            (click)="openInTree(rowData, $event)"
          >
          </a>
        </td>
        <td>
          <span
            class="fa"
            [ngClass]="{
              'fa-shopping-cart': isShopable,
              'fa-times': isRemovable
            }"
            style="cursor: pointer"
            title="{{ getIconTitle() | translate }}"
            (click)="functionalityProvider(rowData)"
          >
          </span>
        </td>
        <td *ngFor="let col of columns" [pTooltip]="tooltipValue(rowData[col.field]?.measured)" tooltipPosition="top">
          <div style="float: left">
            {{ value(rowData[col.field]?.measured) }}
          </div>
          <div style="float: right" *ngIf="rowData[col.field]?.ordered !== rowData[col.field]?.measured">
            <span
              class="fa fa-question-circle-o"
              style="cursor: pointer"
              title="{{ 'tableview.tableview.tooltip-values' | translate : rowData[col.field] }}"
            >
            </span>
          </div>
        </td>
      </tr>
    </ng-template>

    <!-- add 3 cols for the button columns -->
    <ng-template pTemplate="emptymessage" let-columns>
      <tr>
        <td [attr.colspan]="columns?.length + 3">
          {{ "tableview.tableview.no-records-found" | translate }}
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>