ul.nav-tabs(ngbNav, #nav='ngbNav')
    li(ngbNavItem)
        a(ngbNavLink) General
        ng-template(ngbNavContent)
            .d-flex.w-100(*ngIf='!useProxyCommand')
                .form-group.w-100.mr-4
                    label Host
                    input.form-control(
                        type='text',
                        [(ngModel)]='profile.options.host',
                    )

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

            .alert.alert-info(*ngIf='useProxyCommand')
                .mr-auto Using a proxy command instead of a network connection

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

            .form-group
                label Authentication method

                .btn-group.mt-1.w-100(
                    [(ngModel)]='profile.options.auth',
                    ngbRadioGroup
                )
                    label.btn.btn-secondary(ngbButtonLabel)
                        input(type='radio', ngbButton, [value]='null')
                        i.far.fa-lightbulb
                        .m-0 Auto
                    label.btn.btn-secondary(ngbButtonLabel)
                        input(type='radio', ngbButton, [value]='"password"')
                        i.fas.fa-font
                        .m-0 Password
                    label.btn.btn-secondary(ngbButtonLabel)
                        input(type='radio', ngbButton, [value]='"publicKey"')
                        i.fas.fa-key
                        .m-0 Key
                    label.btn.btn-secondary(ngbButtonLabel, ng:if='hostApp.platform !== Platform.Web')
                        input(type='radio', ngbButton, [value]='"agent"')
                        i.fas.fa-user-secret
                        .m-0 Agent
                    label.btn.btn-secondary(ngbButtonLabel)
                        input(type='radio', ngbButton, [value]='"keyboardInteractive"')
                        i.far.fa-keyboard
                        .m-0 Interactive

            .form-line(*ngIf='!profile.options.auth || profile.options.auth === "password"')
                .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-group(*ngIf='!profile.options.auth || profile.options.auth === "publicKey"')
                label Private keys
                .list-group.mb-2
                    .list-group-item.d-flex.align-items-center.p-1.pl-3(*ngFor='let path of profile.options.privateKeys')
                        i.fas.fa-key
                        .no-wrap.mr-auto {{path}}
                        button.btn.btn-link((click)='removePrivateKey(path)')
                            i.fas.fa-trash
                button.btn.btn-secondary((click)='addPrivateKey()')
                    i.fas.fa-folder-open
                    span Add a private key

    li(ngbNavItem)
        a(ngbNavLink) Ports
        ng-template(ngbNavContent)
            ssh-port-forwarding-config(
                [model]='profile.options.forwardedPorts',
                (forwardAdded)='onForwardAdded($event)',
                (forwardRemoved)='onForwardRemoved($event)'
            )

    li(ngbNavItem)
        a(ngbNavLink) Advanced
        ng-template(ngbNavContent)
            .form-line(*ngIf='!useProxyCommand')
                .header
                    .title Jump host
                select.form-control([(ngModel)]='profile.options.jumpHost')
                    option(value='') None
                    option([ngValue]='x.id', *ngFor='let x of jumpHosts') {{x.name}}

            .form-line(ng:if='hostApp.platform !== Platform.Web')
                .header
                    .title X11 forwarding
                toggle([(ngModel)]='profile.options.x11')

            .form-line(ng:if='hostApp.platform !== Platform.Web')
                .header
                    .title Agent forwarding
                toggle([(ngModel)]='profile.options.agentForward')

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

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

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

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

            .form-line(*ngIf='!profile.options.jumpHost && hostApp.platform !== Platform.Web')
                .header
                    .title Use a proxy command
                    .description Command's stdin/stdout is used instead of a network connection
                toggle([(ngModel)]='useProxyCommand')

            .form-group(*ngIf='useProxyCommand && !profile.options.jumpHost')
                label Proxy command
                input.form-control(
                    type='text',
                    [(ngModel)]='profile.options.proxyCommand',
                )

    li(ngbNavItem)
        a(ngbNavLink) Ciphers
        ng-template(ngbNavContent)
            .form-line.align-items-start
                .header
                    .title Ciphers
                .w-75
                    div(*ngFor='let alg of supportedAlgorithms.cipher')
                        checkbox([text]='alg', [(ngModel)]='algorithms.cipher[alg]')

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

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

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

    li(ngbNavItem)
        a(ngbNavLink) Login scripts
        ng-template(ngbNavContent)
            login-scripts-settings([options]='profile.options')

div([ngbNavOutlet]='nav')