ul.nav-tabs(ngbNav, #nav='ngbNav')
    li(ngbNavItem)
        a(ngbNavLink, translate) General
        ng-template(ngbNavContent)
            .d-flex.w-100.mt-3
                .mb-3.me-2(
                    ngbDropdown
                )
                    label(translate) Connection
                    button.btn.btn-secondary.d-block(ngbDropdownToggle) {{getConnectionDropdownTitle()}}
                    div(ngbDropdownMenu)
                        button.dropdown-item(
                            (click)='connectionMode = "direct"',
                            translate
                        ) Direct
                        button.dropdown-item(
                            *ngIf='hostApp.platform !== Platform.Web',
                            (click)='connectionMode = "proxyCommand"',
                        )
                            div Proxy command
                            .text-muted(translate) Command's stdin/stdout is used instead of a network connection
                        button.dropdown-item(
                            (click)='connectionMode = "jumpHost"',
                        )
                            div(translate) Jump host
                            .text-muted(translate) Connect to a different host first and use it as a proxy
                        button.dropdown-item(
                            (click)='connectionMode = "socksProxy"',
                        )
                            div(translate) SOCKS proxy
                            .text-muted(translate) Connect through a proxy server
                        button.dropdown-item(
                            (click)='connectionMode = "httpProxy"',
                        )
                            div(translate) HTTP proxy
                            .text-muted(translate) Using CONNECT method

                .mb-3.w-100(*ngIf='connectionMode === "proxyCommand"')
                    label(translate) Proxy command
                    input.form-control(
                        type='text',
                        [(ngModel)]='profile.options.proxyCommand',
                    )

                .mb-3.w-100.me-2(*ngIf='connectionMode !== "proxyCommand"')
                    label(translate) Host
                    input.form-control(
                        type='text',
                        [(ngModel)]='profile.options.host',
                    )

                .mb-3(*ngIf='connectionMode !== "proxyCommand"')
                    label(translate) Port
                    input.form-control(
                        type='number',
                        placeholder='22',
                        [(ngModel)]='profile.options.port',
                    )

            .mb-3(*ngIf='connectionMode === "jumpHost"')
                label(translate) Jump host
                select.form-control([(ngModel)]='profile.options.jumpHost')
                    option([ngValue]='null', translate) Select
                    option([ngValue]='x.id', *ngFor='let x of jumpHosts') {{getJumpHostLabel(x)}}


            .d-flex.w-100(*ngIf='connectionMode === "socksProxy"')
                .mb-3.w-100.me-2
                    label(translate) SOCKS proxy host
                    input.form-control(
                        type='text',
                        [(ngModel)]='profile.options.socksProxyHost',
                    )

                .mb-3
                    label(translate) SOCKS proxy port
                    input.form-control(
                        type='number',
                        placeholder='5000',
                        [(ngModel)]='profile.options.socksProxyPort',
                    )

            .d-flex.w-100(*ngIf='connectionMode === "httpProxy"')
                .mb-3.w-100.me-2
                    label(translate) HTTP proxy host
                    input.form-control(
                        type='text',
                        [(ngModel)]='profile.options.httpProxyHost',
                    )

                .mb-3
                    label(translate) HTTP proxy port
                    input.form-control(
                        type='number',
                        placeholder='5000',
                        [(ngModel)]='profile.options.httpProxyPort',
                    )

            .mb-3
                label(translate) Username
                input.form-control(
                    type='text',
                    placeholder='Ask every time',
                    [(ngModel)]='profile.options.user',
                )

            .mb-3
                label(translate) Authentication method

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

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

            .mb-3(*ngIf='!profile.options.auth || profile.options.auth === "publicKey"')
                label(translate) Private keys
                .list-group.mb-2
                    .list-group-item.d-flex.align-items-center.p-1.ps-3(*ngFor='let path of profile.options.privateKeys')
                        i.fas.fa-key
                        .no-wrap.me-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(translate) Add a private key

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

    li(ngbNavItem)
        a(ngbNavLink, translate) Advanced
        ng-template(ngbNavContent)
            .form-line(ng:if='hostApp.platform !== Platform.Web')
                .header
                    .title(translate) X11 forwarding
                toggle([(ngModel)]='profile.options.x11')

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

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

            .form-line
                .header
                    .title(translate) Reuse session for multiple tabs
                    .description Multiplex multiple shells through the same connection
                toggle([(ngModel)]='profile.options.reuseSession')

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

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

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

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

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

    li(ngbNavItem)
        a(ngbNavLink, translate) Colors
        ng-template(ngbNavContent)
            color-scheme-selector([(model)]='profile.terminalColorScheme')

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

    li(ngbNavItem)
        a(ngbNavLink, translate) Input
        ng-template(ngbNavContent)
            input-processing-settings([options]='profile.options.input')

div([ngbNavOutlet]='nav')
