button.btn.btn-outline-warning.btn-block(*ngIf='config.restartRequested', '(click)'='restartApp()') Restart the app to apply changes

ngb-tabset.vertical(type='tabs')
    ngb-tab
        ng-template(ngbTabTitle)
            | Application
        ng-template(ngbTabContent)
            .row
                .col.col-lg-6
                    .form-group
                        label Theme
                        select.form-control(
                            '[(ngModel)]'='config.store.appearance.theme',
                            (ngModelChange)='config.save()',
                        )
                            option(*ngFor='let theme of themes', [ngValue]='theme.name') {{theme.name}}

                    .form-group
                        label Show tabs
                        br
                        div(
                            '[(ngModel)]'='config.store.appearance.tabsLocation',
                            (ngModelChange)='config.save()',
                            ngbRadioGroup
                        )
                            label.btn.btn-secondary
                                input(
                                    type='radio',
                                    [value]='"top"'
                                )
                                | On the top
                            label.btn.btn-secondary
                                input(
                                    type='radio',
                                    [value]='"bottom"'
                                )
                                | At the bottom
                .col.col-lg-6
                    .form-group
                        label Window frame
                        br
                        div(
                            '[(ngModel)]'='config.store.appearance.frame'
                            '(ngModelChange)'='config.save(); config.requestRestart()'
                            ngbRadioGroup
                        )
                            label.btn.btn-secondary
                                input(
                                    type='radio',
                                    [value]='"native"'
                                )
                                | Native
                            label.btn.btn-secondary
                                input(
                                    type='radio',
                                    [value]='"thin"'
                                )
                                | Thin
                            label.btn.btn-secondary
                                input(
                                    type='radio',
                                    [value]='"full"'
                                )
                                | Full
                        small.form-text.text-muted Whether a custom window or an OS native window should be used

                    .row
                        .col.col-auto
                            .form-group
                                label Dock the terminal
                                br
                                div(
                                    '[(ngModel)]'='config.store.appearance.dock'
                                    '(ngModelChange)'='config.save(); docking.dock()'
                                    ngbRadioGroup
                                )
                                    label.btn.btn-secondary
                                        input(
                                            type='radio',
                                            [value]='"off"'
                                        )
                                        | Off
                                    label.btn.btn-secondary
                                        input(
                                            type='radio',
                                            [value]='"top"'
                                        )
                                        | Top
                                    label.btn.btn-secondary
                                        input(
                                            type='radio',
                                            [value]='"left"'
                                        )
                                        | Left
                                    label.btn.btn-secondary
                                        input(
                                            type='radio',
                                            [value]='"right"'
                                        )
                                        | Right
                                    label.btn.btn-secondary
                                        input(
                                            type='radio',
                                            [value]='"bottom"'
                                        )
                                        | Bottom

                            .form-group(*ngIf='config.store.appearance.dock != "off"')
                                label Display on
                                br
                                div(
                                    [(ngModel)]='config.store.appearance.dockScreen',
                                    (ngModelChange)='config.save(); docking.dock()',
                                    ngbRadioGroup
                                )
                                    label.btn.btn-secondary
                                        input(
                                            type='radio',
                                            value='current'
                                        )
                                        | Current
                                    label.btn.btn-secondary(*ngFor='let screen of screens')
                                        input(
                                            type='radio',
                                            [value]='screen.id'
                                        )
                                        | {{screen.name}}
                        .col.col-auto
                            .form-group(*ngIf='config.store.appearance.dock != "off"')
                                label Docked terminal size
                                br
                                input(
                                    type='range',
                                    '[(ngModel)]'='config.store.appearance.dockFill',
                                    '(mouseup)'='config.save(); docking.dock()',
                                    min='0.05',
                                    max='1',
                                    step='0.01'
                                )

                    .form-group
                        label Debugging
                        div
                            button.btn.btn-secondary((click)='hostApp.openDevTools()')
                                i.fa.fa-bug
                                span Open DevTools

            .form-group
                label Custom CSS
                textarea.form-control(
                    [(ngModel)]='config.store.appearance.css',
                    '(ngModelChange)'='config.save()',
                )
                    
    ngb-tab
        ng-template(ngbTabTitle)
            | Hotkeys
        ng-template(ngbTabContent)
            input.form-control(type='search', placeholder='Search hotkeys', [(ngModel)]='hotkeyFilter')
            .form-group
                table.hotkeys-table
                    tr
                        th Name
                        th ID
                        th Hotkey 
                    tr(*ngFor='let hotkey of hotkeyDescriptions|filterBy:["name"]:hotkeyFilter')
                        td {{hotkey.name}}
                        td {{hotkey.id}}
                        td
                            multi-hotkey-input(
                                '[(model)]'='config.store.hotkeys[hotkey.id]'
                                '(modelChange)'='config.save(); docking.dock()'
                            )
                    
    ngb-tab(*ngFor='let provider of settingsProviders')
        ng-template(ngbTabTitle)
            | {{provider.title}}
        ng-template(ngbTabContent)
            settings-tab-body([provider]='provider')
