<div class="table-data-grid-scroll" #scroll>
  <div *ngIf="displayOptions.gridHeader" class="table-data-grid-header separator large-padding">
    <h4 class="m-r-16">{{ title | translate }}</h4>

    <ng-container *ngIf="displayOptions.filter">
      <span *ngIf="!filteringApplied">
        <span class="label label-warning m-r-4" translate>No filters</span>
        <small
          *ngIf="!!filteringLabelsParams.allItemsCount"
          class="m-r-4"
          ngNonBindable
          translate
          [translateParams]="filteringLabelsParams"
          >{{ filteredItemsCount }} of {{ allItemsCount }} items</small
        >
      </span>
      <span *ngIf="filteringApplied">
        <ng-container *ngIf="!!filteringLabelsParams.allItemsCount">
          <span class="badge badge-info m-r-4">
            {{ (dataSource.stats$ | async).filteredSize }}
          </span>
          <small ngNonBindable translate [translateParams]="filteringLabelsParams"
            >of {{ allItemsCount }} items</small
          >
        </ng-container>
        <button
          title=" {{ 'Clear filters' | translate }}"
          class="m-l-8 btn btn-xs btn-default m-r-4"
          (click)="clearFilters()"
        >
          {{ 'Clear filters' | translate }}
        </button>
      </span>
      <span class="hidden-xs hidden-sm">
        <button
          class="btn-clean text-primary"
          popover="{{ 'Click the column headers to apply filters.' | translate }}"
          placement="right"
          triggers="focus"
        >
          <i c8yIcon="question-circle-o"></i>
        </button>
      </span>

      <span class="hidden-xs hidden-sm" *ngIf="showCounterWarning">
        <button
          class="btn-clean text-primary"
          popover="{{
            'The counter for the total number of items might be inaccurate.' | translate
          }}"
          placement="right"
          triggers="focus"
        >
          <i c8yIcon="warning"></i>
        </button>
      </span>
    </ng-container>

    <div class="flex-item-right">
      <div class="btnbar flex-row">
        <label class="c8y-switch" *ngIf="showChildDevices.show">
          <input type="checkbox" [(ngModel)]="showChildDevices.value" (click)="loadChildDevices()"/>
          <span></span>
          {{ 'Show child devices' | translate }}
        </label>
        <button class="btn-clean m-l-4 m-r-16" 
          *ngIf="showChildDevices.show"
          [popover]="childDevicesPop"
          placement="bottom"
          [outsideClick]="true"
          >
          <i c8yIcon="question-circle-o" class="text-primary"></i>
        </button>
        <ng-template #childDevicesPop>
          <span translate>
            Displays the button
            <button class="btn btn-xs btn-icon btn-default"><i class="text-primary dlt-c8y-icon-enter-bottom"></i></button>
            next to devices with children. Clicking it displays a list with all child devices.
          </span>
        </ng-template>
        <div
          class="dropdown"
          dropdown
          [insideClick]="true"
          container="body"
          placement="bottom left"
        >
          <button
            title="{{ 'Configure columns' | translate }}"
            class="btnbar-btn c8y-dropdown"
            dropdownToggle
          >
            <i c8yIcon="columns" class="m-r-4"></i>
            <span>{{ 'Configure columns' | translate }}</span>
          </button>

          <ul *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()">
            <li class="bg-white">
              <div cdkDropList (cdkDropListDropped)="onColumnDrop($event)" class="list-group m-0">
                <div *ngFor="let column of columns" cdkDrag cdkDragLockAxis="y">
                  <ng-container *ngIf="!column.positionFixed">
                    <div class="list-group-item draggable-after p-0 ">
                      <label
                        title="{{ (column.header | translate) || column.name }}"
                        class="c8y-checkbox p-l-16 p-r-32 p-t-8 p-b-8 flex-item-v-stretch"
                      >
                        <input
                          type="checkbox"
                          [(ngModel)]="column.visible"
                          (change)="updateGridColumnsSize()"
                        />
                        <span></span>
                        <span>{{ (column.header | translate) || column.name }}</span>
                      </label>
                    </div>
                  </ng-container>
                </div>
              </div>
            </li>
          </ul>
        </div>

        <button
          title="{{ 'Reload' | translate }}"
          class="btnbar-btn btn-link"
          [disabled]="dataSource.loading$ | async"
          (click)="searchText = ''; reload()"
        >
          <i c8yIcon="refresh" class="m-r-4"></i>
          <span>{{ 'Reload' | translate }}</span>
        </button>

        <div *ngIf="!serverSideDataCallback || showSearch" class="input-group input-group-search m-l-sm-16">
          <input
            type="search"
            class="form-control"
            placeholder="{{ 'Search…' | translate }}"
            [ngModel]="searchText"
            (input)="searchText$.emit($event.target.value)"
          />
          <div class="input-group-addon">
            <i c8yIcon="search" *ngIf="searchText.length === 0"></i>
            <i
              c8yIcon="times"
              class="pointer"
              *ngIf="searchText.length > 0"
              (click)="searchText = ''; searchText$.emit('')"
            ></i>
          </div>
        </div>
      </div>
    </div>
    <div
      class="table-data-grid-header-bulk-actions animated slideInDown fast"
      *ngIf="selectedItemIds.length !== 0"
    >
      <h4>
        <span ngNonBindable translate [translateParams]="{ count: selectedItemIds.length }">
          {{ count }} selected items.
        </span>
        <br class="visible-xs" />
        <small *ngIf="selectedItemIds.length >= pagination.pageSize">
          <a (click)="setAllItemsSelected(true)" class="interact">
            <span
              ngNonBindable
              translate
              [translateParams]="{ count: (dataSource.stats$ | async).filteredSize }"
            >
              Select all {{ count }} items
            </span>
          </a>
        </small>
      </h4>
      <div class="flex-item-right">
        <div class="btnbar flex-row">
          <ng-container
            *ngFor="let bulkActionControl of bulkActionControls"
            [ngSwitch]="bulkActionControl.type"
          >
            <button
              title="{{ 'Export' | translate }}"
              *ngSwitchCase="builtInActionType.Export"
              class="btnbar-btn"
              (click)="bulkActionControl.callback(selectedItemIds, reload.bind(this))"
            >
              <i c8yIcon="sign-out"></i>
              <span>{{ 'Export' | translate }}</span>
            </button>

            <button
              title="{{ 'Delete' | translate }}"
              *ngSwitchCase="builtInActionType.Delete"
              class="btnbar-btn"
              (click)="bulkActionControl.callback(selectedItemIds, reload.bind(this))"
            >
              <i c8yIcon="trash"></i>
              <span>{{ 'Delete' | translate }}</span>
            </button>

            <button
              title="{{ bulkActionControl.text | translate }}"
              *ngSwitchDefault
              class="btnbar-btn"
              (click)="bulkActionControl.callback(selectedItemIds, reload.bind(this))"
            >
              <i c8yIcon="{{ bulkActionControl.icon }}"></i>
              <span>{{ bulkActionControl.text | translate }}</span>
            </button>
          </ng-container>

          <button
            title="{{ 'Cancel' | translate }}"
            class="btnbar-btn"
            (click)="cancel()"
          >
            <i c8yIcon="times"></i>
            <span>{{ 'Cancel' | translate }}</span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <table
    class="table table-hover table-filtered-sorted table-data-grid large-padding"
    cdk-table
    [dataSource]="dataSource"
    [trackBy]="trackByName"
    [class.table-striped]="displayOptions.striped"
    [class.table-bordered]="displayOptions.bordered"
    [class.table-data-grid-with-checkboxes]="selectable"
    [class.table-data-grid-with-actions]="actionControls.length > 0"
    [style.grid-template-columns]="styles.gridTemplateColumns"
    (mousemove)="resizeHandleContainerMouseMove$.emit($event)"
    (mouseup)="resizeHandleContainerMouseUp$.emit($event)"
  >
    <ng-container *ngFor="let column of columns; trackBy: trackByName" [cdkColumnDef]="column.name">
      <ng-container [ngSwitch]="column.name">
        <ng-container *ngSwitchCase="'checkbox'">
          <th cdk-header-cell *cdkHeaderCellDef data-type="icon">
            <div>
              <label class="c8y-checkbox">
                <input
                  type="checkbox"
                  [checked]="currentPageSelectionState.allSelected"
                  [indeterminate]="
                    !(
                      currentPageSelectionState.allSelected ||
                      currentPageSelectionState.allDeselected
                    )
                  "
                  (change)="setAllItemsInCurrentPageSelected($event.target.checked)"
                />
                <span></span>
              </label>
            </div>
          </th>

          <td cdk-cell *cdkCellDef="let row">
            <label class="c8y-checkbox">
              <input
                type="checkbox"
                [checked]="isItemSelected(row)"
                (change)="setItemsSelected([row], $event.target.checked)"
              />
              <span></span>
            </label>
          </td>
        </ng-container>

        <ng-container *ngSwitchCase="'actions'">
          <th cdk-header-cell *cdkHeaderCellDef data-type="icon"></th>

          <td cdk-cell *cdkCellDef="let row">
            <ng-container *ngIf="actionControls.length <= 2">
              <ng-container
                *ngFor="let actionControl of actionControls"
                [ngSwitch]="actionControl.type"
              >
                <ng-container *ngIf="actionControl.showIf ? actionControl.showIf(row) : true">
                  <button
                    *ngSwitchCase="builtInActionType.Edit"
                    class="btn btn-icon btn-xs btn-default"
                    title="{{ 'Edit' | translate }}"
                    (click)="actionControl.callback(row, reload.bind(this))"
                  >
                    <i c8yIcon="pencil"></i>
                  </button>
                  <button
                    *ngSwitchCase="builtInActionType.Delete"
                    class="btn btn-dot showOnHover"
                    title="{{ 'Delete' | translate }}"
                    (click)="actionControl.callback(row, reload.bind(this))"
                  >
                    <i class="text-danger" c8yIcon="minus-circle"></i>
                  </button>
                  <button
                    *ngSwitchDefault
                    class="btn btn-icon btn-xs btn-default"
                    title="{{ actionControl.text | translate }}"
                    (click)="actionControl.callback(row, reload.bind(this))"
                    tooltip="{{ actionControl.text | translate }}"
                    container="body"
                  >
                    <i c8yIcon="{{ actionControl.icon }}"></i>
                  </button>
                </ng-container>
              </ng-container>
            </ng-container>

            <div *ngIf="actionControls.length > 2" class="dropdown" dropdown>
              <button
                title="{{ 'Actions' | translate }}"
                class="dropdown-toggle c8y-dropdown"
                dropdownToggle
              >
                <i c8yIcon="ellipsis-v"></i>
              </button>
              <ul class="dropdown-menu dropdown-menu-right" *dropdownMenu>
                <li *ngFor="let actionControl of actionControls" [ngSwitch]="actionControl.type">
                  <ng-container *ngIf="actionControl.showIf ? actionControl.showIf(row) : true">
                    <button
                      title="{{ 'Edit' | translate }}"
                      *ngSwitchCase="builtInActionType.Edit"
                      (click)="actionControl.callback(row, reload.bind(this))"
                    >
                      <i c8yIcon="pencil"></i>
                      {{ 'Edit' | translate }}
                    </button>
                    <button
                      title="{{ 'Delete' | translate }}"
                      *ngSwitchCase="builtInActionType.Delete"
                      (click)="actionControl.callback(row, reload.bind(this))"
                    >
                      <i c8yIcon="trash"></i>
                      {{ 'Delete' | translate }}
                    </button>
                    <button
                      title="{{ 'Export' | translate }}"
                      *ngSwitchCase="builtInActionType.Export"
                      (click)="actionControl.callback(row, reload.bind(this))"
                    >
                      <i c8yIcon="download"></i>
                      {{ 'Export' | translate }}
                    </button>
                    <button
                      title="{{ actionControl.text | translate }}"
                      *ngSwitchDefault
                      (click)="actionControl.callback(row, reload.bind(this))"
                    >
                      <i c8yIcon="{{ actionControl.icon }}"></i>
                      {{ actionControl.text | translate }}
                    </button>
                  </ng-container>
                </li>
              </ul>
            </div>
          </td>
        </ng-container>

        <ng-container *ngSwitchDefault>
          <th
            cdk-header-cell
            *cdkHeaderCellDef
            [ngClass]="column.headerCSSClassName"
            [attr.data-type]="column.dataType"
            [class.sorted]="column.sortOrder"
            [class.filtered]="column | map: isColumnFilteringApplied"
            [class.hidden]="!column.visible"
          >
            <div *ngIf="!column.filterable" [title]="(column.header | translate) || column.name">
              <ng-container
                *ngIf="
                  (
                    [{
                      columnName: column.name,
                      value: ((column.header | translate) || column.name)
                    }]
                      | map:getHeaderCellRendererSpec:this
                  ) as cellRendererSpec
                "
              >
                <c8y-cell-renderer [spec]="cellRendererSpec"></c8y-cell-renderer>
              </ng-container>
            </div>

            <div
              *ngIf="column.filterable"
              class="dropdown"
              dropdown
              #dropdown="bs-dropdown"
              container="body"
              placement="bottom left"
              [insideClick]="true"
            >
              <button
                class="btn-header c8y-dropdown"
                dropdownToggle
                [title]="(column.header | translate) || column.name"
              >
                <ng-container
                  *ngIf="
                    (
                      [{
                        columnName: column.name,
                        value: ((column.header | translate) || column.name)
                      }]
                        | map:getHeaderCellRendererSpec:this
                    ) as cellRendererSpec
                  "
                >
                  <c8y-cell-renderer [spec]="cellRendererSpec"></c8y-cell-renderer>
                </ng-container>
                <i c8yIcon="filter" title="{{ 'Filter' | translate }}"></i>
              </button>

              <ul *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()">
                <li class="data-grid__dropdown">
                  <ng-container
                    *ngIf="
                      (
                        [{
                          column: column,
                          dropdown: dropdown
                        }]
                          | map:getFilteringFormRendererSpec:this
                      ) as filteringFormRendererSpec
                    "
                  >
                    <c8y-filtering-form-renderer [spec]="filteringFormRendererSpec">
                    </c8y-filtering-form-renderer>
                  </ng-container>
                </li>
              </ul>
            </div>

            <button
              *ngIf="column.sortable"
              class="btn-sort"
              title="{{ 'Sort' | translate }}"
              (click)="changeSortOrder(column.name)"
            >
              <ng-container [ngSwitch]="column.sortOrder">
                <i *ngSwitchCase="'asc'" c8yIcon="long-arrow-up"></i>
                <i *ngSwitchCase="'desc'" c8yIcon="long-arrow-down"></i>
                <i *ngSwitchDefault c8yIcon="exchange"></i>
              </ng-container>
            </button>

            <span
              class="resize-handle"
              (mousedown)="
                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })
              "
            >
            </span>
          </th>

          <td
            cdk-cell
            *cdkCellDef="let row"
            [ngClass]="column.cellCSSClassName"
            [attr.data-cell-title]="column.header | translate"
            [class.hidden]="!column.visible"
          >
            <ng-container
              *ngIf="
                (
                  [{
                    value: resolveCellValue(row, column.path),
                    row: row,
                    columnName: column.name
                  }]
                    | map:getCellRendererSpec:this
                ) as cellRendererSpec
              "
            >
              <c8y-cell-renderer [spec]="cellRendererSpec"></c8y-cell-renderer>
            </ng-container>
          </td>
        </ng-container>
      </ng-container>
    </ng-container>

    <ng-container cdkColumnDef="infiniteScrollFooter">
      <td cdk-footer-cell *cdkFooterCellDef [style.grid-column]="styles.gridInfiniteScrollColumn">
        <template #infiniteScrollContainer></template>
      </td>
    </ng-container>

    <tr cdk-header-row *cdkHeaderRowDef="columnNames"></tr>

    <tr
      cdk-row
      *cdkRowDef="let row; columns: columnNames"
      (mouseover)="rowMouseOver.emit(row)"
      (mouseleave)="rowMouseLeave.emit(row)"
      (click)="rowClick.emit(row)"
    ></tr>

    <ng-container *ngIf="infiniteScroll">
      <tr cdk-footer-row *cdkFooterRowDef="['infiniteScrollFooter']"></tr>
    </ng-container>
  </table>

  <div *ngIf="(dataSource.loading$ | async) && !loadMoreComponent" class="text-center">
    <c8y-progress-bar [message]="loadingItemsLabel"></c8y-progress-bar>
  </div>

  <div
    class="row m-0 p-t-40 p-b-40"
    *ngIf="!(dataSource.loading$ | async) && (dataSource.stats$ | async).filteredSize === 0"
  >
    <div class="col-md-4 col-md-offset-4">
      <ng-content select=".c8y-empty-state"></ng-content>
    </div>
  </div>

  <div *ngIf="pagination && !infiniteScroll" class="table-data-grid-footer separator large-padding">
    <div class="col-sm-4 no-gutter">
      <div *ngIf="(dataSource.stats$ | async).currentPageSize > 0" class="counter">
        <span class="text-muted" ngNonBindable translate [translateParams]="paginationLabelParams"
          >{{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}</span
        >
      </div>
    </div>

    <div class="col-sm-4 no-gutter text-center">
      <div
        *ngIf="(dataSource.stats$ | async).filteredSize > minPossiblePageSize"
        class="form-group form-inline"
      >
        <label class="m-r-4">{{ 'Items per page' | translate }}</label>
        <div class="c8y-select-wrapper">
          <select
            class="form-control"
            [ngModel]="pagination.pageSize"
            (ngModelChange)="
              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })
            "
          >
            <option *ngFor="let pageSize of possiblePageSizes" [ngValue]="pageSize">
              {{ pageSize }}
            </option>
          </select>
        </div>
      </div>
    </div>

    <div class="col-sm-4 no-gutter text-right">
      <pagination
        [class.hidden]="totalPagesCount <= 1"
        [ngModel]="pagination.currentPage"
        (pageChanged)="updatePagination($event)"
        [totalItems]="(dataSource.stats$ | async).filteredSize"
        [itemsPerPage]="pagination.pageSize"
        (numPages)="totalPagesCount = $event"
        [maxSize]="5"
        [boundaryLinks]="false"
        previousText=" "
        nextText=" "
      ></pagination>
    </div>
  </div>
</div>