<!--********************************************************************************
 * Copyright (c) 2015-2020 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="id"

           [(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)"
           (onRowClick)="onRowClick($event)"
>
           <!--
           [scrollable]="true"
           [style]="{width:'200px;'}"

           [sortField]="view?.getSortField()"
           [sortOrder]="view?.getSortOrder()"
           (sortFunction)="onSort($event)"

           (onColReorder)="onColReorder($event)"


           stateStorage="local"
           stateKey="state01" -->
    <!-- <ng-template pTemplate="colgroup" let-columns>
          <colgroup>
            <col style="width: 3em">
            <col style="width: 3em">
            <col style="width: 3em">
            <col *ngFor="let col of columns" [style]="{'width': col.width +'px;'}">
          </colgroup>
    </ng-template> -->
    <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>
        <!--
            [style]="{'width': col.width +'px;'}" -->
        <th *ngFor="let col of columns"
            [pSortableColumn]="col.field"
            pReorderableColumn
            pResizableColumn>
          {{col.header}}
          <p-sortIcon [field]="col.field"></p-sortIcon>
        </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">
          {{rowData[col.field]}}
        </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>