<div
  class="tab-strip bg-secondary-2 text-1"
  [ngClass]="{
    mac: electronService.isMac,
    windows: electronService.isWin,
    linux: electronService.isLinux,
    collapsed: (isCollapsed$ | async)
  }"
>
  <div class="theme-logo-glow"></div>
  <div class="theme-logo">
    <div class="logo-img"></div>
  </div>

  <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>

  <!-- 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:circle-user"
      [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 class="spacer"></div>
  <!-- LINKS -->

  <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>

  <a
    appExternalLink
    class="tab btn"
    href="https://discord.gg/rk4F5aD"
    matTooltip="{{ 'PAGES.MY_ADDONS.PAGE_CONTEXT_FOOTER.JOIN_DISCORD' | translate }}"
  >
    <mat-icon class="tab-icon tab-icon-inactive" svgIcon="fab:discord"></mat-icon>
    <div class="tab-title">{{ "PAGES.HOME.DISCORD_TAB_TITLE" | translate }}</div>
  </a>

  <a
    appExternalLink
    class="tab btn patreon-link"
    href="https://www.patreon.com/jliddev"
    matTooltip="{{ 'PAGES.MY_ADDONS.PAGE_CONTEXT_FOOTER.PATREON_SUPPORT' | translate }}"
  >
    <img *ngIf="(isCollapsed$ | async) === true" class="patron-img" src="assets/images/patreon_logo_small.png" />
    <img
      *ngIf="(isCollapsed$ | async) === false"
      class="patron-img"
      src="assets/Digital-Patreon-Wordmark_FieryCoral.png"
    />
  </a>

  <div
    *ngIf="(sessionService.adSpace$ | async) === false"
    class="tab hover-bg-secondary-2"
    (click)="toggleCollapse()"
    matTooltip="{{ (isCollapsed$ | async) ? ('PAGES.HOME.EXPAND_BUTTON_TITLE' | translate) : '' }}"
  >
    <mat-icon
      *ngIf="(isCollapsed$ | async) === true"
      class="tab-icon tab-icon-inactive"
      [svgIcon]="'far:square-caret-right'"
    >
    </mat-icon>

    <mat-icon
      *ngIf="(isCollapsed$ | async) === false"
      class="tab-icon tab-icon-inactive"
      [svgIcon]="'far:square-caret-left'"
    >
    </mat-icon>

    <div class="tab-title">{{ "PAGES.HOME.COLLAPSE_BUTTON_TITLE" | translate }}</div>
  </div>

  <!-- AD FRAME -->
  <div *ngIf="sessionService.adSpace$ | async" class="ad-space text-1 bg-secondary-2">
    <div class="tab hover-bg-secondary-4" style="" (click)="onClickAdExplainer()">
      {{ "ADS.AD_EXPLAINER_BUTTON" | translate }}
    </div>
    <div class="ad">
      <app-webview *ngFor="let params of adPageParams$ | async" [options]="params"></app-webview>
    </div>
  </div>
</div>
