.content
    ul.nav-pills(ngbNav, #nav='ngbNav', [activeId]='activeTab', orientation='vertical')
        li(ngbNavItem='application')
            a(ngbNavLink)
                i.fas.fa-fw.fa-window-maximize.me-2
                span(translate) Application
            ng-template(ngbNavContent)
                .content-box
                    .row
                        .col-12.col-md-6
                            .logo-area
                                .tabby-logo.mt-3

                                h1.tabby-title Tabby
                                    sup α
                                .text-muted {{homeBase.appVersion}}

                                button.btn.btn-secondary.mt-3.mb-2(
                                    *ngIf='!updateAvailable && hostApp.platform !== Platform.Web',
                                    (click)='checkForUpdates()',
                                    [disabled]='checkingForUpdate'
                                )
                                    i.fas.fa-sync(
                                        [class.fa-spin]='checkingForUpdate'
                                    )
                                    span(translate) Check for updates

                                button.btn.btn-info.mt-3.mb-2(
                                    *ngIf='updateAvailable',
                                    (click)='updater.update()',
                                )
                                    i.fas.fa-sync
                                    span(translate) Update

                        .col-12.col-md-6
                            .list-group.list-group-light.mb-5
                                button.list-group-item.list-group-item-action.link-card((click)='homeBase.reportBug()')
                                    i.fas.fa-fw.fa-bug
                                    div
                                        div(translate) Report a problem
                                        small.text-muted(translate) Generate a pre-filled GitHub issue

                                button.list-group-item.list-group-item-action.link-card((click)='homeBase.openDiscord()')
                                    i.fab.fa-fw.fa-discord
                                    div
                                        div(translate) Community
                                        small.text-muted(translate) On Discord

                                button.list-group-item.list-group-item-action.link-card((click)='homeBase.openGitHub()')
                                    i.fab.fa-fw.fa-github
                                    div
                                        div GitHub
                                        small.text-muted(translate) Source code

                                button.list-group-item.list-group-item-action.link-card((click)='showReleaseNotes()')
                                    i.fas.fa-fw.fa-book
                                    div
                                        div(translate) What's new
                                        small.text-muted(translate) Show release notes


                    h3(translate) Application settings
                    .form-line
                        .header
                            .title(translate) Language
                            a.description((click)='homeBase.openTranslations()')
                                span(translate) Help translate Tabby
                                i.fas.fa-external-link-square-alt.ms-1
                        select.form-control([(ngModel)]='config.store.language', (ngModelChange)='saveConfiguration(true)')
                            option([ngValue]='null', translate) Automatic
                            option(
                                [value]='lang.code',
                                *ngFor='let lang of allLanguages'
                            ) {{lang.name}}

                    .form-line(*ngIf='platform.isShellIntegrationSupported()')
                        .header
                            .title(translate) Shell integration
                            .description(translate) Allows quickly opening a terminal in the selected folder
                        toggle([ngModel]='isShellIntegrationInstalled', (ngModelChange)='toggleShellIntegration()')

                    .form-line(*ngIf='hostApp.platform !== Platform.Web')
                        .header
                            .title(translate) Enable analytics
                            .description(translate) We're only tracking your Tabby and OS versions.
                        toggle(
                            [(ngModel)]='config.store.enableAnalytics',
                            (ngModelChange)='saveConfiguration(true)',
                        )

                    .form-line(*ngIf='hostApp.platform !== Platform.Web')
                        .header
                            .title(translate) Automatic Updates
                            .description(translate) Enable automatic installation of updates when they become available.
                        toggle([(ngModel)]='config.store.enableAutomaticUpdates', (ngModelChange)='saveConfiguration()')

                    .form-line(*ngIf='hostApp.platform !== Platform.Web')
                        .header
                            .title(translate) Debugging

                        button.btn.btn-secondary((click)='hostWindow.openDevTools()')
                            i.fas.fa-bug
                            span(translate) Open DevTools

                    h3(translate) Accessibility
                    .form-line
                        .header
                            .title(translate) Enable animations
                        toggle([(ngModel)]='config.store.accessibility.animations', (ngModelChange)='saveConfiguration()')

                    .form-line
                        .header
                            .title(translate) Minimum contrast ratio
                        input.form-control(
                            type='number',
                            min='1',
                            max='21',
                            step='0.5',
                            [(ngModel)]='config.store.terminal.minimumContrastRatio',
                            (ngModelChange)='config.save()'
                        )

        ng-container(*ngFor='let provider of settingsProviders')
            li(*ngIf='provider.prioritized', [ngbNavItem]='provider.id')
                a.d-flex.align-items-center(ngbNavLink)
                    i(class='fas fa-fw me-2 fa-{{provider.icon}}')
                    span {{provider.title|translate}}
                ng-template(ngbNavContent)
                    settings-tab-body([provider]='provider')

        .mb-3

        ng-container(*ngFor='let provider of settingsProviders')
            li(*ngIf='!provider.prioritized', [ngbNavItem]='provider.id')
                a.d-flex.align-items-center(ngbNavLink)
                    i(class='fas fa-fw me-2 fa-{{provider.icon || "puzzle-piece"}}')
                    span {{provider.title|translate}}
                ng-template(ngbNavContent)
                    settings-tab-body([provider]='provider')

        li(ngbNavItem='config-file')
            a.d-flex.align-items-center(ngbNavLink)
                i.fas.fa-fw.fa-code.me-2
                span(translate) Config file
            ng-template.test(ngbNavContent)
                .d-flex.flex-column.w-100.h-100
                    .h-100.d-flex
                        .w-100.d-flex.flex-column
                            h3(translate) Config file
                            textarea.form-control.h-100(
                                [(ngModel)]='configFile'
                            )
                        .w-100.d-flex.flex-column(*ngIf='showConfigDefaults')
                            h3(translate) Defaults
                            textarea.form-control.h-100(
                                [(ngModel)]='configDefaults',
                                readonly
                            )
                    .mt-3.d-flex
                        button.btn.btn-primary((click)='saveConfigFile()', *ngIf='isConfigFileValid()')
                            i.fas.fa-check.me-2
                            span(translate) Save and apply
                        button.btn.btn-primary(disabled, *ngIf='!isConfigFileValid()')
                            i.fas.fa-exclamation-triangle.me-2
                            span(translate) Invalid syntax
                        button.btn.btn-secondary.ms-auto(
                            (click)='showConfigDefaults = !showConfigDefaults',
                            translate
                        ) Show defaults
                        button.btn.btn-secondary.ms-3(
                            *ngIf='platform.getConfigPath()',
                            (click)='showConfigFile()'
                        )
                            i.fas.fa-external-link-square-alt.me-2
                            span(translate) Show config file

    div([ngbNavOutlet]='nav')

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