h3.mb-3 Window

.form-line
    .header
        .title 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 Ask before closing the browser tab
        .description Prevents accidental closing
    toggle(
        [(ngModel)]='config.store.web.preventAccidentalTabClosure',
        (ngModelChange)='saveConfiguration()',
    )


.form-line(*ngIf='platform.supportsWindowControls')
    .header
        .title(*ngIf='hostApp.platform !== Platform.macOS') Acrylic background
        .title(*ngIf='hostApp.platform === Platform.macOS') Vibrancy
        .description 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 Background type
    .btn-group(
        [(ngModel)]='config.store.appearance.vibrancyType',
        (ngModelChange)='saveConfiguration()',
        ngbRadioGroup
    )
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"blur"'
            )
            | Blur
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"fluent"'
            )
            | Fluent

.form-line(*ngIf='platform.supportsWindowControls')
    .header
        .title 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 Window frame
        .description 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"'
            )
            | Native
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"thin"'
            )
            | Thin
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"full"'
            )
            | Full

.form-line(*ngIf='docking')
    .header
        .title Dock the terminal
        .description 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"'
            )
            | Off
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"top"'
            )
            | Top
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"left"'
            )
            | Left
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"right"'
            )
            | Right
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"bottom"'
            )
            | Bottom

.ml-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
    .header
        .title Display on
        .description 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'
            )
            | 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 Dock always on top
        .description 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 Docked terminal size
    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 Docked terminal space
    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 Hide dock on blur
        .description Hides the docked terminal when you click away.
    toggle(
        [(ngModel)]='config.store.appearance.dockHideOnBlur',
        (ngModelChange)='saveConfiguration(); ',
    )

.form-line
    .header
        .title Tabs location
    .btn-group(
        [(ngModel)]='config.store.appearance.tabsLocation',
        (ngModelChange)='saveConfiguration()',
        ngbRadioGroup
    )
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"top"'
            )
            | Top
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"bottom"'
            )
            | Bottom
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"left"'
            )
            | Left
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"right"'
            )
            | Right

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

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