.d-flex.align-items-center
    .dropdown-header(translate) File transfers
    button.btn.btn-link.ms-auto((click)='removeAll(); $event.stopPropagation()') !{require('../icons/times.svg')}
.transfer(*ngFor='let transfer of transfers', (click)='showTransfer(transfer)')
    .icon(*ngIf='isDownload(transfer)') !{require('../icons/download.svg')}
    .icon(*ngIf='!isDownload(transfer)') !{require('../icons/upload.svg')}
    .main
        label.no-wrap([ngbTooltip]='transfer.getName()')
            | {{transfer.getName()}}
            span.ms-2.text-muted(*ngIf='transfer.getStatus()') ({{transfer.getStatus()}})
        ngb-progressbar([type]='transfer.isComplete() ? "success" : transfer.isCancelled() ? "danger" : "info"', [value]='getProgress(transfer)')
        .metadata
            .size {{transfer.getSize()|filesize}}
            .speed(*ngIf='transfer.getSpeed()') {{transfer.getSpeed()|filesize}}/s

    button.btn.btn-link(
        *ngIf='!transfer.isComplete()',
        (click)='removeTransfer(transfer); $event.stopPropagation()'
    ) !{require('../icons/times.svg')}
    button.btn.btn-link(
        *ngIf='transfer.isComplete()',
        (click)='removeTransfer(transfer); $event.stopPropagation()'
    ) !{require('../icons/check.svg')}
