<div class="content">

  <div class="head">
    <div class="breadcrumbs">
      <span [routerLink]="['/main']">{{ 'BREADCRUMBS.ADD_WALLET' | translate }}</span>
      <span>{{ 'BREADCRUMBS.SAVE_PHRASE' | translate }}</span>
    </div>
    <button type="button" class="back-btn" (click)="back()">
      <i class="icon back"></i>
      <span>{{ 'COMMON.BACK' | translate }}</span>
    </button>
  </div>

  <h3 class="seed-phrase-title">{{ 'SEED_PHRASE.TITLE' | translate }}</h3>

  <div class="seed-phrase-content" (contextmenu)="variablesService.onContextMenuOnlyCopy($event, seedPhrase)">
    <ng-container *ngFor="let word of seedPhrase.split(' '); let index = index">
      <div class="word">{{(index + 1) + '. ' + word}}</div>
    </ng-container>
  </div>

  <div class="wrap-buttons">
    <button type="button" class="blue-button seed-phrase-button" (click)="runWallet()">{{ 'SEED_PHRASE.BUTTON_CREATE_ACCOUNT' | translate }}</button>
    <button type="button" class="blue-button copy-button" (click)="copySeedPhrase()">{{ 'SEED_PHRASE.BUTTON_COPY' | translate }}</button>
  </div>
</div>

<app-progress-container [width]="'100%'" [labels]="['PROGRESS.ADD_WALLET', 'PROGRESS.SELECT_LOCATION', 'PROGRESS.CREATE_WALLET']"></app-progress-container>
