<div class="content">

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

  <form class="form-open" [formGroup]="openForm">

    <div class="input-block">
      <label for="wallet-name">{{ 'OPEN_WALLET.NAME' | translate }}</label>
      <input type="text" id="wallet-name" formControlName="name" [maxLength]="variablesService.maxWalletNameLength" (contextmenu)="variablesService.onContextMenu($event)">
      <div class="error-block" *ngIf="openForm.controls['name'].invalid && (openForm.controls['name'].dirty || openForm.controls['name'].touched)">
        <div *ngIf="openForm.controls['name'].errors['required']">
          {{ 'OPEN_WALLET.FORM_ERRORS.NAME_REQUIRED' | translate }}
        </div>
        <div *ngIf="openForm.controls['name'].errors['duplicate']">
          {{ 'OPEN_WALLET.FORM_ERRORS.NAME_DUPLICATE' | translate }}
        </div>
      </div>
      <div class="error-block" *ngIf="openForm.get('name').value.length >= variablesService.maxWalletNameLength">
        {{ 'OPEN_WALLET.FORM_ERRORS.MAX_LENGTH' | translate }}
      </div>
    </div>

    <div class="input-block">
      <label for="wallet-password">{{ 'OPEN_WALLET.PASS' | translate }}</label>
      <input type="password" id="wallet-password" formControlName="password" (contextmenu)="variablesService.onContextMenuPasteSelect($event)">
    </div>

    <div class="wrap-buttons">
      <button type="button" class="blue-button create-button" (click)="openWallet()" [disabled]="!openForm.valid">{{ 'OPEN_WALLET.BUTTON' | translate }}</button>
    </div>

  </form>

</div>

