<div class="bulk-actions">
    <ng-content select="vdr-bulk-action-menu"></ng-content>
</div>
<table class="" [class.no-select]="disableSelect" [style.table-layout]="!items?.length ? 'fixed' : 'inherit'">
    <thead [class.items-selected]="selectionManager?.selection.length">
        <tr class="heading-row">
            <th *ngIf="selectionManager" class="align-middle">
                <input
                    type="checkbox"
                    clrCheckbox
                    [checked]="selectionManager?.areAllCurrentItemsSelected()"
                    (change)="onToggleAllClick()"
                />
            </th>
            <th *ngFor="let column of visibleColumns; last as isLast" [class.expand]="column.expand">
                <div class="cell-content" [ngClass]="column.align">
                    <span>{{ column.heading }}</span>
                    <div *ngIf="column.sort as sort" class="sort-toggle">
                        <button (click)="sort.toggleSortOrder()" [class.active]="sort.sortOrder">
                            <clr-icon *ngIf="!sort.sortOrder" shape="two-way-arrows left"></clr-icon>
                            <clr-icon *ngIf="sort.sortOrder === 'ASC'" shape="arrow up"></clr-icon>
                            <clr-icon *ngIf="sort.sortOrder === 'DESC'" shape="arrow down"></clr-icon>
                        </button>
                        <div class="sort-label" *ngIf="sort.sortOrder">{{ sort.sortOrder }}</div>
                    </div>
                </div>

                <div *ngIf="isLast" class="column-picker">
                    <vdr-data-table-colum-picker [columns]="columns?.toArray()"></vdr-data-table-colum-picker>
                </div>
            </th>
        </tr>
        <tr *ngIf="searchComponent || customSearchTemplate || filters?.length">
            <th [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)" class="filter-row">
                <!--<div class="search-wrapper">
                    <clr-icon shape="search" class="search-icon"></clr-icon>
                    <input [formControl]="searchTermControl" [placeholder]="searchTermPlaceholder" />
                </div>-->
                <ng-container *ngTemplateOutlet="searchComponent?.template"></ng-container>
                <ng-container *ngTemplateOutlet="customSearchTemplate"></ng-container>
                <ng-container *ngIf="filters">
                    <div class="filters">
                        <vdr-data-table-filters
                            *ngFor="let activeFilter of filters.activeFilters"
                            [filterWithValue]="activeFilter"
                            [filters]="filters"
                            class="mt-1"
                        ></vdr-data-table-filters>
                        <vdr-data-table-filters
                            *ngIf="filters.length"
                            [filters]="filters"
                            class="mt-1"
                        ></vdr-data-table-filters>
                    </div>
                </ng-container>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr
            *ngFor="
                let item of items
                    | paginate
                        : {
                              itemsPerPage: itemsPerPage,
                              currentPage: currentPage,
                              totalItems: totalItems
                          };
                index as i;
                trackBy: trackByFn
            "
        >
            <td *ngIf="selectionManager" class="selection-col">
                <input
                    type="checkbox"
                    clrCheckbox
                    [checked]="selectionManager?.isSelected(item)"
                    (click)="onRowClick(item, $event)"
                />
            </td>
            <td *ngFor="let column of visibleColumns">
                <div class="cell-content" [ngClass]="column.align">
                    <ng-container
                        *ngTemplateOutlet="column.template; context: { item: item, index: i }"
                    ></ng-container>
                </div>
            </td>
        </tr>
        <ng-container>
            <tr *ngIf="!items?.length">
                <td [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)">
                    <vdr-empty-placeholder [emptyStateLabel]="emptyStateLabel"></vdr-empty-placeholder>
                </td>
            </tr>
        </ng-container>
    </tbody>
</table>
<div class="table-footer ml-4">
    <vdr-items-per-page-controls
        *ngIf="totalItems"
        [itemsPerPage]="itemsPerPage"
        (itemsPerPageChange)="itemsPerPageChange.emit($event)"
    ></vdr-items-per-page-controls>
    <div *ngIf="totalItems" class="p5">
        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}
    </div>

    <vdr-pagination-controls
        *ngIf="totalItems"
        [currentPage]="currentPage"
        [itemsPerPage]="itemsPerPage"
        [totalItems]="totalItems"
        (pageChange)="pageChange.emit($event)"
    ></vdr-pagination-controls>
</div>
