.modal-body
    ngb-tabset([activeId]='basic')
        ngb-tab(id='basic')
            ng-template(ngbTabTitle) General
            ng-template(ngbTabContent)
                .form-group
                    label Name
                    input.form-control(
                        type='text',
                        autofocus,
                        [(ngModel)]='connection.name',
                    )

                .form-group
                    label Group
                    input.form-control(
                        type='text',
                        placeholder='Ungrouped',
                        [(ngModel)]='connection.group',
                    )

                .form-group
                    label Host
                    input.form-control(
                        type='text',
                        [(ngModel)]='connection.host',
                    )

                .form-group
                    label Port
                    input.form-control(
                        type='number',
                        placeholder='22',
                        [(ngModel)]='connection.port',
                    )

                .form-group
                    label Username
                    input.form-control(
                        type='text',
                        [(ngModel)]='connection.user',
                    )

                .form-line
                    .header
                        .title Password
                        .description(*ngIf='!hasSavedPassword') Save a password in the keychain
                        .description(*ngIf='hasSavedPassword') There is a saved password for this connection
                    button.btn.btn-outline-success.ml-4(*ngIf='!hasSavedPassword', (click)='setPassword()')
                        i.fas.fa-key
                        span Set password
                    button.btn.btn-danger.ml-4(*ngIf='hasSavedPassword', (click)='clearSavedPassword()')
                        i.fas.fa-trash-alt
                        span Forget

                .form-line
                    .header
                        .title Private key
                        .description Path to the private key file
                    .input-group
                        input.form-control(
                            type='text',
                            placeholder='Key file path',
                            [(ngModel)]='connection.privateKey'
                        )
                        .input-group-append
                            button.btn.btn-secondary((click)='selectPrivateKey()')
                                i.fas.fa-folder-open

        ngb-tab(id='advanced')
            ng-template(ngbTabTitle) Advanced
            ng-template(ngbTabContent)
                .form-line
                    .header
                        .title X11 forwarding
                    toggle([(ngModel)]='connection.x11')

                .form-line
                    .header
                        .title Tab color
                    input.form-control(
                        type='text',
                        autofocus,
                        [(ngModel)]='connection.color',
                        placeholder='#000000'
                    )

                .form-line
                    .header
                        .title Disable dynamic tab title
                        .description Connection name will be used as a title instead
                    toggle([(ngModel)]='connection.disableDynamicTitle')

                .form-line
                    .header
                        .title Skip MoTD/banner
                        .description Will prevent the SSH greeting from showing up
                    toggle([(ngModel)]='connection.skipBanner')

                .form-line
                    .header
                        .title Keep Alive Interval (Milliseconds)
                    input.form-control(
                        type='number',
                        placeholder='0',
                        [(ngModel)]='connection.keepaliveInterval',
                    )

                .form-line
                    .header
                        .title Max Keep Alive Count
                    input.form-control(
                        type='number',
                        placeholder='3',
                        [(ngModel)]='connection.keepaliveCountMax',
                    )

                .form-line
                    .header
                        .title Ready Timeout (Milliseconds)
                    input.form-control(
                        type='number',
                        placeholder='20000',
                        [(ngModel)]='connection.readyTimeout',
                    )

        ngb-tab(id='ciphers')
            ng-template(ngbTabTitle) Ciphers
            ng-template(ngbTabContent)
                .form-line.align-items-start
                    .header
                        .title Ciphers
                    .w-50
                        div(*ngFor='let alg of supportedAlgorithms.cipher')
                            checkbox([text]='alg', [(ngModel)]='algorithms.cipher[alg]')

                .form-line.align-items-start
                    .header
                        .title Key exchange
                    .w-50
                        div(*ngFor='let alg of supportedAlgorithms.kex')
                            checkbox([text]='alg', [(ngModel)]='algorithms.kex[alg]')

                .form-line.align-items-start
                    .header
                        .title HMAC
                    .w-50
                        div(*ngFor='let alg of supportedAlgorithms.hmac')
                            checkbox([text]='alg', [(ngModel)]='algorithms.hmac[alg]')

                .form-line.align-items-start
                    .header
                        .title Host key
                    .w-50
                        div(*ngFor='let alg of supportedAlgorithms.serverHostKey')
                            checkbox([text]='alg', [(ngModel)]='algorithms.serverHostKey[alg]')


        ngb-tab(id='scripts')
            ng-template(ngbTabTitle) Login scripts
            ng-template(ngbTabContent)
                table(*ngIf='connection.scripts.length > 0')
                    tr
                        th String to expect
                        th String to be sent
                        th.pl-2 Regex
                        th.pl-2 Optional
                        th.pl-2 Actions
                    tr(*ngFor='let script of connection.scripts')
                        td.pr-2
                            input.form-control(
                                type='text',
                                [(ngModel)]='script.expect'
                            )
                        td
                            input.form-control(
                                type='text',
                                [(ngModel)]='script.send'
                            )
                        td.pl-2
                            checkbox(
                                [(ngModel)]='script.isRegex',
                            )
                        td.pl-2
                            checkbox(
                                [(ngModel)]='script.optional',
                            )
                        td.pl-2
                            .input-group.flex-nowrap
                                button.btn.btn-outline-info.ml-0((click)='moveScriptUp(script)')
                                    i.fas.fa-arrow-up
                                button.btn.btn-outline-info.ml-0((click)='moveScriptDown(script)')
                                    i.fas.fa-arrow-down
                                button.btn.btn-outline-danger.ml-0((click)='deleteScript(script)')
                                    i.fas.fa-trash

                button.btn.btn-outline-info.mt-2((click)='addScript()')
                    i.fas.fa-plus
                    span New item

.modal-footer
    button.btn.btn-outline-primary((click)='save()') Save
    button.btn.btn-outline-danger((click)='cancel()') Cancel