<div class="content">

  <div class="head">
    <div class="breadcrumbs">
      <span [routerLink]="['/wallet/' + wallet.wallet_id + '/history']">{{ wallet.name }}</span>
      <span>{{ 'BREADCRUMBS.ASSIGN_ALIAS' | 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-assign" [formGroup]="assignForm">

    <div class="input-block alias-name">
      <label for="alias-name" tooltip="{{ 'ASSIGN_ALIAS.NAME.TOOLTIP' | translate }}" placement="bottom-left" tooltipClass="table-tooltip assign-alias-tooltip" [delay]="50">
        {{ 'ASSIGN_ALIAS.NAME.LABEL' | translate }}
      </label>
      <input type="text" id="alias-name" formControlName="name" placeholder="{{ 'ASSIGN_ALIAS.NAME.PLACEHOLDER' | translate }}" (contextmenu)="variablesService.onContextMenu($event)">
      <div class="error-block" *ngIf="assignForm.controls['name'].invalid && (assignForm.controls['name'].dirty || assignForm.controls['name'].touched)">
        <div *ngIf="assignForm.controls['name'].errors['required']">
          {{ 'ASSIGN_ALIAS.FORM_ERRORS.NAME_REQUIRED' | translate }}
        </div>
        <div *ngIf="assignForm.controls['name'].errors['pattern'] && assignForm.get('name').value.length > 6 && assignForm.get('name').value.length <= 25">
          {{ 'ASSIGN_ALIAS.FORM_ERRORS.NAME_WRONG' | translate }}
        </div>
        <div *ngIf="assignForm.get('name').value.length <= 6 || assignForm.get('name').value.length > 25">
          {{ 'ASSIGN_ALIAS.FORM_ERRORS.NAME_LENGTH' | translate }}
        </div>
      </div>
      <div class="error-block" *ngIf="alias.exists">
        <div>
          {{ 'ASSIGN_ALIAS.FORM_ERRORS.NAME_EXISTS' | translate }}
        </div>
      </div>
      <div class="error-block" *ngIf="notEnoughMoney">
        <div>
          {{ 'ASSIGN_ALIAS.FORM_ERRORS.NO_MONEY' | translate }}
        </div>
      </div>
    </div>

    <div class="input-block textarea">
      <label for="alias-comment" tooltip="{{ 'ASSIGN_ALIAS.COMMENT.TOOLTIP' | translate }}" placement="bottom-left" tooltipClass="table-tooltip assign-alias-tooltip" [delay]="50">
        {{ 'ASSIGN_ALIAS.COMMENT.LABEL' | translate }}
      </label>
      <textarea id="alias-comment"
                class="scrolled-content"
                formControlName="comment"
                placeholder="{{ 'ASSIGN_ALIAS.COMMENT.PLACEHOLDER' | translate }}"
                [maxLength]="variablesService.maxCommentLength"
                (contextmenu)="variablesService.onContextMenu($event)">
      </textarea>
      <div class="error-block" *ngIf="assignForm.get('comment').value.length >= variablesService.maxCommentLength">
        {{ 'ASSIGN_ALIAS.FORM_ERRORS.MAX_LENGTH' | translate }}
      </div>
    </div>

    <div class="alias-cost">{{ "ASSIGN_ALIAS.COST" | translate : {value: alias.price | intToMoney, currency: variablesService.defaultCurrency} }}</div>

    <div class="wrap-buttons">
      <button type="button" class="blue-button" (click)="assignAlias()" [disabled]="!assignForm.valid || !canRegister || notEnoughMoney">{{ 'ASSIGN_ALIAS.BUTTON_ASSIGN' | translate }}</button>
    </div>

  </form>

</div>

