<p-table
  class="table"
  dataKey="id"
  [scrollHeight]="'flex'"
  [autoLayout]="false"
  [columns]="columns"
  [selectionMode]="selectionMode"
  [rows]="rowsNumber"
  [value]="tableData"
  [selection]="selection"
  [reorderableColumns]="reorderableColumns"
  [resizableColumns]="resizableColumns && !minView"
  columnResizeMode="fit"
  [scrollable]="resizableColumns"
  [virtualScroll]="virtualScroll"
  [virtualRowHeight]="rowHeight"
  (onColReorder)="onColReorder($event)"
  [first]="first"
  [rowHover]="true"
  [contextMenu]="cm"
  (firstChange)="onFirstChanged($event)"
  (onSort)="onSortChanged($event)"
  (onRowSelect)="onRowSelected($event)"
  (onRowUnselect)="onRowDeselected($event)"
  (onContextMenuSelect)="openContext($event)"
  (onColResize)="colResize($event)"
  [rowTrackBy]="trackByFunction"
>
  <ng-template pTemplate="colgroup" let-columns>
    <colgroup *ngIf="!minView; else: cardColGroup">
      <col *ngFor="let col of columns" [style.width]="col.style?.width">
    </colgroup>
    <ng-template #cardColGroup>
      <colgroup>
        <col style="width: 100%">
      </colgroup>
    </ng-template>
  </ng-template>
  <ng-template pTemplate="emptymessage">
    <tr class="no-data-row">
      <td [attr.colspan]="columns.length" class="no-data" [class.simple]="simple">
        {{noDataMessage}}
      </td>
    </tr>
  </ng-template>

  <ng-template pTemplate="header" let-columns *ngIf="!noHeader">
    <tr class="header ui-state-default" *ngIf="!minView; else cardHeader">
      <th *ngFor="let col of columns"
          [attr.data-col-id]="col.id"
          pReorderableColumn
          resizableColumn
          [pResizableColumnDisabled]="col?.disableDrag"
          [pReorderableColumnDisabled]="!reorderableColumns || col?.disableDrag"
          [class.disable-drag]="!reorderableColumns || col?.disableDrag"
          [class.resize-enabled]="resizableColumns"
          [class.resize-disabled]="!resizableColumns"
          [class.selected-col-header]="col?.disablePointerEvents"
          [style.min-width]="col.style?.minWidth"
          [style.max-width]="col.style?.maxWidth"
      >
        <ng-container [ngSwitch]="col?.headerType">
          <ng-container *ngSwitchCase="ColHeaderTypeEnum.sortFilter">
            <ng-container *ngTemplateOutlet="sortFilterTemplate; context: {$implicit: col}"></ng-container>
          </ng-container>
          <ng-container *ngSwitchCase="ColHeaderTypeEnum.checkBox">
            <ng-container *ngTemplateOutlet="checkboxTemplate; context: {$implicit: col}"></ng-container>
          </ng-container>
          <ng-container *ngSwitchDefault>
            <div class="col-header">{{col.header}}</div>
          </ng-container>
        </ng-container>
      </th>
    </tr>
    <ng-template #cardHeader>
      <div class="table-header">
        <div class="table-header-title">{{minimizedTableHeader}}</div>
        <div class="table-actions">
          <div class="recent-title">
            <sm-menu header="SORTED BY " class="menu" smMenuClass="bigger-width">
              <div *ngFor="let col of sortableCols">
                <sm-menu-item [itemLabel]="col.header"
                              [sortOrder]="getOrder(col.id)"
                              (itemClicked)="sortItemClick($event, col.id)"></sm-menu-item>
              </div>
            </sm-menu>
          </div>
          <ng-container *ngTemplateOutlet="cardHeaderTemplate"></ng-container>
        </div>
      </div>
    </ng-template>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
    <tr
      [pSelectableRow]="rowData"
      [pContextMenuRow]="rowData"
      [style.height.px]="minView ? this.cardHeight : this.rowHeight"
      [class.even]="(index + 1) % 2 === 0"
      [class.checked]="isRowSelected(rowData)"
      [class.simple]="simple"
      [class.contexted]="activeContextRow?.id ===rowData?.id && contextMenuOpen"
      [class.selected]="selectionMode==='single'? selection?.id === rowData?.id : selection?.includes(rowData)"
      [class.cards-table]="minView"
      class="pointer"
      (click)="!minView && rowClicked.emit({e: $event, data: rowData})"
    >
      <ng-container *ngIf="!minView; else cardBody">
        <td
          *ngFor="let col of columns; index as i"
          [class.ui-resizable-column]="resizableColumns"
          [class.simple]="simple"
          [style.min-width]="col.style?.minWidth"
          [style.max-width]="col.style?.maxWidth"
        >
          <ng-container *ngIf="bodyTemplate">
            <ng-container *ngTemplateOutlet="bodyTemplate; context: {$implicit: col, rowData: rowData, rowIndex: index}">
            </ng-container>
          </ng-container>
          <ng-container *ngIf="!bodyTemplate">
            {{getBodyData(rowData, col)}}
          </ng-container>
        </td>
      </ng-container>
     <ng-template #cardBody>
        <td class="pointer p-0" role="button">
          <ng-container
            *ngTemplateOutlet="cardTemplate;  context: {rowData: rowData, rowNumber: index, selected:  (selectionMode==='single'? selection?.id === rowData.id :  selection?.includes(rowData))}">
          </ng-container>
        </td>
      </ng-template>
    </tr>
    <tr *ngIf="index === rowsNumber - 1 && lazyLoading && !noMoreData" class="table-load-more">
      <td [colSpan]="columns.length" class="load-more-wrapper">
        <button #loadButton
                class="btn btn-primary"
                (click)="loadMore()"
                [style.margin-left.px]="buttonLeft">
          <i *ngIf="loading" class="load-spinner"></i>
          {{loading ? 'LOADING...' : 'LOAD MORE' }}
        </button>
      </td>
    </tr>
  </ng-template>
</p-table>
<p-contextMenu #cm [model]="menuItems" class="d-none"></p-contextMenu>
