h3.mb-3 Appearance
.d-flex
    .mr-5
        .form-line
            .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 Font

            .d-flex.w-75
                input.form-control.w-75(
                    type='text',
                    [ngbTypeahead]='fontAutocomplete',
                    [(ngModel)]='config.store.terminal.font',
                    (ngModelChange)='config.save()',
                )
                input.form-control.w-25(
                    type='number',
                    max='48',
                    [(ngModel)]='config.store.terminal.fontSize',
                    (ngModelChange)='config.save()',
                )

        .form-line
            .header
                .title Enable font ligatures
            toggle(
                [(ngModel)]='config.store.terminal.ligatures', 
                (ngModelChange)='config.save()',
            )

        .form-line(*ngIf='!editingColorScheme')
            .header
                .title Color scheme

            .input-group.w-50
                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.fas.fa-trash

        .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',
            )

    div
        .form-group
            .appearance-preview(
                [style.font-family]='getPreviewFontFamily()',
                [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',
                [style.font-feature-settings]='\'"liga" \' + config.store.terminal.ligatures ? 1 : 0',
                [style.font-variant-ligatures]='config.store.terminal.ligatures ? "initial" : "none"',
            )
                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  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;

.form-line
    .header
        .title Terminal background

    .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 color scheme
            
.form-line
    .header
        .title Cursor shape

    .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"'
            )
            | ▁
    
.form-line
    .header
        .title Blink cursor

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