div
    h3.mb-3(translate) Rendering

    .form-line(*ngIf='hostApp.platform !== Platform.Web')
        .header
            .title(translate) Frontend
            .description(translate) Switches terminal frontend implementation (experimental)

        select.form-control(
            [(ngModel)]='config.store.terminal.frontend',
            (ngModelChange)='config.save()',
        )
            option(value='xterm') xterm
            option(value='xterm-webgl') xterm (WebGL)

    .form-line
        .header
            .title(translate) Scrollback
            .description(translate) Number of lines kept in the buffer
        input.form-control(
            type='number',
            [(ngModel)]='config.store.terminal.scrollbackLines',
            (ngModelChange)='config.save()',
        )

div.mt-4
    h3 Keyboard

    .form-line
        .header
            .title(translate, [translateParams]='{altKeyName: altKeyName}') Use {altKeyName} as the Meta key
            .description(translate) Lets the shell handle Meta key instead of OS
        toggle(
            [(ngModel)]='config.store.terminal.altIsMeta',
            (ngModelChange)='config.save()',
        )

    .form-line
        .header
            .title(translate) Scroll on input
            .description(translate) Scrolls the terminal to the bottom on user input
        toggle(
            [(ngModel)]='config.store.terminal.scrollOnInput',
            (ngModelChange)='config.save()',
        )

div.mt-4
    h3 Mouse

    .form-line
        .header
            .title(translate) Right click
            .description(*ngIf='config.store.terminal.rightClick == "paste"', translate) Long-click for context menu
        .btn-group(
            [(ngModel)]='config.store.terminal.rightClick',
            (ngModelChange)='config.save()',
            ngbRadioGroup
        )
            label.btn.btn-secondary(ngbButtonLabel)
                input(
                    type='radio',
                    ngbButton,
                    value='off'
                )
                span(translate) Off
            label.btn.btn-secondary(ngbButtonLabel)
                input(
                    type='radio',
                    ngbButton,
                    value='menu'
                )
                span(translate) Context menu
            label.btn.btn-secondary(ngbButtonLabel)
                input(
                    type='radio',
                    ngbButton,
                    value='paste'
                )
                span(translate) Paste

    .form-line
        .header
            .title(translate) Paste on middle-click

        toggle(
            [(ngModel)]='config.store.terminal.pasteOnMiddleClick',
            (ngModelChange)='config.save()',
        )

    .form-line
        .header
            .title(translate) Word separators
            .description(translate) Double-click selection will stop at these characters
        input.form-control(
            type='text',
            placeholder=' ()[]{}\'"',
            [(ngModel)]='config.store.terminal.wordSeparator',
            (ngModelChange)='config.save()',
        )

    .form-line
        .header
            .title(translate) Require a key to click links
            .description(translate) When enabled, links are only clickable while holding this key

        select.form-control(
            [(ngModel)]='config.store.clickableLinks.modifier',
            (ngModelChange)='config.save()',
        )
            option([value]='null', translate) No modifier
            option(value='ctrlKey') Ctrl
            option(value='altKey') {{altKeyName}}
            option(value='shiftKey') Shift
            option(value='metaKey') {{metaKeyName}}

.mt-4
    h3(translate) Clipboard

    .form-line
        .header
            .title(translate) Copy on select
        toggle(
            [(ngModel)]='config.store.terminal.copyOnSelect',
            (ngModelChange)='config.save()',
        )

    .form-line
        .header
            .title(translate) Bracketed paste (requires shell support)
            .description(translate) Prevents accidental execution of pasted commands
        toggle(
            [(ngModel)]='config.store.terminal.bracketedPaste',
            (ngModelChange)='config.save()',
        )

    .form-line
        .header
            .title(translate) Warn on multi-line paste
            .description(translate) Show a confirmation box when pasting multiple lines
        toggle(
            [(ngModel)]='config.store.terminal.warnOnMultilinePaste',
            (ngModelChange)='config.save()',
        )

div.mt-4
    h3 Sound

    .form-line
        .header
            .title(translate) Terminal bell
        .btn-group(
            [(ngModel)]='config.store.terminal.bell',
            (ngModelChange)='config.save()',
            ngbRadioGroup
        )
            label.btn.btn-secondary(ngbButtonLabel)
                input(
                    type='radio',
                    ngbButton,
                    [value]='"off"'
                )
                span(translate) Off
            label.btn.btn-secondary(ngbButtonLabel)
                input(
                    type='radio',
                    ngbButton,
                    [value]='"visual"'
                )
                span(translate) Visual
            label.btn.btn-secondary(ngbButtonLabel)
                input(
                    type='radio',
                    ngbButton,
                    [value]='"audible"'
                )
                span(translate) Audible

    .alert.alert-info.d-flex.align-items-center(*ngIf='config.store.terminal.bell != "audible" && (config.store.terminal.profile || "").startsWith("wsl")')
        .mr-auto(translate) WSL terminal bell can only be muted via Volume Mixer
        button.btn.btn-secondary((click)='openWSLVolumeMixer()', translate) Show Mixer

.mt-4
    h3(translate) Startup

    .form-line(*ngIf='hostApp.platform !== Platform.Web')
        .header
            .title(translate) Auto-open a terminal on app start

        toggle(
            [(ngModel)]='config.store.terminal.autoOpen',
            (ngModelChange)='config.save()',
        )

    .form-line
        .header
            .title(translate) Restore terminal tabs on app start

        toggle(
            [(ngModel)]='config.store.recoverTabs',
            (ngModelChange)='config.save()',
        )

div.mt-4(*ngIf='hostApp.platform === Platform.Windows')
    h3 Windows

    .form-line
        .header
            .title(translate) Set Tabby as %COMSPEC%
            .description(translate) Allows opening .bat files in tabs, but breaks some shells
        toggle(
            [(ngModel)]='config.store.terminal.setComSpec',
            (ngModelChange)='config.save()',
        )