<div class="tab-container about-container" [ngClass]="{
    mac: electronService.isMac,
    windows: electronService.isWin,
    linux: electronService.isLinux
  }">
  <div class="theme-logo">
    <img [src]="wowUpService.getThemeLogoPath()" />
  </div>
  <div class="about">
    <div class="header text-1">
      <img class="logo mt-3" src="assets/wowup_logo_purple.png" />
      <h2>{{ "PAGES.ABOUT.TITLE" | translate }}</h2>
      <div class="version text-2">v{{ versionNumber | async }}</div>
      <div class="link-container">
        <a appExternalLink mat-stroked-button href="https://wowup.io" appUserActionTracker category="About"
          action="ViewWebsite">
          {{ "PAGES.ABOUT.WEBSITE_LINK_LABEL" | translate }}
        </a>
      </div>
    </div>
    <div class="changelog-container  header-2 text-1">
      <h2>{{ "PAGES.ABOUT.ATTRIBUTIONS_TITLE" | translate }}</h2>
      <ul class="change-log-list">
        <li class="changelog bg-secondary-4 border-primary">
          <p><a appExternalLink href="https://vectorified.com/wow-alliance-icon">Wow Alliance Icon</a></p>
          <p><a appExternalLink href="https://vectorified.com/horde-logo-vector">Horde Logo Vector</a></p>
        </li>
      </ul>
    </div>
    <div class="changelog-container text-1">
      <h2>
        {{ "PAGES.ABOUT.CHANGE_LOG_SECTION_LABEL" | translate }}
      </h2>
      <ul class="change-log-list">
        <li class="changelog bg-secondary-4 border-primary" *ngFor="let cl of changeLogs">
          <div class="version  mat-subheading-2">{{ cl.Version }}</div>
          <pre *ngIf="cl.Description" class="description  selectable">{{ cl.Description }}</pre>
          <pre *ngIf="cl.changes" class="description selectable">{{ formatChanges(cl) }}</pre>
        </li>
      </ul>
    </div>
  </div>
</div>