<div class="header">
  <div>
    <h3 tooltip="{{ variablesService.currentWallet.name }}" placement="bottom-left" tooltipClass="table-tooltip" [delay]="500" [showWhenNoOverflow]="false">{{variablesService.currentWallet.name}}</h3>
    <div *ngIf="!variablesService.currentWallet.is_auditable">
      <button [routerLink]="['/assign-alias']" *ngIf="!variablesService.currentWallet.alias.hasOwnProperty('name') && variablesService.currentWallet.loaded && variablesService.daemon_state === 2 && variablesService.currentWallet.alias_available">
        <i class="icon account"></i>
        <span>{{ 'WALLET.REGISTER_ALIAS' | translate }}</span>
      </button>
      <div class="alias" *ngIf="variablesService.currentWallet.alias.hasOwnProperty('name') && variablesService.currentWallet.loaded && variablesService.daemon_state === 2">
        <span>{{variablesService.currentWallet.alias['name']}}</span>
        <ng-container *ngIf="variablesService.currentWallet.alias_available">
          <i class="icon edit" [routerLink]="['/edit-alias']" tooltip="{{ 'WALLET.TOOLTIPS.EDIT_ALIAS' | translate }}" placement="bottom-right" tooltipClass="table-tooltip account-tooltip" [delay]="500" [timeDelay]="500"></i>
          <i class="icon transfer" [routerLink]="['/transfer-alias']" tooltip="{{ 'WALLET.TOOLTIPS.TRANSFER_ALIAS' | translate }}" placement="right" tooltipClass="table-tooltip account-tooltip" [delay]="500" [timeDelay]="500"></i>
        </ng-container>
      </div>
    </div>
  </div>
  <div>
    <button [routerLink]="['/details']" routerLinkActive="active" tooltip="{{ 'WALLET.TOOLTIPS.SETTINGS' | translate }}" placement="left" tooltipClass="table-tooltip account-tooltip" [delay]="500" [timeDelay]="500">
      <i class="icon details"></i>
    </button>
  </div>
</div>
<div class="address">
  <span>{{variablesService.currentWallet.address}}</span>
  <i class="icon" [class.copy]="!copyAnimation" [class.copied]="copyAnimation" (click)="copyAddress()"></i>
</div>
<div class="balance">
  <span [tooltip]="getTooltip()" [placement]="'bottom'" [tooltipClass]="'balance-tooltip'" [delay]="150" [timeout]="0" (onHide)="onHideTooltip()">{{variablesService.currentWallet.balance | intToMoney  : '3'}} {{variablesService.defaultCurrency}}</span>
  <span>$ {{variablesService.currentWallet.getMoneyEquivalent(variablesService.moneyEquivalent) | intToMoney | number : '1.2-2'}}</span>
</div>
<div class="tabs">
  <div class="tabs-header">
    <ng-container *ngFor="let tab of tabs; let index = index">
      <div class="tab" [class.active]="tab.active"
           [class.disabled]="((tab.link === '/send' || tab.link === '/contracts' || tab.link === '/staking') && (variablesService.daemon_state !== 2 || !variablesService.currentWallet.loaded))
                || ((tab.link === '/send' || tab.link === '/contracts') && variablesService.currentWallet.is_watch_only && variablesService.currentWallet.is_auditable)"
           (click)="changeTab(index)" (mouseover)="itemHovered(index, true)" (mouseleave)="itemHovered(index, false)">
        <i class="icon" [ngClass]="tab.icon"  *ngIf="!tab.itemHovered; else svgAnimated"></i>
        <ng-template #svgAnimated>
          <div class="animated" [innerHTML]="tab.animated | safeHTML"></div>
        </ng-template>
        <span>{{ tab.title | translate }}</span>
        <span class="indicator" *ngIf="tab.indicator">{{variablesService.currentWallet.new_contracts}}</span>
      </div>
    </ng-container>
  </div>
  <div #scrolledContent class="tabs-content scrolled-content">
    <router-outlet></router-outlet>
  </div>
  <div *ngIf="activeTab === 'history'" class="pagination-wrapper">
    <div class="pagination">
        <button [disabled]="variablesService.currentWallet.currentPage === 1" (click)="setPage(variablesService.currentWallet.currentPage - 1)"><</button>
        <ng-container *ngFor="let page of variablesService.currentWallet.pages">
          <button [ngClass]="{ 'active': variablesService.currentWallet.currentPage === page }"
          (click)="setPage(page)">{{page}}</button>
        </ng-container>
        <button [disabled]="variablesService.currentWallet.currentPage === variablesService.currentWallet.totalPages" (click)="setPage(variablesService.currentWallet.currentPage + 1)">></button>
    </div>
  </div>
</div>
