<div fxFlexFill fxLayout='column'>
    <h1>Basket: {{ basket.name }}</h1>
    <div class='tools'>
        <mat-form-field class='filter'>
            <mat-label>Filter table</mat-label>
            <input matInput
                (input)="applyFilter()"
                matTooltip="Filter the items of the basket from the table"
                [(ngModel)]="filterText"/>
            <button matSuffix mat-icon-button
                *ngIf="filterText"
                aria-label="Clear"
                (click)="filterText='';applyFilter()"
            >
                <mat-icon>close</mat-icon>
            </button>
        </mat-form-field>
        <gisaf-admin-basket-upload [basket]='basket' [dataSource]='dataSource'>
        </gisaf-admin-basket-upload>
    </div>
    <table mat-table matSort [dataSource]="dataSource" class='content'>
        <ng-container matColumnDef="delete">
            <th mat-header-cell *matHeaderCellDef>
                <form [formGroup]="unlockDeleteFormGroup">
                    <mat-checkbox formControlName='canDelete' matTooltip='Unlock delete buttons'>
                    </mat-checkbox>
                </form>
            </th>
            <td mat-cell *matCellDef="let item">
                <button mat-button (click)="deleteItem(item)" matTooltip="Delete"
                    [disabled]="!unlockDeleteFormGroup.controls['canDelete'].value">
                    <mat-icon aria-label="delete">delete</mat-icon>
                </button>
            </td>
        </ng-container>

        <ng-container matColumnDef="import">
            <th mat-header-cell *matHeaderCellDef>Import</th>
            <td mat-cell *matCellDef="let item">
                <button mat-button (click)="importItem(item, $event.ctrlKey)"
                    matTooltip="Import to the database. Press 'Control' key for a dry run (no actual change will happen)"
                    >
                    <mat-icon aria-label="import">input</mat-icon>
                </button>
            </td>
        </ng-container>

        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
            <td mat-cell *matCellDef="let item">
                <span (click)="download(item)" [title]="item.dir">{{ item.name }}</span>
            </td>
        </ng-container>

        <ng-container matColumnDef="store">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Store</th>
            <td mat-cell *matCellDef="let item">{{ item.store }}</td>
        </ng-container>

        <ng-container matColumnDef="time">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Import time</th>
            <td mat-cell *matCellDef="let item">{{ item.time | date:'dd/MM/yyyy, HH:mm:ss' }}</td>
        </ng-container>

        <ng-container matColumnDef="url">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>URL</th>
            <td mat-cell *matCellDef="let item">{{ item.url }}</td>
        </ng-container>

        <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
            <td mat-cell *matCellDef="let item">{{ item.status }}</td>
        </ng-container>

        <ng-container matColumnDef="project">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Project</th>
            <td mat-cell *matCellDef="let item">{{ adminDataService.projectMap.get(item.project_id).name }}</td>
        </ng-container>

        <ng-container matColumnDef="surveyor">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Surveyor</th>
            <td mat-cell *matCellDef="let item">{{ adminDataService.surveyorMap.get(item.surveyor_id).name }}</td>
        </ng-container>

        <ng-container matColumnDef="equipment">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Equipment</th>
            <td mat-cell *matCellDef="let item">{{ adminDataService.equipmentMap.get(item.equipment_id).name }}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="getColumns();sticky:true"></tr>
        <tr mat-row [ngClass]="{even: even}"
            *matRowDef="let row; let even = even; columns:getColumns()"
        ></tr>
    </table>
    <!--
    <gisaf-admin-basket-item [file]='file' *ngFor='let file of basket.file'>
    </gisaf-admin-basket-item>
    -->
    <mat-paginator
        class="paginator"
        [pageSizeOptions]="[10, 20, 50, 100]"
        [pageIndex]='0'
        [pageSize]='10'
        showFirstLastButtons
        >
    </mat-paginator>
</div>