<div class="tableContainer tableContainer{{tableId}} row no-gutters" infinite-scroll [scrollWindow]="false"
  (scrolled)="onInfinityScrollDown()" (scrolledUp)="onInfinityScrollUp()" [nbSpinner]="processing"
  nbSpinnerStatus="success" nbSpinnerSize="giant"
  [ngClass]="{'colResizing': colDragResizing,'overflow-x': !settings.autoWidth}"
  rbjFileDragDrop="{{settings.enableFileDrop}}" (onFileDropped)="fileDropped(null,$event)">
  <button class="btnClearAllFilter" nbButton hero status="danger" size="small" (click)="clearAllFilters()"
    *ngIf="anyFiltered">
    <nb-icon pack="eva" icon="sync-outline" class="m-0"></nb-icon><span class="clearTooltip">Clear All Filters</span>
  </button>
  <div class="d-flex">
    <div *ngIf="settings.showGroupsMenu && anyGroups">
      <rbj-fancy-group-menu [settings]="settings" [groups]="groups" [(draggingRow)]="draggingRow"
        [(droppingOnGroupKey)]="droppingOnGroupKey" [filteringGroupKey]="filteringGroupKey"
        (itemDropInGroup)="itemDropInGroup.emit($event)" (clickOnGroup)="filterGroupKey($event)"
        (clickOnDeleteGroup)="onClickOnDeleteGroup.emit($event)"
        (onFileDroppedInGroup)="onFileDroppedInGroup.emit($event)" [usingAltColor]="usingAltColor">
        <ng-content select="[fancy-group-menu-header]"></ng-content>
      </rbj-fancy-group-menu>
    </div>
    <div>

      <table #table class="fancy" (keydown)="keyHandler($event)" tabindex="0" (focus)="focusLastAccessFilter()"
        [ngClass]="{'w-100': settings && settings.autoWidth}">

        <colgroup>
          <col *ngIf="anyGroups" span="1" style="width: 25px;">
          <ng-container *ngFor="let column of visibleColumns">
            <col span="1" [style.width]="column.uiWidth">

          </ng-container>
        </colgroup>

        <thead *ngIf="settings.showHeader">
          <tr>
            <th *ngIf="anyGroups"></th>
            <th id="{{tableId}}col-{{i}}" *ngFor="let column of visibleColumns;let i=index">
              <div (click)="setSort(column)" title="{{column.title}}">
                {{column.title}}
                <nb-icon pack="eva" *ngIf="sortColumn && sortColumn.name ==column.name"
                  [icon]="sortColumn.sortDirection === 'asc' ? 'chevron-down' : 'chevron-up'">
                </nb-icon>
              </div>

              <span #dragHandleRight *ngIf="settings.resizingColumn" cdkDragLockAxis="x" class="dragHandle right"
                cdkDrag (cdkDragStarted)="colResizeDragStart(column,$event)"
                (cdkDragMoved)="colResizeDragResize(column,$event)" (cdkDragEnded)="colResizeEnd(column,$event)"></span>
            </th>
          </tr>
          <tr *ngIf="settings.showFilters">
            <th *ngIf="anyGroups" class="text-center px-0">
              <button nbButton ghost size="small" (click)="toggleExpandAll()" class="px-0"
                [nbTooltip]="anyExpanded ? 'Collapse All' : 'Expand All'">
                <nb-icon pack="eva" [icon]="anyExpanded ? 'arrowhead-up' : 'arrowhead-down'"></nb-icon>
              </button>
            </th>
            <th *ngFor="let column of visibleColumns">
              <ng-container [ngSwitch]="column.type">
                <ng-container *ngSwitchCase="'date'">
                  <input type="text" nbInput fullWidth size="tiny" [placeholder]="column.title"
                    [(ngModel)]="column.dateRange" [nbDatepicker]="filterDatePicker"
                    (ngModelChange)="filteringDebounceTimer.resetTimer()" [initFocus]="column.initFocusFilterInput"
                    (focus)="setFocusedFilterInput(null)">
                  <nb-rangepicker #filterDatePicker>
                  </nb-rangepicker>
                </ng-container>
                <ng-container *ngSwitchCase="'dateTime'">
                  <input type="text" nbInput fullWidth size="tiny" [placeholder]="column.title"
                    [(ngModel)]="column.dateRange" [nbDatepicker]="filterDatePicker"
                    (ngModelChange)="filteringDebounceTimer.resetTimer()" [initFocus]="column.initFocusFilterInput"
                    (focus)="setFocusedFilterInput(null)">
                  <nb-rangepicker #filterDatePicker>
                  </nb-rangepicker>
                </ng-container>
                <ng-container *ngSwitchCase="'checkall'">

                  <div align="center">
                    <!-- <kendo-checkbox #checkAllBox class="ftCheck" name="{{column.name}}-uiCheckAll"
                      [(ngModel)]="column.uiCheckAll" size="large"
                      (ngModelChange)="checkboxCheckAll(column, $event)"></kendo-checkbox> -->
                    <input #checkAllBox class="ftCheck" name="{{column.name}}-uiCheckAll"
                      [(ngModel)]="column.uiCheckAll" (ngModelChange)="checkboxCheckAll(column, $event)" type='checkbox'
                      kendoCheckBox [indeterminate]="column.uiCheckAll==null" size="medium" />
                  </div>
                </ng-container>
                <ng-container *ngSwitchCase="'checkbox'">
                  <nb-select fullWidth [ngModel]="checkboxGetFilter(column.filter)"
                    (ngModelChange)="checkboxSetFilter(column.name, $event)" [initFocus]="column.initFocusFilterInput"
                    (focus)="setFocusedFilterInput($event)">
                    <nb-option [value]="0">All</nb-option>
                    <nb-option [value]="1">Disabled</nb-option>
                    <nb-option [value]="2">Enabled</nb-option>
                  </nb-select>
                </ng-container>
                <ng-container *ngSwitchDefault>
                  <input type="text" nbInput fullWidth size="tiny" [placeholder]="column.title"
                    [(ngModel)]="column.filter" [initFocus]="column.initFocusFilterInput"
                    (ngModelChange)="filteringDebounceTimer.resetTimer()" (focus)="setFocusedFilterInput($event)">
                </ng-container>
              </ng-container>

            </th>
          </tr>
        </thead>
        <tbody RightClickMenu [RightClickMenuItems]="settings.contextMenuItems" [RightClickValue]="this"
          [onContextMenuOpening]="onContextMenuOpening" cdkDropList (cdkDropListDropped)="drop($event)"
          [cdkDropListDisabled]="!settings.allowDragAndDrop && !settings.allowDrag">

          <ng-container *ngFor="let row of visibleData;let i = index; trackBy:trackByUiSeq">

            <!-- Collapsable group row -->
            <tr *ngIf="anyGroups&&row.isGroupHeader" (click)="showHideGroup(row.groupKey)"
              class="grouprow {{this.tableId}}GroupRow-{{row.index}}" cdkDrag
              rbjFileDragDrop="{{settings.enableFileDrop}}" (onFileDropped)="fileDropped(row,$event)" cdkDragDisabled
              attr.groupKey='{{row.groupKey}}' [id]="tableId + row.groupKey +row.index">
              <td [colSpan]="visibleColumnCount">
                <nb-icon pack="eva" [icon]="expandedGroups(row.groupKey) ? 'chevron-down' : 'chevron-up'"></nb-icon>
                <span [innerHTML]="getGroupValue(row.groupKey)"></span>
              </td>
            </tr>
            <tr *ngIf="!row.isGroupHeader && row.visible" [id]="tableId + row.index"
              class="{{this.tableId}}Row-{{row.index}}"
              [ngClass]="{'selected': (selectedRows && selectedRows.has(row)),'focused': (firstSelectedRow && row.uiSeq == firstSelectedRow.uiSeq),'groupedItem': anyGroups }"
              (mousedown)="onRowSelect(row.index,$event)" cdkDrag cdkDragLockAxis="y" (cdkDragStarted)="startDragging()"
              (mouseup)="onRowMouseUp(row,$event)" rbjFileDragDrop="{{settings.enableFileDrop}}"
              (onFileDropped)="fileDropped(row,$event)">

              <td *ngIf="anyGroups">
                <nb-icon *ngIf="settings.usingDragIcon" pack="eva" icon="move-outline" class="g-cursor-grab label"
                  cdkDragHandle></nb-icon>
              </td> <!-- Blank cell for the collapse arrow in the group row -->
              <ng-container *ngFor="let column of visibleColumns;">
                <ng-container [ngSwitch]="column.type">
                  <td *ngSwitchCase="'checkbox'" class="checkbox text-center" [style.width]="column.uiWidth">
                    <div align="center">
                      <nb-checkbox class="ftCheck" [(ngModel)]="row.rowDatum[column.name]"
                        disabled="true"></nb-checkbox>
                    </div>
                  </td>
                  <td *ngSwitchCase="'checkall'" class="checkbox text-center" [style.width]="column.uiWidth"
                    (mousedown)="$event.stopPropagation()">
                    <div class="d-flex">
                      <ng-container
                        *ngIf="column.taggingTarget && settings.taggedValues.includes(row.rowDatum[column.taggingTarget])">
                        <span class="badge badge-warning mr-1 ftCheckBadge"
                          (click)="toggleCheckBox(column,row,false)">{{(settings.taggedValues.indexOf(row.rowDatum[column.taggingTarget])+1)}}</span>
                      </ng-container>

                      <kendo-checkbox #checkAllBox class="ftCheck mx-auto"
                        name="{{column.name}}-uiCheckAll-{{row.index}}" [(ngModel)]="row.rowDatum[column.name]"
                        (ngModelChange)="toggleCheckBox(column,row,$event)"></kendo-checkbox>
                    </div>
                  </td>

                  <td *ngSwitchCase="'tag'" [style.width]="column.uiWidth" (mousedown)="onCellMouseDown(column,$event)"
                    (dblclick)="triggerDoubleClick(row)">
                    <div title="{{row.colTooltips[column.name]}}">
                      <label *ngFor="let tag of row.colHtmlTexts[column.name]"
                        [ngClass]="{'g-cursor-pointer': !!tag.actionTag}" class="badge mr-1 badge-{{tag.status}} "
                        (click)="tagOnClick(row,tag.actionTag)" [innerHTML]="tag.text"></label>
                    </div>
                  </td>

                  <td *ngSwitchCase="'template'" [style.width]="column.uiWidth" (mousedown)="onCellMouseDown(column,$event)"
                    (dblclick)="triggerDoubleClick(row)" title="{{row.colTooltips[column.name]}}" class="p-0">
                    <ng-container *ngTemplateOutlet="row.colHtmlTexts[column.name]; context: {rowData: row.rowDatum, columnName: column.name};"></ng-container>
                  </td>

                  <td *ngSwitchDefault [class]="column.class ? column.class : ''" (dblclick)="triggerDoubleClick(row)"
                    [style.width]="column.uiWidth" [style.maxWidth]="column.uiWidth"
                    (mousedown)="onCellMouseDown(column,$event)">
                    <div [innerHTML]="row.colHtmlTexts[column.name]" title="{{row.colTooltips[column.name]}}"></div>
                  </td>
                </ng-container>
              </ng-container>
            </tr>

          </ng-container>

          <tr *ngIf="!visibleData || visibleData.length==0" rbjFileDragDrop="{{settings.enableFileDrop}}"
            (onFileDropped)="fileDropped(null,$event)">
            <td [attr.colspan]="visibleColumnCount">

              <nb-alert status="info" class="mt-3">
                <div class="d-flex align-items-center">
                  <div class="ml-2 d-inline-block">

                    <nb-icon icon="info-outline" pack="eva" class="g-font-size-40"></nb-icon>
                  </div>
                  <div class="ml-1 d-inline-block">

                    <strong *ngIf="!anyFiltered" class="g-font-size-16" [innerHtml]="noDataMessage">
                    </strong>
                    <strong *ngIf="anyFiltered" class="g-font-size-16">
                      No Match Found
                    </strong>
                    <p *ngIf="anyFiltered" style="color: whitesmoke;" class="mb-0">
                      <span style="font-weight: bold;">Tip:</span>
                      Please try another keyword.
                    </p>
                  </div>
                </div>


              </nb-alert>
            </td>
          </tr>
        </tbody>
        <tfoot *ngIf="settings.showFooter" [class.stickyFooter]="settings.stickyFooter">
          <tr *ngFor="let datum of footerDisplayData">
            <td *ngIf="anyGroups"></td> <!-- Blank cell for the collapse arrow in the group row -->
            <ng-container *ngFor="let column of footerSettings.columns">

              <td *ngIf="column.visible" [innerHTML]="datum.colHtmlTexts[column.name]"
                [class]="column.footerClass ? column.footerClass : ''"
                [colSpan]="column.colspan ? column.colspan : 1"
              ></td>
            </ng-container>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
  <div class="d-flex" style="width: 100%;">
    <div class="rect demo-dark" style="flex: 0 0 220px;" *ngIf="settings.showGroupsMenu && anyGroups">

    </div>
    <div style="flex: 1;">

    </div>
  </div>




</div>
<!-- <div class="bottomShadow" *ngIf="hasScrollBar"></div> -->

<!-- <pager *ngIf="itemsPerPage > 0" [page]="page" (pageChange)="gotoPage($event)" [pages]="pages" [maxPage]="maxPage">
</pager> -->