<div>
    <mat-grid-list [rowHeight]="50" [cols]="24">
        <mat-grid-tile [colspan]="7">
            <div style="display: inline-block; text-align: center; width: 100%;"><span class="shorten"><ng-container i18n="Download ID">ID:</ng-container>&nbsp;{{url_id ? url_id : download.uid}}</span></div>
        </mat-grid-tile>
        <mat-grid-tile [colspan]="13">
                <mat-progress-bar [value]="(download.complete || download.error) ? 100 : download.percent_complete" [mode]="(!download.complete && download.percent_complete === 0 && !download.error) ? 'indeterminate' : 'determinate'"></mat-progress-bar>
                <mat-icon *ngIf="download.complete" style="margin-left: 25px; cursor: default" matTooltip="The download was successful" i18n-matTooltip="download successful tooltip">done</mat-icon>
                <mat-icon *ngIf="download.error" style="margin-left: 25px; cursor: default" matTooltip="An error has occurred" i18n-matTooltip="download error tooltip">error</mat-icon>
        </mat-grid-tile>
        <mat-grid-tile [colspan]="4">
            <button style="margin-bottom: 2px;" (click)="cancelTheDownload()" mat-icon-button color="warn"><mat-icon fontSet="material-icons-outlined">cancel</mat-icon></button>
        </mat-grid-tile>
    </mat-grid-list>
    <mat-expansion-panel *ngIf="download.timestamp_start" class="ignore-margin">
        <mat-expansion-panel-header>
            <div>
                <ng-container i18n="Details">Details</ng-container>
            </div>
            <div style="width: 100%">
                <div style="float: right">
                    <mat-panel-description>{{download.timestamp_start | date:'medium'}}</mat-panel-description>
                </div>
            </div>
        </mat-expansion-panel-header>
        <div *ngIf="download.error">
            <strong><ng-container i18n="Error label">An error has occurred:</ng-container></strong>
            <br/>
            {{download.error}}
        </div>
        <div *ngIf="download.timestamp_start">
            <strong><ng-container i18n="Download start label">Download start:</ng-container></strong>&nbsp;{{download.timestamp_start | date:'medium'}}
        </div>
        <div *ngIf="download.timestamp_end">
            <strong><ng-container i18n="Download end label">Download end:</ng-container></strong>&nbsp;{{download.timestamp_end | date:'medium'}}
        </div>
        <div *ngIf="download.fileNames">
            <strong><ng-container i18n="File path(s) label">File path(s):</ng-container></strong>&nbsp;{{download.fileNames.join(', ')}}
        </div>
    </mat-expansion-panel>
</div>