.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([title]='transfer.getName()') {{transfer.getName()}}
        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')}