<app-spinner *ngIf="dataIsLoading"></app-spinner>

<div class="table-responsive" *ngIf="dataIsLoaded">
    <table class="table table-hover" aria-describedby="List of results">
        <thead>
            <tr>
                <th *ngIf="dataset.datatable_selectable_rows" scope="col" class="select">#</th>
                <th *ngFor="let attribute of getOutputList()" scope="col">
                    <app-attribute-label [label]="attribute.label" [description]="attribute.description"></app-attribute-label>
                    &nbsp;
                    <span *ngIf="attribute.id === sortedCol && attribute.order_by" class="pl-2" class="clickable" (click)="sort(attribute.id)">
                        <span [ngClass]="{'active': sortedOrder === 'a', 'inactive': sortedOrder === 'd'}">
                            <span class="fas fa-fw fa-sort-amount-down-alt"></span>
                        </span>
                        <span [ngClass]="{'active': sortedOrder === 'd', 'inactive': sortedOrder === 'a'}">
                            <span class="fas fa-fw fa-sort-amount-up"></span>
                        </span>
                    </span>
                    <span *ngIf="attribute.id !== sortedCol && attribute.order_by" class="pl-2" class="clickable" (click)="sort(attribute.id)">
                        <span class="unsorted">
                            <span class="fas fa-fw fa-arrows-alt-v"></span>
                        </span>
                        <span class="on-hover">
                            <span class="fas fa-fw fa-sort-amount-down-alt"></span>
                        </span>
                    </span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let datum of data">
                <td *ngIf="dataset.datatable_selectable_rows" class="data-selected"
                    (click)="toggleSelection(datum)">
                    <button class="btn btn-block text-left p-0 m-0">
                        <span *ngIf="!isSelected(datum)">
                            <span class="far fa-square fa-lg text-secondary"></span>
                        </span>
                        <span *ngIf="isSelected(datum)">
                            <span class="fas fa-check-square fa-lg" [ngStyle]="{ 'color': instance.design_color }"></span>
                        </span>
                    </button>
                </td>
                <td *ngFor="let attribute of getOutputList()" class="align-middle">
                    <app-renderer
                        [value]="datum[attribute.label]"
                        [dataset]="dataset"
                        [instance]="instance"
                        [attribute]="attribute"
                        [queryParams]="queryParams"
                        (downloadFile)="downloadFile.emit($event)">
                    </app-renderer>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="row mt-3">
    <div class="col">
        Show 
        <select class="custom-select" (change)="changeNbItems($event.target.value)">
            <option value="10" selected="true">10</option>
            <option *ngIf="dataLength > 10" value="20">20</option>
            <option *ngIf="dataLength > 20" value="50">50</option>
            <option *ngIf="dataLength > 50" value="100">100</option>
        </select>
        entries
    </div>
    <div class="col-auto" *ngIf="dataLength > nbItems">
        <pagination
            [(ngModel)]="page"
            [totalItems]="dataLength"
            [boundaryLinks]="true"
            [rotate]="true"
            [maxSize]="5"
            [itemsPerPage]="nbItems"
            previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"
            (pageChanged)="changePage($event.page)">
        </pagination>
    </div>
</div>