title-bar(
  *ngIf='ready && !hostWindow.isFullscreen && config.store.appearance.frame == "full" && config.store.appearance.dock == "off"',
  (dblclick)='hostWindow.toggleMaximize()',
  [class.inset]='hostApp.platform == Platform.macOS && !hostWindow.isFullscreen'
)

.content(
    *ngIf='ready',
    [class.tabs-on-top]='config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left"',
    [class.tabs-on-side]='hasVerticalTabs()',
)
    .tab-bar(
        *ngIf='!hostWindow.isFullscreen || config.store.appearance.tabsInFullscreen',
        (dblclick)='hostWindow.toggleMaximize()'
    )
        .inset.background(*ngIf='hostApp.platform == Platform.macOS \
        && !hostWindow.isFullscreen \
        && config.store.appearance.frame == "thin" \
        && (config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left")')
        .tabs(
            cdkDropList,
            [cdkDropListOrientation]='(config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "bottom") ? "horizontal" : "vertical"',
            (cdkDropListDropped)='onTabsReordered($event)',
            cdkAutoDropGroup='app-tabs'
        )
            tab-header(
                *ngFor='let tab of app.tabs; let idx = index',
                [index]='idx',
                [tab]='tab',
                [active]='tab == app.activeTab',
                [@animateTab]='{value: "in", params: {size: targetTabSize}}',
                [@.disabled]='hasVerticalTabs() || !config.store.accessibility.animations',
                (click)='app.selectTab(tab)',
                [class.fully-draggable]='hostApp.platform != Platform.macOS',
                [class.drag-region]='hostApp.platform == Platform.macOS && !(app.tabDragActive$|async)',
            )

        .btn-group.background
            .d-flex(
                *ngFor='let button of leftToolbarButtons'
            )
                button.btn.btn-secondary.btn-tab-bar(
                    [title]='button.label',
                    (click)='button.run && button.run()',
                    [fastHtmlBind]='button.icon'
                )

            .d-flex(
                ngbDropdown,
                container='body',
                #activeTransfersDropdown='ngbDropdown'
            )
                button.btn.btn-secondary.btn-tab-bar(
                    *ngIf='activeTransfers.length > 0',
                    title='File transfers',
                    ngbDropdownToggle
                ) !{require('../icons/transfers.svg')}
                transfers-menu(
                    ngbDropdownMenu,
                    [(transfers)]='activeTransfers',
                    (transfersChange)='onTransfersChange()'
                )

        .drag-space.background([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS')

        .btn-group.background
            .d-flex(
                *ngFor='let button of rightToolbarButtons'
            )
                button.btn.btn-secondary.btn-tab-bar(
                    [title]='button.label',
                    (click)='button.run && button.run()',
                    [fastHtmlBind]='button.icon'
                )

            button.btn.btn-secondary.btn-tab-bar.btn-update(
                *ngIf='updatesAvailable',
                title='Update available - Click to install',
                (click)='updater.update()'
            ) !{require('../icons/gift.svg')}

        window-controls.background(
            *ngIf='config.store.appearance.frame == "thin" \
            && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',
        )

    .content
        start-page.content-tab.content-tab-active(*ngIf='ready && app.tabs.length == 0')

        tab-body.content-tab(
            #tabBodies,
            *ngFor='let tab of unsortedTabs',
            [class.content-tab-active]='tab == app.activeTab',
            [active]='tab == app.activeTab',
            [tab]='tab',
        )

ng-template(ngbModalContainer)