<section>
    <iqser-page-header (closeAction)="routerHistoryService.navigateToLastDossiersScreen()" [showCloseButton]="true"></iqser-page-header>

    <div class="content-inner">
        <div class="content-container">
            <iqser-table
                [bulkActions]="bulkActions"
                [headerHelpModeKey]="'my_downloads'"
                [itemSize]="80"
                [noDataText]="'downloads-list.no-data.title' | translate"
                [selectionEnabled]="true"
                [tableColumnConfigs]="tableColumnConfigs"
                noDataIcon="iqser:download"
            ></iqser-table>
        </div>
    </div>
</section>

<ng-template #bulkActions>
    <iqser-circle-button
        (action)="deleteItems()"
        *ngIf="listingService.areSomeSelected$ | async"
        [tooltip]="'downloads-list.bulk.delete' | translate"
        icon="iqser:trash"
    ></iqser-circle-button>
</ng-template>

<!--TODO: move to a separate component-->
<ng-template #tableItemTemplate let-entity="entity">
    <div *ngIf="cast(entity) as download">
        <div class="cell">
            <div [class.no-bold]="download.lastDownload" class="table-item-title heading">
                {{ download.filename }}
            </div>
        </div>

        <div class="cell">
            <div class="small-label">
                {{ download.size }}
            </div>
        </div>

        <div class="cell">
            <div class="small-label">
                {{ download.creationDate | date : 'd MMM yyyy, hh:mm a' }}
            </div>
        </div>

        <div class="cell">
            <div class="small-label">
                {{ download.status }}
            </div>

            <div class="action-buttons">
                <iqser-circle-button
                    (action)="downloadItem(download)"
                    *ngIf="download.status === 'READY' && !download.inProgress"
                    [tooltip]="'downloads-list.actions.download' | translate"
                    icon="iqser:download"
                ></iqser-circle-button>

                <iqser-circle-button
                    (action)="deleteItems([download])"
                    [tooltip]="'downloads-list.actions.delete' | translate"
                    icon="iqser:trash"
                ></iqser-circle-button>

                <mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>
            </div>
        </div>
    </div>
</ng-template>
