h3.mb-3(translate) Color schemes

.form-line.mb-4
    .header
        .title(translate) Switch color scheme

    .btn-group(role='group')
        input.btn-check(
            type='radio',
            name='colorSchemeMode',
            [(ngModel)]='config.store.appearance.colorSchemeMode',
            (ngModelChange)='config.save()',
            id='colorSchemeModeAuto',
            [value]='"auto"'
        )
        label.btn.btn-secondary(
            for='colorSchemeModeAuto'
        )
            span(translate) From system
        input.btn-check(
            type='radio',
            name='colorSchemeMode',
            [(ngModel)]='config.store.appearance.colorSchemeMode',
            (ngModelChange)='config.save()',
            id='colorSchemeModeDark',
            [value]='"dark"'
        )
        label.btn.btn-secondary(
            for='colorSchemeModeDark'
        )
            span(translate) Always dark
        input.btn-check(
            type='radio',
            name='colorSchemeMode',
            [(ngModel)]='config.store.appearance.colorSchemeMode',
            (ngModelChange)='config.save()',
            id='colorSchemeModeLight',
            [value]='"light"'
        )
        label.btn.btn-secondary(
            for='colorSchemeModeLight'
        )
            span(translate) Always light

.form-line.mb-4
    .header
        .title(translate) Generate 256-color palette
        .description(translate) Generate extended 256-color palette from your base 16 colors
    toggle(
        [(ngModel)]='config.store.terminal.paletteGenerate',
        (ngModelChange)='config.save()'
    )

.form-line.mb-4
    .header
        .title(translate) Harmonious palette
        .description(translate) Whether to invert generated light theme colors. This helps give the 256-color palette more semantic meaning.
    toggle(
        [(ngModel)]='config.store.terminal.paletteHarmonious',
        (ngModelChange)='config.save()'
    )

ul.nav-tabs(ngbNav, #nav='ngbNav', [activeId]='defaultTab')
    li(ngbNavItem='dark')
        a(ngbNavLink, translate) Dark mode
        ng-template(ngbNavContent)
            color-scheme-settings-for-mode(configKey='colorScheme')

    li(ngbNavItem='light')
        a(ngbNavLink, translate) Light mode
        ng-template(ngbNavContent)
            color-scheme-settings-for-mode(configKey='lightColorScheme')

div([ngbNavOutlet]='nav')
