<div class="content">

  <div class="head">
    <div class="breadcrumbs">
      <span (click)="back()">{{variablesService.currentWallet.name}}</span>
      <span>{{ 'BREADCRUMBS.WALLET_DETAILS' | translate }}</span>
    </div>
    <button type="button" class="back-btn" (click)="back()">
      <i class="icon back"></i>
      <span>{{ 'COMMON.BACK' | translate }}</span>
    </button>
  </div>

  <form class="form-details" [formGroup]="detailsForm" (ngSubmit)="onSubmitEdit()">

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

    <div class="input-block">
      <label for="wallet-location">{{ 'WALLET_DETAILS.LABEL_FILE_LOCATION' | translate }}</label>
      <input type="text" id="wallet-location" formControlName="path" readonly>
    </div>

    <div class="input-block textarea">
      <label for="seed-phrase">{{ 'WALLET_DETAILS.LABEL_SEED_PHRASE' | translate }}</label>
      <div class="seed-phrase" id="seed-phrase">
        <div class="seed-phrase-hint" (click)="showSeedPhrase()" *ngIf="!showSeed">{{ 'WALLET_DETAILS.SEED_PHRASE_HINT' | translate }}</div>
        <div class="seed-phrase-content" *ngIf="showSeed" (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>
    </div>

    <div class="wallet-buttons">
      <button type="submit" class="blue-button" [disabled]="!detailsForm.valid">{{ 'WALLET_DETAILS.BUTTON_SAVE' | translate }}</button>
      <button type="button" class="blue-button" (click)="closeWallet()">{{ 'WALLET_DETAILS.BUTTON_REMOVE' | translate }}</button>
    </div>

  </form>

</div>
