.row
    .col-md-6
        .form-group
            label Preview
            .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  webpack
                div
                    span   Asset     Size
                div
                    span([style.color]='config.store.terminal.colorScheme.colors[2]') main.js
                    span   234 kB
                    span([style.color]='config.store.terminal.colorScheme.colors[2]')  [emitted]
                div
                    span([style.color]='config.store.terminal.colorScheme.colors[3]')  big.js
                    span([style.color]='config.store.terminal.colorScheme.colors[3]')   1.2 MB
                    span([style.color]='config.store.terminal.colorScheme.colors[2]')  [emitted]
                    span([style.color]='config.store.terminal.colorScheme.colors[3]')  [big]
                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',
            )

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

        .form-group
            label Shell
            select.form-control(
                '[(ngModel)]'='config.store.terminal.shell',
                (ngModelChange)='config.save()',
            )
                option(
                    *ngFor='let shell of shells',
                    [ngValue]='shell.command'
                ) {{shell.name}}

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