h3.mb-3 Appearance
.d-flex
    .mr-5.w-100
        .form-line
            .header
                .title Font

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

        .alert.alert-info.d-flex.align-items-center(*ngIf='config.store.terminal.ligatures && config.store.terminal.frontend == "xterm-webgl"') Ligatures are not supported by the WebGL frontend


    color-scheme-preview([scheme]='config.store.terminal.colorScheme', [fontPreview]='true')

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

.form-line
    .header
        .title Hide tab index

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

.form-line
    .header
        .title Hide tab close button

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

.form-line
    .header
        .title Fallback font
        .description A second font family used to display characters missing in the main font

    input.form-control(
        type='text',
        [ngbTypeahead]='fontAutocomplete',
        [(ngModel)]='config.store.terminal.fallbackFont',
        (ngModelChange)='config.save()'
    )
