<table class="table component-UploadQueue">
    <thead>
        <tr>
            <th>Name</th>
            <th>Size</th>
            <th>Progress</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngIf="uploader.queue.length == 0" class="noItems"><td colspan="5">No upload in progress.</td></tr>

        <tr *ngFor="let item of uploader.queue"  [ngClass]="{'finishedSuccess': item.isSuccess, 'finishedCancel': item.isCancel, 'finishedError': item.isError}" >
            <td>{{ item?.file?.name }}</td>
            <td>{{ item?.file?.size / 1024 / 1024 | number:'.2' }} MB</td>
            <td>{{ getProgress(item) }}%</td>
            <td class="text-center">
                <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
            </td>
            <td>
                <button type="button" class="btn btn-warning btn-xs" (click)="item.cancel()" [disabled]="!item.isUploading">
                    <span class="glyphicon glyphicon-ban-circle"></span> <ng-container i18n="Upload">Cancel</ng-container>
                </button>
                <button type="button" class="btn btn-danger btn-xs" (click)="item.remove()">
                    <span class="glyphicon glyphicon-trash"></span> <ng-container i18n="Upload queue">Remove</ng-container>
                </button>
            </td>
        </tr>
    </tbody>
</table>
