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

.content(
    [class.tabs-on-top]='config.store.appearance.tabsLocation == "top"'
)
    .tab-bar
        .inset.background(*ngIf='hostApp.platform == Platform.macOS && config.store.appearance.frame == "thin" && config.store.appearance.tabsLocation == "top"')
        .tabs(
            dnd-sortable-container,
            [sortableData]='app.tabs',
        )
            tab-header(
                *ngFor='let tab of app.tabs; let idx = index',
                dnd-sortable,
                [sortableIndex]='idx',
                (onDragStart)='onTabDragStart()',
                (onDragEnd)='onTabDragEnd()',

                [index]='idx',
                [tab]='tab',
                [active]='tab == app.activeTab',
                [hasActivity]='tab.activity$|async',
                @animateTab,
                (click)='app.selectTab(tab)',
                [class.fully-draggable]='hostApp.platform != Platform.macOS',
                [class.drag-region]='hostApp.platform == Platform.macOS && !tabsDragging',
            )

        .btn-group.background
            .d-flex(
                *ngFor='let button of leftToolbarButtons',
                ngbDropdown,
                (openChange)='generateButtonSubmenu(button)',
            )
                button.btn.btn-secondary.btn-tab-bar(
                    [title]='button.title',
                    (click)='button.click && button.click()',
                    [innerHTML]='sanitizeIcon(button.icon)',
                    ngbDropdownToggle,
                )
                div(*ngIf='button.submenu', ngbDropdownMenu)
                    button.dropdown-item.d-flex.align-items-center(
                        *ngFor='let item of button.submenuItems',
                        (click)='item.click()',
                        ngbDropdownItem,
                    )
                        .icon-wrapper(
                            *ngIf='hasIcons(button.submenuItems)',
                            [innerHTML]='sanitizeIcon(item.icon)'
                        )
                        div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}

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

        .btn-group.background
            .d-flex(
                *ngFor='let button of rightToolbarButtons',
                ngbDropdown,
                (openChange)='generateButtonSubmenu(button)',
            )
                button.btn.btn-secondary.btn-tab-bar(
                    [title]='button.title',
                    (click)='button.click && button.click()',
                    [innerHTML]='sanitizeIcon(button.icon)',
                    ngbDropdownToggle,
                )
                div(*ngIf='button.submenu', ngbDropdownMenu)
                    button.dropdown-item.d-flex.align-items-center(
                        *ngFor='let item of button.submenuItems',
                        (click)='item.click()',
                        ngbDropdownItem,
                    )
                        .icon-wrapper(
                            *ngIf='hasIcons(button.submenuItems)',
                            [innerHTML]='sanitizeIcon(item.icon)'
                        )
                        div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}

            button.btn.btn-secondary.btn-tab-bar.btn-update(
                *ngIf='updatesAvailable',
                title='Update available - Click to install',
                (click)='updateApp()',
                [innerHTML]='sanitizeIcon(updateIcon)'
            )

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

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

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

ng-template(ngbModalContainer)