<div *ngIf="!requiredParams()" class="text-center">
    <span class="fas fa-circle-notch fa-spin fa-3x"></span>
    <span class="sr-only">Loading...</span>
</div>
<div *ngIf="requiredParams()">
    <div *ngIf="dataset.selectable_row" class="mb-2">
        <button [disabled]="noSelectedData() || processWip" (click)="executeProcess.emit('csv')"
            class="btn btn-sm btn-outline-primary">
            To CSV
        </button>
        <span *ngIf="processWip" class="float-right mr-2">
            <span class="fas fa-circle-notch fa-spin fa-2x"></span>
        </span>
        <a *ngIf="processDone" href="http://0.0.0.0:8085/{{ processId }}.csv"
            class="btn btn-sm btn-outline-secondary float-right">
            Download your CSV
        </a>
    </div>
    <div class="table-responsive">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th *ngIf="dataset.selectable_row"></th>
                    <th *ngFor="let attribute of getOutputList()" scope="col" class="clickable" (click)="sort(attribute.id)">
                        {{ attribute.label }}
                        <span *ngIf="attribute.id === sortedCol" class="pl-2">
                            <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" class="pl-2">
                            <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.selectable_row" 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 theme-color"></span>
                            </span>
                        </button>
                    </td>
                    <td *ngFor="let attribute of getOutputList()" class="align-middle">
                        <div *ngIf="datum[attribute.label]" [ngSwitch]="attribute.renderer">
                            <div *ngSwitchCase="'detail'">
                                <app-detail
                                    [value]="datum[attribute.label]"
                                    [datasetName]="dataset.name"
                                    [config]="attribute.renderer_config">
                                </app-detail>
                            </div>
                            <div *ngSwitchCase="'link'">
                                <app-link
                                    [value]="datum[attribute.label]"
                                    [datasetName]="dataset.name"
                                    [config]="attribute.renderer_config">
                                </app-link>
                            </div>
                            <div *ngSwitchCase="'download'">
                                <app-download
                                    [value]="datum[attribute.label]"
                                    [datasetName]="dataset.name"
                                    [config]="attribute.renderer_config">
                                </app-download>
                            </div>
                            <div *ngSwitchCase="'image'">
                                <app-image
                                    [value]="datum[attribute.label]"
                                    [datasetName]="dataset.name"
                                    [config]="attribute.renderer_config">
                                </app-image>
                            </div>
                            <div *ngSwitchCase="'json'">
                                <app-json
                                    [value]="datum[attribute.label]"
                                    [attributeLabel]="attribute.label"
                                    [config]="attribute.renderer_config">
                                </app-json>
                            </div>
                            <div *ngSwitchDefault>
                                {{ datum[attribute.label] }}
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="row mt-3">
        <div class="col">
            Showing
            <select class="custom-select" (change)="changeNbItems($event.target.value)">
                <option value="10" selected="true">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
            of {{ dataLength }} items
        </div>
        <div class="col-auto">
            <pagination
                [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>
</div>