<nav class="mobile-menu" [class.invisible]="!isMobileMenuVisible">
  <ul class="mobile-menu-list">
    <li (click)="switchMobileMenuVisibility();">
      <a class="header-nav__link-mobile" [routerLink]="['/']">{{ 'Header.SmartValley' | translate }}</a>
    </li>
    <li (click)="switchMobileMenuVisibility();">
      <a class="header-nav__link-mobile" [routerLinkActiveOptions]="{ exact: true }" [routerLinkActive]="'header-nav__link_selected'" [routerLink]="'/' + projectsLink">{{'Header.Projects' | translate }}</a>
    </li>
    <li (click)="switchMobileMenuVisibility();">
      <a class="header-nav__link-mobile" *ngIf="!haveProject" (click)="navigateToProjectApplication()">{{ 'Header.GetScoreForMyProject' | translate }}</a>
    </li>
    <li (click)="switchMobileMenuVisibility();">
      <a *ngIf="!isExpert" class="header-nav__link-mobile" (click)="navigateToExpertApplication()">{{ 'Header.BecomeAnExpert' | translate }}</a>
    </li>
    <li (click)="switchMobileMenuVisibility();">
      <a class="header-nav__link-mobile" target="_blank" href="https://smartvalley.io/en/assets/files/WP_en_new.pdf">{{ 'Header.WhitePaper' | translate }}</a>
    </li>
  </ul>
</nav>

<div class="header-wrapper">
  <div class="header-content">
    <a [routerLink]="['/']"><img class="logo" width="160" src="/assets/img/logo.png" alt="Smart valley"></a>
    <nav class="header-nav">
      <a class="header-nav__link" [routerLinkActiveOptions]="{ exact: true }" [routerLinkActive]="'header-nav__link_selected'" [routerLink]="'/' + projectsLink">{{'Header.Projects' | translate }}</a>
      <a *ngIf="isAdmin" class="header-nav__link" [routerLinkActive]="'header-nav__link_selected'" [routerLink]="'/' + adminPanelLink">{{'Header.Admin' | translate }}</a>
      <a class="header-nav__link" [routerLinkActive]="'header-nav__link_selected'" [routerLink]="'/' + freeTokenPlaceLink">{{'Header.FreeTokenPlace' | translate }}</a>
    </nav>
    <button *ngIf="!haveProject" class="main-btn get-score-btn" (click)="navigateToProjectApplication()">{{ 'Header.GetScoreForMyProject' | translate }}</button>
    <button *ngIf="!isExpert" class="main-btn" (click)="navigateToExpertApplication()">{{ 'Header.BecomeAnExpert' | translate }}</button>
    <button *ngIf="showReceiveEtherButton" class="main-btn receive-ether-btn" (click)="receiveEtherAsync()">{{ 'Header.ReceiveEther' | translate }}</button>
    <nav class="header-nav__authenticated">
      <a *ngIf="isAuthenticated && isExpert" class="header-nav__link" [routerLinkActive]="'header-nav__link_selected'" [routerLink]="'/' + scoringsLink">{{'Header.Scoring' | translate }}</a>
      <a *ngIf="isAuthenticated && haveProject" class="header-nav__link" [routerLinkActive]="'header-nav__link_selected'" [routerLink]="'/' + myProjectLink">{{'Header.MyProject' | translate }}</a>
      <a *ngIf="isAuthenticated" class="header-nav__link" [routerLinkActive]="'header-nav__link_selected'" [routerLink]="'/account'">{{'Header.Account' | translate }}</a>
      <span *ngIf="isAuthenticated" class="header-nav__login-logout" (click)="logout()">
        {{'Header.Logout' | translate }}
      </span>
      <span *ngIf="!isAuthenticated" class="header-nav__login-logout" (click)="loginAsync()">
        {{'Header.Login' | translate }}
      </span>
    </nav>
    <div class="mobile-menu-icon">
      <i (click)="switchMobileMenuVisibility();" class="status-icon material-icons">menu</i>
    </div>
  </div>
  <div *ngIf="showExpertPanel" class="expert-panel">
    <div class="expert-content">
      <div class="activity-status">
        {{ 'Header.Status' | translate }}:
        <span [class.active]="isExpertActive" (click)="showChangeActivityModalAsync(isExpertActive);" [class.not-active]="!isExpertActive">
          <span *ngIf="isExpertActive" class="icon active-icon"><i class="status-icon material-icons">done</i></span>
          <span *ngIf="isExpertActive" class="status-label">{{ 'Header.Active' | translate }}</span>
          <span *ngIf="isExpertActive" class="status-tip">{{ 'Header.ActiveTip' | translate }}</span>
          <span *ngIf="!isExpertActive" class="icon inactive-icon"><i class="status-icon material-icons">stop</i></span>
          <span *ngIf="!isExpertActive" class="status-label">{{ 'Header.Inactive' | translate }}</span>
          <span *ngIf="!isExpertActive" class="status-tip">{{ 'Header.InactiveTip' | translate }}</span>
        </span>
      </div>
      <div class="balance">
        {{ 'Header.Balance' | translate }}: <span class="current-balance">{{ currentBalance | formatNumber: 3: 18 }}&nbsp;{{ 'Header.ETH' | translate }}</span>
      </div>
    </div>
  </div>
</div>
