h3.mb-3 Terminal

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

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

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

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

.form-line
    .header
        .title Right click
    .btn-group(
        [(ngModel)]='config.store.terminal.rightClick',
        (ngModelChange)='config.save()',
        ngbRadioGroup
    )
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                value='off'
            )
            | Off
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                value='menu'
            )
            | Context menu
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                value='paste'
            )
            | Paste

.form-line
    .header
        .title Paste on middle-click

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

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

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

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

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

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

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

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

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

.form-line
    .header
        .title Word separators
        .description 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 Warn on multi-line paste
        .description Show a confirmation box when pasting multiple lines
    toggle(
        [(ngModel)]='config.store.terminal.warnOnMultilinePaste',
        (ngModelChange)='config.save()',
    )