<div class="chart-header">
  <div class="general">
    <div *ngIf="(!variablesService.currentWallet.is_auditable && !variablesService.currentWallet.is_watch_only)
                || (variablesService.currentWallet.is_auditable && !variablesService.currentWallet.is_watch_only)">
      <span class="label">{{ 'STAKING.TITLE' | translate }}</span>
      <span class="value">
        <app-staking-switch [wallet_id]="variablesService.currentWallet.wallet_id" [(staking)]="variablesService.currentWallet.staking"></app-staking-switch>
      </span>
    </div>
    <div>
      <span class="label">{{ 'STAKING.TITLE_PENDING' | translate }}</span>
      <span class="value">{{pending.total | intToMoney}} {{variablesService.defaultCurrency}}</span>
    </div>
    <div>
      <span class="label">{{ 'STAKING.TITLE_TOTAL' | translate }}</span>
      <span class="value">{{total | intToMoney}} {{variablesService.defaultCurrency}}</span>
    </div>
  </div>
  <div class="selected" *ngIf="selectedDate && selectedDate.date">
    <span>{{selectedDate.date | date : 'EEEE, MMMM d, y'}}</span>
    <span>{{selectedDate.amount}} {{variablesService.defaultCurrency}}</span>
  </div>
</div>

<div class="chart">
  <div [chart]="chart"></div>
</div>

<div class="chart-options">
  <div class="title">
    {{ 'STAKING.TITLE_PERIOD' | translate }}
  </div>
  <div class="options">
    <ng-container *ngFor="let period of periods">
      <button type="button" [class.active]="period.active" (click)="changePeriod(period)">{{period.title}}</button>
    </ng-container>
  </div>

  <div class="title">
    {{ 'STAKING.TITLE_GROUP' | translate }}
  </div>
  <div class="options">
    <ng-container *ngFor="let group of groups">
      <button type="button" [class.active]="group.active" (click)="changeGroup(group)">{{group.title}}</button>
    </ng-container>
  </div>
</div>
