h3.mb-2 Appearance
.row
    .col-md-6
        .form-group
            .appearance-preview(
                [style.font-family]='config.store.terminal.font',
                [style.font-size]='config.store.terminal.fontSize + "px"',
                [style.background-color]='(config.store.terminal.background == "theme") ? null : config.store.terminal.colorScheme.background',
                [style.color]='config.store.terminal.colorScheme.foreground',
            )
                div
                    span([style.background-color]='config.store.terminal.colorScheme.colors[0]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[1]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[2]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[3]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[4]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[5]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[6]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[7]')  
                    span   
                    span([style.color]='config.store.terminal.colorScheme.colors[0]') B
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[1]') R
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[2]') G
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[3]') Y
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[4]') B
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[5]') M
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[6]') T
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[7]') W
                div
                    span([style.background-color]='config.store.terminal.colorScheme.colors[8]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[9]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[10]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[11]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[12]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[13]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[14]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[15]')  
                    span   
                    span([style.color]='config.store.terminal.colorScheme.colors[8]') B
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[9]') R
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[10]') G
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[11]') Y
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[12]') B
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[13]') M
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[14]') T
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[15]') W
                div
                    span  
                div
                    span john@doe-pc
                    span([style.color]='config.store.terminal.colorScheme.colors[1]') $
                    span  ls -l
                div
                    span drwxr-xr-x  1 root 
                    span([style.color]='config.store.terminal.colorScheme.colors[4]') directory
                div
                    span -rw-r--r--  1 root file
                div
                    span -rwxr-xr-x  1 root
                    span([style.color]='config.store.terminal.colorScheme.colors[2]')  executable
                div
                    span -rwxr-xr-x  1 root
                    span([style.color]='config.store.terminal.colorScheme.colors[6]')  sym
                    span  ->
                    span([style.color]='config.store.terminal.colorScheme.colors[1]')  link
                div
                    span  
                div
                    span john@doe-pc
                    span([style.color]='config.store.terminal.colorScheme.colors[1]') $
                    span  rm -rf /
                    span([style.background-color]='config.store.terminal.colorScheme.cursor')  


    .col-md-6
        .form-group
            label Font
            .row
                .col-8
                    input.form-control(
                        type='text',
                        [ngbTypeahead]='fontAutocomplete',
                        '[(ngModel)]'='config.store.terminal.font',
                        (ngModelChange)='config.save()',
                    )
                .col-4
                    input.form-control(
                        type='number',
                        '[(ngModel)]'='config.store.terminal.fontSize',
                        (ngModelChange)='config.save()',
                    )
            small.form-text.text-muted Font to be used in the terminal

        .form-group(*ngIf='!editingColorScheme')
            label Color scheme
            .input-group
                select.form-control(
                    [compareWith]='equalComparator',
                    '[(ngModel)]'='config.store.terminal.colorScheme',
                    (ngModelChange)='config.save()',
                )
                    option(*ngFor='let scheme of config.store.terminal.customColorSchemes', [ngValue]='scheme') Custom: {{scheme.name}}
                    option(*ngFor='let scheme of colorSchemes', [ngValue]='scheme') {{scheme.name}}
                .input-group-btn
                    button.btn.btn-secondary((click)='editScheme(config.store.terminal.colorScheme)') Edit
                .input-group-btn
                    button.btn.btn-outline-danger(
                        (click)='deleteScheme(config.store.terminal.colorScheme)',
                        *ngIf='isCustomScheme(config.store.terminal.colorScheme)'
                    )
                        i.fa.fa-trash-o

        .form-group(*ngIf='editingColorScheme')
            label Editing
            .input-group
                input.form-control(type='text', '[(ngModel)]'='editingColorScheme.name')
                .input-group-btn
                    button.btn.btn-secondary((click)='saveScheme()') Save
                .input-group-btn
                    button.btn.btn-secondary((click)='cancelEditing()') Cancel


        .form-group(*ngIf='editingColorScheme')
            color-picker(
                '[(model)]'='editingColorScheme.foreground',
                (modelChange)='config.save(); schemeChanged = true',
                title='FG',
            )
            color-picker(
                '[(model)]'='editingColorScheme.background',
                (modelChange)='config.save(); schemeChanged = true',
                title='BG',
            )
            color-picker(
                '[(model)]'='editingColorScheme.cursor',
                (modelChange)='config.save(); schemeChanged = true',
                title='CU',
            )
            color-picker(
                *ngFor='let _ of editingColorScheme.colors; let idx = index; trackBy: colorsTrackBy',
                '[(model)]'='editingColorScheme.colors[idx]',
                (modelChange)='config.save(); schemeChanged = true',
                [title]='idx',
            )

        .d-flex
            .form-group.mr-3
                label Terminal background
                br
                .btn-group(
                    '[(ngModel)]'='config.store.terminal.background',
                    (ngModelChange)='config.save()',
                    ngbRadioGroup
                )
                    label.btn.btn-secondary(ngbButtonLabel)
                        input(
                            type='radio',
                            ngbButton,
                            [value]='"theme"'
                        )
                        | From theme
                    label.btn.btn-secondary(ngbButtonLabel)
                        input(
                            type='radio',
                            ngbButton,
                            [value]='"colorScheme"'
                        )
                        | From colors

            .form-group
                label Cursor shape
                br
                .btn-group(
                    [(ngModel)]='config.store.terminal.cursor',
                    (ngModelChange)='config.save()',
                    ngbRadioGroup
                )
                    label.btn.btn-secondary(ngbButtonLabel)
                        input(
                            type='radio',
                            ngbButton,
                            [value]='"block"'
                        )
                        | █
                    label.btn.btn-secondary(ngbButtonLabel)
                        input(
                            type='radio',
                            ngbButton,
                            [value]='"beam"'
                        )
                        | |
                    label.btn.btn-secondary(ngbButtonLabel)
                        input(
                            type='radio',
                            ngbButton,
                            [value]='"underline"'
                        )
                        | ▁

h3.mt-2.mb-2 Behaviour

.row
    .col-md-6
        .d-flex
            .form-group.mr-3
                label Shell
                select.form-control(
                    '[(ngModel)]'='config.store.terminal.shell',
                    (ngModelChange)='config.save()',
                )
                    option(
                        *ngFor='let shell of shells',
                        [ngValue]='shell.id'
                    ) {{shell.name}}

            .form-group
                label Session persistence
                select.form-control(
                    '[(ngModel)]'='config.store.terminal.persistence',
                    (ngModelChange)='config.save()',
                )
                    option([ngValue]='null') Off
                    option(
                        *ngFor='let provider of persistenceProviders',
                        [ngValue]='provider.id'
                    ) {{provider.displayName}}

        .form-group(*ngIf='config.store.terminal.shell == "custom"')
            label Custom shell
            input.form-control(
                type='text',
                '[(ngModel)]'='config.store.terminal.customShell',
                (ngModelChange)='config.save()',
            )

        .form-group
            label Working directory
            input.form-control(
                type='text',
                placeholder='Home directory',
                '[(ngModel)]'='config.store.terminal.workingDirectory',
                (ngModelChange)='config.save()',
            )

        .form-group
            label Auto-open a terminal on app start
            br
            .btn-group(
                '[(ngModel)]'='config.store.terminal.autoOpen',
                (ngModelChange)='config.save()',
                ngbRadioGroup
            )
                label.btn.btn-secondary(ngbButtonLabel)
                    input(
                        type='radio',
                        ngbButton,
                        [value]='false'
                    )
                    | Off
                label.btn.btn-secondary(ngbButtonLabel)
                    input(
                        type='radio',
                        ngbButton,
                        [value]='true'
                    )
                    | On
                    
    .col-md-6
        .d-flex
            .form-group.mr-3
                label Terminal bell
                br
                .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

            .form-group
                label Blink cursor
                br
                .btn-group(
                    '[(ngModel)]'='config.store.terminal.cursorBlink',
                    (ngModelChange)='config.save()',
                    ngbRadioGroup
                )
                    label.btn.btn-secondary(ngbButtonLabel)
                        input(
                            type='radio',
                            ngbButton,
                            [value]='false'
                        )
                        | Off
                    label.btn.btn-secondary(ngbButtonLabel)
                        input(
                            type='radio',
                            ngbButton,
                            [value]='true'
                        )
                        | On

        .d-flex
            .form-group.mr-3
                label Copy on select
                br
                .btn-group(
                    '[(ngModel)]'='config.store.terminal.copyOnSelect',
                    (ngModelChange)='config.save()',
                    ngbRadioGroup
                )
                    label.btn.btn-secondary(ngbButtonLabel)
                        input(
                            type='radio',
                            ngbButton,
                            [value]='false'
                        )
                        | Off
                    label.btn.btn-secondary(ngbButtonLabel)
                        input(
                            type='radio',
                            ngbButton,
                            [value]='true'
                        )
                        | On

            .form-group
                label Right click behaviour
                br
                .btn-group(
                    '[(ngModel)]'='config.store.terminal.rightClick',
                    (ngModelChange)='config.save()',
                    ngbRadioGroup
                )
                    label.btn.btn-secondary(ngbButtonLabel)
                        input(
                            type='radio',
                            ngbButton,
                            value='menu'
                        )
                        | Menu
                    label.btn.btn-secondary(ngbButtonLabel)
                        input(
                            type='radio',
                            ngbButton,
                            value='paste'
                        )
                        | Paste