.header
    input.form-control.flex-grow-1.w-0(
        *ngIf='editingPath !== null',
        type='text',
        autofocus,
        (keydown.enter)='confirmPath()',
        (keydown.esc)='editingPath = null',
        (blur)='editingPath = null',
        [(ngModel)]='editingPath'
    )
    .breadcrumb(*ngIf='editingPath === null', (dblclick)='editPath()')
        a.breadcrumb-item.text-decoration-none((click)='navigate("/")') SFTP
        a.breadcrumb-item.text-decoration-none(
            *ngFor='let segment of pathSegments',
            (click)='navigate(segment.path)'
        ) {{segment.name}}

    .breadcrumb-spacer.flex-grow-1.h-100((dblclick)='editPath()')

    button.btn.btn-link.btn-sm.flex-shrink-0.d-flex((click)='openCreateDirectoryModal()')
        i.fas.fa-plus.me-1
        div(translate) Create directory

    button.btn.btn-link.btn-sm.flex-shrink-0.d-flex((click)='upload()')
        i.fas.fa-upload.me-1
        div(translate) Upload files

    button.btn.btn-link.btn-sm.flex-shrink-0.d-flex((click)='uploadFolder()')
        i.fas.fa-upload.me-1
        div(translate) Upload folder

    button.btn.btn-link.text-decoration-none((click)='close()') !{require('../../../tabby-core/src/icons/times.svg')}

.body(dropZone, (transfer)='uploadOneFolder($event)')
    a.alert.alert-info.d-flex.align-items-center(
        *ngIf='shouldShowCWDTip && !cwdDetectionAvailable',
        (click)='platform.openExternal("https://tabby.sh/go/cwd-detection")'
    )
        .me-auto
            strong(translate) Working directory detection
            div(translate) Learn how to allow Tabby to detect remote shell's working directory.
        button.close((click)='dismissCWDTip()')
            i.fas.fa-close

    div(*ngIf='!sftp', translate) Connecting
    div(*ngIf='sftp')
        div(*ngIf='fileList === null', translate) Loading
        .list-group.list-group-light(*ngIf='fileList !== null')
            .list-group-item.list-group-item-action.d-flex.align-items-center(
                *ngIf='path !== "/"',
                (click)='goUp()'
            )
                i.fas.fa-fw.fa-level-up-alt
                div(translate) Go up
            .list-group-item.list-group-item-action.d-flex.align-items-center(
                *ngFor='let item of fileList',
                (contextmenu)='showContextMenu(item, $event)',
                (click)='open(item)'
            )
                i.fa-fw([class]='getIcon(item)')
                div {{item.name}}
                .me-auto
                .size(*ngIf='!item.isDirectory') {{item.size|filesize}}
                .date {{item.modified|date:'medium'}}
                .mode {{getModeString(item)}}
