<div
  class="tab-strip bg-primary text-1"
  [ngClass]="{
    mac: electronService.isMac,
    windows: electronService.isWin,
    linux: electronService.isLinux
  }"
>
  <div
    *ngFor="let tab of tabsTop"
    class="tab"
    [ngClass]="{ selected: tab.isSelected$ | async, disabled: tab.isDisabled$ | async }"
    (click)="tab.onClick(tab)"
  >
    <mat-icon
      class="tab-icon tab-icon-inactive"
      [ngClass]="{ 'tab-icon-active': tab.isSelected$ | async, 'tab-icon-disabled': tab.isDisabled$ | async }"
      [svgIcon]="tab.icon"
    >
    </mat-icon>
    <div class="tab-title" *ngIf="tab.titleKey">{{ tab.titleKey | translate }}</div>
    <!-- <mat-icon *ngIf="tab.badge === true" class="tab-icon-inactive z-badge clear-badge" matBadge="1" matBadgeColor="accent"
      [ngClass]="{'tab-icon-active': tab.isSelected$ | async }" [svgIcon]="tab.icon">
    </mat-icon> -->
  </div>
  <div class="spacer"></div>
  <a
    appExternalLink
    class="text-1 tab hover-bg-secondary-2"
    [href]="wowUpWebsiteUrl + '/guide'"
    matTooltip="{{ 'PAGES.MY_ADDONS.PAGE_CONTEXT_FOOTER.VIEW_GUIDE' | translate }}"
  >
    <mat-icon class="tab-icon tab-icon-inactive" svgIcon="far:circle-question"></mat-icon>
    <div class="tab-title">{{ "PAGES.HOME.GUIDE_TAB_TITLE" | translate }}</div>
  </a>

  <!-- ACCOUNT TAB -->
  <div
    *ngIf="FEATURE_ACCOUNTS_ENABLED"
    class="tab hover-bg-secondary-2"
    [ngClass]="{ selected: isAccountSelected$ | async }"
    (click)="onClickTab(TAB_INDEX_ACCOUNT)"
  >
    <mat-icon
      class="tab-icon tab-icon-inactive"
      svgIcon="fas:user-circle"
      [ngClass]="{ 'tab-icon-active': isAccountSelected$ | async }"
    >
    </mat-icon>
    <div>
      <div class="tab-title">{{ "PAGES.HOME.ACCOUNT_TAB_TITLE" | translate }}</div>
      <div *ngIf="(sessionService.wowUpAuthenticated$ | async) === true" class="tab-subtitle">Logged in</div>
    </div>
  </div>

  <div
    *ngFor="let tab of tabsBottom"
    class="tab hover-bg-secondary-2"
    [ngClass]="{ selected: tab.isSelected$ | async, disabled: tab.isDisabled$ | async }"
    (click)="tab.onClick(tab)"
  >
    <!-- <div class="tab-icon"> -->
    <mat-icon
      class="tab-icon tab-icon-inactive"
      [svgIcon]="tab.icon"
      [ngClass]="{ 'tab-icon-active': tab.isSelected$ | async, 'tab-icon-disabled': tab.isDisabled$ | async }"
    >
    </mat-icon>
    <!-- </div> -->
    <div class="tab-title" *ngIf="tab.titleKey">{{ tab.titleKey | translate }}</div>
  </div>
</div>
