.modal-body
    ngb-tabset(type='pills', [activeId]='basic')
        ngb-tab(id='basic')
            ng-template(ngbTabTitle)
                | Basic Setting
            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', 
                    )
                    
                .alert.alert-info.d-flex.bg-transparent.text-white.align-items-center(*ngIf='hasSavedPassword')
                    .mr-auto There is a saved password for this connection
                    button.btn.btn-danger.ml-4((click)='clearSavedPassword()') Forget
                    
                .form-group
                    label Private key 
                    .input-group
                        input.form-control(
                            type='text', 
                            placeholder='Key file path', 
                            [(ngModel)]='connection.privateKey'
                        )
                        .input-group-btn
                            button.btn.btn-secondary((click)='selectPrivateKey()')
                                i.fas.fa-folder-open

        ngb-tab(id='advanced')
            ng-template(ngbTabTitle)
                | Advanced Setting
            ng-template(ngbTabContent)
                .form-group
                    label Keep Alive Interval (Milliseconds)
                    input.form-control(
                        type='number', 
                        placeholder='0', 
                        [(ngModel)]='connection.keepaliveInterval', 
                    )

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

                .form-group
                    label Ready Timeout (Milliseconds)
                    input.form-control(
                        type='number', 
                        placeholder='20000', 
                        [(ngModel)]='connection.readyTimeout', 
                    )
                    
                .form-group
                    label Ciphers
                    div(*ngFor='let alg of supportedAlgorithms.cipher')
                        checkbox([text]='alg', [(ngModel)]='algorithms.cipher[alg]')

                .form-group
                    label Key exchange
                    div(*ngFor='let alg of supportedAlgorithms.kex')
                        checkbox([text]='alg', [(ngModel)]='algorithms.kex[alg]')

                .form-group
                    label HMAC
                    div(*ngFor='let alg of supportedAlgorithms.hmac')
                        checkbox([text]='alg', [(ngModel)]='algorithms.hmac[alg]')

                .form-group
                    label Host key
                    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
                    tr
                        th String to expect
                        th String to be sent
                        th Regex
                        th Optional
                        th Actions
                    tr(*ngFor='let script of connection.scripts')
                        td
                            input.form-control(
                                type='text', 
                                [(ngModel)]='script.expect'
                            )
                        td
                            input.form-control(
                                type='text', 
                                [(ngModel)]='script.send'
                            )
                        td
                            toggle(
                                [(ngModel)]='script.isRegex',
                            )
                        td
                            toggle(
                                [(ngModel)]='script.optional',
                            )
                        td
                            .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
                    tr
                        td
                            input.form-control(
                                type='text', 
                                placeholder='Enter a string to expect', 
                                [(ngModel)]='newScript.expect'
                            )
                        td
                            input.form-control(
                                type='text', 
                                placeholder='Enter a string to be sent', 
                                [(ngModel)]='newScript.send'
                            )
                        td
                            toggle(
                                [(ngModel)]='newScript.isRegex',
                            )
                        td
                            toggle(
                                [(ngModel)]='newScript.optional',
                            )
                        td
                            .input-group.flex-nowrap
                                button.btn.btn-outline-info.ml-0((click)='addScript()')
                                    i.fas.fa-check
                                button.btn.btn-outline-danger.ml-0((click)='clearScript()')
                                    i.fas.fa-trash
                    
.modal-footer
    button.btn.btn-outline-primary((click)='save()') Save
    button.btn.btn-outline-danger((click)='cancel()') Cancel