h3.mb-3(translate) Window

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


.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')
    .header
        .title(translate) Background type
    .btn-group(
        [(ngModel)]='config.store.appearance.vibrancyType',
        (ngModelChange)='saveConfiguration()',
        ngbRadioGroup
    )
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"blur"'
            )
            span(translate) Blur
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"fluent"'
            )
            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(
        [(ngModel)]='config.store.appearance.frame',
        (ngModelChange)='saveConfiguration(true)',
        ngbRadioGroup
    )
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"native"'
            )
            span(translate) Native
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"thin"'
            )
            span(translate) Thin
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"full"'
            )
            span(translate) Full

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(
        [(ngModel)]='config.store.appearance.dock',
        (ngModelChange)='saveConfiguration(); docking.dock()',
        ngbRadioGroup
    )
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"off"'
            )
            span(translate) Off
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"top"'
            )
            span(translate) Top
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"left"'
            )
            span(translate) Left
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"right"'
            )
            span(translate) Right
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"bottom"'
            )
            span(translate) Bottom

.ml-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(
        [(ngModel)]='config.store.appearance.dockScreen',
        (ngModelChange)='saveConfiguration(); docking.dock()',
        ngbRadioGroup
    )
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                value='current'
            )
            span(translate) Current
        label.btn.btn-secondary(*ngFor='let screen of screens', ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='screen.id'
            )
            | {{screen.name}}

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

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

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

.ml-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(
        [(ngModel)]='config.store.appearance.tabsLocation',
        (ngModelChange)='saveConfiguration()',
        ngbRadioGroup
    )
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"top"'
            )
            span(translate) Top
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"bottom"'
            )
            span(translate) Bottom
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"left"'
            )
            span(translate) Left
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"right"'
            )
            span(translate) Right

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

.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 close button

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

h3.mt-4(translate) Hacks

.form-line
    .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')
    .header
        .title Disable fluent background while dragging
        .description Fluent background sometimes causes drag lag

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