h3.mb-3(translate) Window

.form-line(*ngIf='themes.length > 1')
    .header
        .title(translate) Theme
    select.form-control(
        [(ngModel)]='config.store.appearance.theme',
        (ngModelChange)='saveConfiguration()',
    )
        option(*ngFor='let theme of themes', [ngValue]='theme.name') {{theme.name|translate}}

.form-line
    .header
        .title(translate) Spaciness
        .description(translate) Controls the amount of space between elements
    input(
        type='range',
        [(ngModel)]='config.store.appearance.spaciness',
        (mouseup)='saveConfiguration()',
        min='0.6',
        max='1.4',
        step='0.1'
    )

.form-line(*ngIf='hostApp.platform === Platform.Web')
    .header
        .title(translate) Ask before closing the browser tab
        .description(translate) Prevents accidental closing
    toggle(
        [(ngModel)]='config.store.web.preventAccidentalTabClosure',
        (ngModelChange)='saveConfiguration()',
    )


.form-line(*ngIf='platform.supportsWindowControls')
    .header
        .title(*ngIf='hostApp.platform !== Platform.macOS', translate) Acrylic background
        .title(*ngIf='hostApp.platform === Platform.macOS', translate) Vibrancy
        .description(translate) Gives the window a blurred transparent background

    toggle(
        [(ngModel)]='config.store.appearance.vibrancy',
        (ngModelChange)='saveConfiguration()'
    )

.form-line(*ngIf='config.store.appearance.vibrancy && isFluentVibrancySupported && config.store.hacks.enableFluentBackground')
    .header
        .title(translate) Background type
    .btn-group
        input.btn-check(
            type='radio',
            name='vibracy',
            [(ngModel)]='config.store.appearance.vibrancyType',
            (ngModelChange)='saveConfiguration()',
            id='vibrancyTypeBlur',
            [value]='"blur"'
        )
        label.btn.btn-secondary(
            for='vibrancyTypeBlur'
        )
            span(translate) Blur
        input.btn-check(
            type='radio',
            name='vibracy',
            [(ngModel)]='config.store.appearance.vibrancyType',
            (ngModelChange)='saveConfiguration()',
            id='vibrancyTypeFluent',
            [value]='"fluent"'
        )
        label.btn.btn-secondary(
            for='vibrancyTypeFluent'
        )
            span Fluent

.form-line(*ngIf='platform.supportsWindowControls')
    .header
        .title(translate) Opacity
    input(
        type='range',
        [(ngModel)]='config.store.appearance.opacity',
        (ngModelChange)='saveConfiguration(); (hostApp.platform === Platform.Linux && config.requestRestart())',
        min='0.4',
        max='1',
        step='0.01'
    )

.form-line(*ngIf='platform.supportsWindowControls')
    .header
        .title(translate) Window frame
        .description(translate) Whether a custom window or an OS native window should be used

    .btn-group
        input.btn-check(
            type='radio',
            name='frame',
            [(ngModel)]='config.store.appearance.frame',
            (ngModelChange)='saveConfiguration(true)',
            id='frameNative',
            [value]='"native"'
        )
        label.btn.btn-secondary(for='frameNative')
            span(translate) Native
        input.btn-check(
            type='radio',
            name='frame',
            [(ngModel)]='config.store.appearance.frame',
            (ngModelChange)='saveConfiguration(true)',
            id='frameThin',
            [value]='"thin"'
        )
        label.btn.btn-secondary(for='frameThin')
            span(translate) Thin
        input.btn-check(
            type='radio',
            name='frame',
            [(ngModel)]='config.store.appearance.frame',
            (ngModelChange)='saveConfiguration(true)',
            id='frameFull',
            [value]='"full"'
        )
        label.btn.btn-secondary(for='frameFull')
            span(translate) Full

.form-line(*ngIf='hostApp.platform !== Platform.Web && hostApp.platform !== Platform.Linux')
    .header
        .title(translate) Hide tray
        .description(translate) Hide Tabby in tray or menu bar.
    toggle(
        [(ngModel)]='config.store.hideTray',
        (ngModelChange)='saveConfiguration(true)'
    )

h3.mt-4(translate) Docking

.form-line(*ngIf='docking')
    .header
        .title(translate) Dock the terminal
        .description(translate) Snaps the window to a side of the screen

    .btn-group
        input.btn-check(
            type='radio',
            name='docking',
            [(ngModel)]='config.store.appearance.dock',
            (ngModelChange)='saveConfiguration(); docking.dock()',
            id='dockingOff',
            [value]='"off"'
        )
        label.btn.btn-secondary(for='dockingOff')
            span(translate) Off
        input.btn-check(
            type='radio',
            name='docking',
            [(ngModel)]='config.store.appearance.dock',
            (ngModelChange)='saveConfiguration(); docking.dock()',
            id='dockingTop',
            [value]='"top"'
        )
        label.btn.btn-secondary(for='dockingTop')
            span(translate) Top
        input.btn-check(
            type='radio',
            name='docking',
            [(ngModel)]='config.store.appearance.dock',
            (ngModelChange)='saveConfiguration(); docking.dock()',
            id='dockingLeft',
            [value]='"left"'
        )
        label.btn.btn-secondary(for='dockingLeft')
            span(translate) Left
        input.btn-check(
            type='radio',
            name='docking',
            [(ngModel)]='config.store.appearance.dock',
            (ngModelChange)='saveConfiguration(); docking.dock()',
            id='dockingRight',
            [value]='"right"'
        )
        label.btn.btn-secondary(for='dockingRight')
            span(translate) Right
        input.btn-check(
            type='radio',
            name='docking',
            [(ngModel)]='config.store.appearance.dock',
            (ngModelChange)='saveConfiguration(); docking.dock()',
            id='dockingBottom',
            [value]='"bottom"'
        )
        label.btn.btn-secondary(for='dockingBottom')
            span(translate) Bottom

.ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
    .header
        .title(translate) Display on
        .description(translate) Snaps the window to a side of the screen

    div
        input.btn-check(
            type='radio',
            name='dockScreen',
            [(ngModel)]='config.store.appearance.dockScreen',
            (ngModelChange)='saveConfiguration(); docking.dock()',
            id='dockScreenCurrent',
            value='current'
        )
        label.btn.btn-secondary(id='dockScreenCurrent')
            span(translate) Current
        input.btn-check(
            *ngFor='let screen of screens',
            type='radio',
            name='dockScreen',
            [(ngModel)]='config.store.appearance.dockScreen',
            (ngModelChange)='saveConfiguration(); docking.dock()',
            id='dockScreen{{screen.id}}',
            [value]='screen.id'
        )
        label.btn.btn-secondary(*ngFor='let screen of screens', for='dockScreen{{screen.id}}')
            | {{screen.name}}

.ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
    .header
        .title(translate) Dock always on top
        .description(translate) Keep docked terminal always on top
    toggle(
        [(ngModel)]='config.store.appearance.dockAlwaysOnTop',
        (ngModelChange)='saveConfiguration(); docking.dock()',
    )

.ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
    .header
        .title(translate) Docked terminal size
        .description(translate) Window dimension away from the edge
    input(
        type='range',
        [(ngModel)]='config.store.appearance.dockFill',
        (mouseup)='saveConfiguration(); docking.dock()',
        min='0.05',
        max='1',
        step='0.01'
    )

.ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
    .header
        .title(translate) Docked terminal space
        .description(translate) Window dimension along the edge
    input(
        type='range',
        [(ngModel)]='config.store.appearance.dockSpace',
        (mouseup)='saveConfiguration(); docking.dock()',
        min='0.2',
        max='1',
        step='0.01'
    )

.ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
    .header
        .title(translate) Hide window on focus loss
        .description(translate) Hides the docked terminal when you click away.
    toggle(
        [(ngModel)]='config.store.appearance.dockHideOnBlur',
        (ngModelChange)='saveConfiguration(); ',
    )

h3.mt-4(translate) Tabs

.form-line
    .header
        .title(translate) Tabs location
    .btn-group
        input.btn-check(
            type='radio',
            name='tabsLocation',
            [(ngModel)]='config.store.appearance.tabsLocation',
            (ngModelChange)='saveConfiguration()',
            id='tabsLocationTop',
            [value]='"top"'
        )
        label.btn.btn-secondary(for='tabsLocationTop')
            span(translate) Top
        input.btn-check(
            type='radio',
            name='tabsLocation',
            [(ngModel)]='config.store.appearance.tabsLocation',
            (ngModelChange)='saveConfiguration()',
            id='tabsLocationBottom',
            [value]='"bottom"'
        )
        label.btn.btn-secondary(for='tabsLocationBottom')
            span(translate) Bottom
        input.btn-check(
            type='radio',
            name='tabsLocation',
            [(ngModel)]='config.store.appearance.tabsLocation',
            (ngModelChange)='saveConfiguration()',
            id='tabsLocationLeft',
            [value]='"left"'
        )
        label.btn.btn-secondary(for='tabsLocationLeft')
            span(translate) Left
        input.btn-check(
            type='radio',
            name='tabsLocation',
            [(ngModel)]='config.store.appearance.tabsLocation',
            (ngModelChange)='saveConfiguration()',
            id='tabsLocationRight',
            [value]='"right"'
        )
        label.btn.btn-secondary(for='tabsLocationRight')
            span(translate) Right

.form-line
    .header
        .title(translate) Tabs width
    .btn-group
        input.btn-check(
            type='radio',
            name='flexTabs',
            [(ngModel)]='config.store.appearance.flexTabs',
            (ngModelChange)='saveConfiguration()',
            id='flexTabsTrue',
            [value]='true'
        )
        label.btn.btn-secondary(for='flexTabsTrue')
            span(translate, translateComment='[Dynamic] tab width') id.tab-width.dynamic
        input.btn-check(
            type='radio',
            name='flexTabs',
            [(ngModel)]='config.store.appearance.flexTabs',
            (ngModelChange)='saveConfiguration()',
            id='flexTabsFalse',
            [value]='false'
        )
        label.btn.btn-secondary(for='flexTabsFalse')
            span(translate) Fixed

.form-line
    .header
        .title(translate) Show tabs in fullscreen mode

    toggle(
        [(ngModel)]='config.store.appearance.tabsInFullscreen',
        (ngModelChange)='config.save();',
    )

.form-line
    .header
        .title(translate) Hide tab index

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

.form-line
    .header
        .title(translate) Show profile icon on tab

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

.form-line
    .header
        .title(translate) Hide tab options button

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

.form-line
    .header
        .title(translate) Hide tab close button

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

.form-line
    .header
        .title(translate) Close the window after closing the last tab

    toggle(
        [(ngModel)]='config.store.appearance.lastTabClosesWindow',
        (ngModelChange)='config.save();',
    )

h3.mt-4(translate) Panes

.form-line()
    .header
        .title(translate) Pane resize step
        .description(translate) For keyboard shortcuts
    input(
        type='range',
        [(ngModel)]='config.store.terminal.paneResizeStep',
        (ngModelChange)='saveConfiguration();',
        min='0.1',
        max='0.9',
        step='0.05'
    )

.form-line()
    .header
        .title(translate) Focus follows mouse
        .description(translate) Moving the mouse over an inactive pane will cause it to activate
    toggle(
        [(ngModel)]='config.store.terminal.focusFollowsMouse',
        (ngModelChange)='config.save(); config.requestRestart()'
    )

h3.mt-4(translate) Hacks

.form-line(*ngIf='hostApp.platform !== Platform.Web')
    .header
        .title(translate) Disable GPU acceleration
        .description(translate) Tick this if you're experiencing aliasing, ghosting or other visual issues

    toggle(
        [(ngModel)]='config.store.hacks.disableGPU',
        (ngModelChange)='config.save(); config.requestRestart()'
    )

.form-line(*ngIf='hostApp.platform === Platform.Windows && isFluentVibrancySupported')
    .header
        .title(translate) Enable fluent background option
        .description(translate) Experimental Windows 10 background style known to cause issues

    toggle(
        [(ngModel)]='config.store.hacks.enableFluentBackground',
        (ngModelChange)='config.save()'
    )

.form-line(*ngIf='hostApp.platform === Platform.Windows && isFluentVibrancySupported')
    .header
        .title(translate) Disable fluent background while dragging
        .description(translate) Fluent background sometimes causes drag lag

    toggle(
        [(ngModel)]='config.store.hacks.disableVibrancyWhileDragging',
        (ngModelChange)='config.save(); config.requestRestart()'
    )