h3 Connections

.list-group.list-group-flush.mt-3.mb-3
    ng-container(*ngFor='let group of childGroups')
        .list-group-item.list-group-item-action.d-flex.align-items-center(
            (click)='groupCollapsed[group.name] = !groupCollapsed[group.name]'
        )
            .fa.fa-fw.fa-chevron-right(*ngIf='groupCollapsed[group.name]')
            .fa.fa-fw.fa-chevron-down(*ngIf='!groupCollapsed[group.name]')
            span.ml-3.mr-auto {{group.name || "Ungrouped"}}
            button.btn.btn-outline-info.ml-2((click)='editGroup(group)')
                i.fas.fa-edit
            button.btn.btn-outline-danger.ml-1((click)='deleteGroup(group)')
                i.fas.fa-trash
        ng-container(*ngIf='!groupCollapsed[group.name]')
            .list-group-item.list-group-item-action.pl-5.d-flex.align-items-center(
                *ngFor='let connection of group.connections',
                (click)='editConnection(connection)'
            )
                .mr-auto
                    div {{connection.name}}
                    .text-muted {{connection.host}}
                button.btn.btn-outline-danger.ml-1((click)='$event.stopPropagation(); deleteConnection(connection)')
                    i.fas.fa-trash

button.btn.btn-primary((click)='createConnection()')
    i.fas.fa-fw.fa-plus
    span.ml-2 Add connection

h3.mt-5 Options

.form-line
    .header
        .title Warn when closing active connections
    toggle(
        [(ngModel)]='config.store.ssh.warnOnClose',
        (ngModelChange)='config.save()',
    )

.form-line
    .header
        .title WinSCP path
        .descriptions When WinSCP is detected, you can launch an SCP session from the context menu.
    input.form-control(
        type='text',
        placeholder='Auto-detect',
        [(ngModel)]='config.store.ssh.winSCPPath',
        (ngModelChange)='config.save()',
    )