<div
  class="tab-container"
  [ngClass]="{
    mac: electronService.isMac,
    windows: electronService.isWin,
    linux: electronService.isLinux
  }"
>
  <div class="nav-container">
    <div class="theme-logo">
      <div class="logo-img"></div>
    </div>
    <div class="nav-item-container" [ngClass]="[sessionService.currentTheme$ | async]">
      <div class="nav-item-list-wrap">
        <div class="nav-item-list">
          <mat-action-list>
            <button mat-list-item (click)="optionTabIndex = 0">
              {{ "PAGES.OPTIONS.TABS.CLIENTS" | translate }}
            </button>
            <button mat-list-item (click)="optionTabIndex = 1">
              {{ "PAGES.OPTIONS.TABS.APPLICATION" | translate }}
            </button>
            <button mat-list-item (click)="optionTabIndex = 2">
              {{ "PAGES.OPTIONS.TABS.ADDONS" | translate }}
            </button>
            <button mat-list-item (click)="optionTabIndex = 3">
              {{ "PAGES.OPTIONS.TABS.DEBUG" | translate }}
            </button>
            <button mat-list-item (click)="optionTabIndex = 4">
              {{ "PAGES.OPTIONS.TABS.WTF_EXPLORER" | translate }}
            </button>
            <button mat-list-item (click)="optionTabIndex = 5">
              {{ "PAGES.OPTIONS.TABS.ABOUT" | translate }}
            </button>
          </mat-action-list>
        </div>
      </div>
    </div>
    <div class="nav-content-container bg-secondary-2 text-1">
      <div class="nav-content-wrap">
        <div class="nav-content">
          <mat-tab-group class="no-tabs content-tab" animationDuration="0ms" [(selectedIndex)]="optionTabIndex">
            <mat-tab label="WorldOfWarcraft" class="tab">
              <app-options-wow-section></app-options-wow-section>
            </mat-tab>
            <mat-tab label="Application">
              <app-options-app-section></app-options-app-section>
            </mat-tab>
            <mat-tab label="Addons">
              <app-options-addon-section></app-options-addon-section>
            </mat-tab>
            <mat-tab label="Debug">
              <app-options-debug-section></app-options-debug-section>
            </mat-tab>
            <mat-tab label="WtfExplorer">
              <app-wtf-explorer [active]="optionTabIndex === 4"></app-wtf-explorer>
            </mat-tab>
            <mat-tab label="About">
              <app-about></app-about>
            </mat-tab>
          </mat-tab-group>
        </div>
      </div>
    </div>
  </div>
</div>
