.colorbar([style.background-color]='tab.color', *ngIf='tab.color != null')
.progressbar([style.width]='progress + "%"', *ngIf='progress != null')
.activity-indicator(*ngIf='tab.activity$|async')
.current-tab-indicator

.index(*ngIf='!config.store.terminal.hideTabIndex && hostApp.platform === Platform.macOS', cdkDragHandle) {{index + 1}}
.index(*ngIf='!config.store.terminal.hideTabIndex && hostApp.platform !== Platform.macOS') {{index + 1}}

profile-icon(
    *ngIf='config.store.terminal.showTabProfileIcon && tab.icon',
    [icon]='tab.icon',
    [color]='tab.color ?? undefined'
)

.name(
    [title]='tab.customTitle || tab.title',
    [class.no-hover]='config.store.terminal.hideCloseButton && config.store.terminal.hideTabOptionsButton'
    cdkDrag,
    cdkDragRootElement='tab-header',
    [cdkDragData]='tab',
    (cdkDragStarted)='onTabDragStart(tab)',
    (cdkDragEnded)='onTabDragEnd()',
) {{tab.customTitle || tab.title}}

.buttons
    button(*ngIf='!config.store.terminal.hideTabOptionsButton',(click)='onContextMenu($event)') !{require('../icons/tab-options.svg')}

    button(*ngIf='!config.store.terminal.hideCloseButton',(click)='app.closeTab(tab, true)') ×

ng-content