title-bar(
  *ngIf='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(
        [class.inset]='hostApp.platform == Platform.macOS && config.store.appearance.frame == "thin" && config.store.appearance.tabsLocation == "top"'
    )
        .tabs
            tab-header(
                *ngFor='let tab of app.tabs; let idx = index',
                [index]='idx',
                [tab]='tab',
                [active]='tab == app.activeTab',
                [hasActivity]='tab.hasActivity',
                [class.drag-region]='hostApp.platform == Platform.macOS',
                @animateTab,
                (click)='app.selectTab(tab)',
                (closeClicked)='app.closeTab(tab, true)',
            )
        
        .btn-group
            button.btn.btn-secondary.btn-tab-bar(
                *ngFor='let button of leftToolbarButtons',
                [title]='button.title',
                (click)='button.click()',
            )
                i.fa([class]='"fa fa-" + button.icon')
                
        .drag-space
            
        .btn-group
            button.btn.btn-secondary.btn-tab-bar(
                *ngFor='let button of rightToolbarButtons',
                [title]='button.title',
                (click)='button.click()',
            )
                i.fa([class]='"fa fa-" + button.icon')

        window-controls(
            *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 app.tabs; trackBy: tab?.id', 
        [active]='tab == app.activeTab',
        [tab]='tab',
        [scrollable]='tab.scrollable',
    )

ng-template(ngbModalContainer)
