.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]') &nbsp;
                    span([style.background-color]='config.store.terminal.colorScheme.colors[1]') &nbsp;
                    span([style.background-color]='config.store.terminal.colorScheme.colors[2]') &nbsp;
                    span([style.background-color]='config.store.terminal.colorScheme.colors[3]') &nbsp;
                    span([style.background-color]='config.store.terminal.colorScheme.colors[4]') &nbsp;
                    span([style.background-color]='config.store.terminal.colorScheme.colors[5]') &nbsp;
                    span([style.background-color]='config.store.terminal.colorScheme.colors[6]') &nbsp;
                    span([style.background-color]='config.store.terminal.colorScheme.colors[7]') &nbsp;
                    span &nbsp;&nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[0]') B
                    span &nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[1]') R
                    span &nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[2]') G
                    span &nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[3]') Y
                    span &nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[4]') B
                    span &nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[5]') M
                    span &nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[6]') T
                    span &nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[7]') W
                div
                    span([style.background-color]='config.store.terminal.colorScheme.colors[8]') &nbsp;
                    span([style.background-color]='config.store.terminal.colorScheme.colors[9]') &nbsp;
                    span([style.background-color]='config.store.terminal.colorScheme.colors[10]') &nbsp;
                    span([style.background-color]='config.store.terminal.colorScheme.colors[11]') &nbsp;
                    span([style.background-color]='config.store.terminal.colorScheme.colors[12]') &nbsp;
                    span([style.background-color]='config.store.terminal.colorScheme.colors[13]') &nbsp;
                    span([style.background-color]='config.store.terminal.colorScheme.colors[14]') &nbsp;
                    span([style.background-color]='config.store.terminal.colorScheme.colors[15]') &nbsp;
                    span &nbsp;&nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[8]') B
                    span &nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[9]') R
                    span &nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[10]') G
                    span &nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[11]') Y
                    span &nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[12]') B
                    span &nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[13]') M
                    span &nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[14]') T
                    span &nbsp;
                    span([style.color]='config.store.terminal.colorScheme.colors[15]') W
                div
                    span &nbsp;
                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 &nbsp;
                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 &nbsp;
                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') &nbsp;


    .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
                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 Cursor shape
                br
                div(
                    [(ngModel)]='config.store.terminal.cursor',
                    (ngModelChange)='config.save()',
                    ngbRadioGroup
                )
                    label.btn.btn-secondary
                        input(
                            type='radio',
                            [value]='"block"'
                        )
                        | █
                    label.btn.btn-secondary
                        input(
                            type='radio',
                            [value]='"beam"'
                        )
                        | |
                    label.btn.btn-secondary
                        input(
                            type='radio',
                            [value]='"underline"'
                        )
                        | ▁

        .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

        .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}}
