<div class="adf-file-uploading-row">
    <mat-icon
        mat-list-icon
        class="adf-file-uploading-row__type">
        insert_drive_file
    </mat-icon>

    <span
        class="adf-file-uploading-row__name"
        title="{{ file.name }}">
        {{ file.name }}
    </span>

    <div
        *ngIf="file.status === FileUploadStatus.Progress || file.status === FileUploadStatus.Starting"
        (click)="onCancel(file)"
        class="adf-file-uploading-row__group adf-file-uploading-row__group--toggle"
        title="{{ 'ADF_FILE_UPLOAD.BUTTON.CANCEL_FILE' | translate }}">
        <span class="adf-file-uploading-row__status">
            {{ file.progress.loaded | adfFileSize }} / {{ file.progress.total | adfFileSize }}
        </span>

        <mat-icon
            mat-list-icon
            class="adf-file-uploading-row__action adf-file-uploading-row__action--cancel">
            clear
        </mat-icon>
    </div>

    <div
        *ngIf="file.status === FileUploadStatus.Complete"
        (click)="onRemove(file)"
        class="adf-file-uploading-row__group adf-file-uploading-row__group--toggle"
        title="{{ 'ADF_FILE_UPLOAD.BUTTON.REMOVE_FILE' | translate }}">
        <mat-icon
            mat-list-icon
            class="adf-file-uploading-row__status adf-file-uploading-row__status--done">
            check_circle
        </mat-icon>

        <mat-icon
            mat-list-icon
            class="adf-file-uploading-row__action adf-file-uploading-row__action--remove">
            remove_circle
        </mat-icon>
    </div>

    <div
        *ngIf="file.status === FileUploadStatus.Pending"
        (click)="onCancel(file)"
        class="adf-file-uploading-row__group adf-file-uploading-row__group--toggle">
        <mat-icon
            mat-list-icon
            class="adf-file-uploading-row__status adf-file-uploading-row__status--pending">
            schedule
        </mat-icon>

        <mat-icon
            mat-list-icon
            class="adf-file-uploading-row__action adf-file-uploading-row__action--remove">
            remove_circle
        </mat-icon>
    </div>

    <div
        *ngIf="file.status === FileUploadStatus.Error"
        class="adf-file-uploading-row__block adf-file-uploading-row__status--error"
        title="{{ file.response }}">
        <mat-icon mat-list-icon>
            report_problem
        </mat-icon>
    </div>

    <div
        *ngIf="file.status === FileUploadStatus.Cancelled  ||
            file.status === FileUploadStatus.Aborted ||
            file.status === FileUploadStatus.Deleted"
        class="adf-file-uploading-row__block adf-file-uploading-row__status--cancelled">
        {{ 'ADF_FILE_UPLOAD.STATUS.FILE_CANCELED_STATUS' | translate }}
    </div>
<div>