<form class="form-send" [formGroup]="sendForm" (ngSubmit)="showDialog()">

  <div class="input-block input-block-alias">
    <label for="send-address">{{ 'SEND.ADDRESS' | translate }}</label>

    <input type="text" id="send-address" formControlName="address" (mousedown)="addressMouseDown($event)" (contextmenu)="variablesService.onContextMenu($event)">

    <div class="alias-dropdown scrolled-content" *ngIf="isOpen">
      <div *ngFor="let item of localAliases" (click)="setAlias(item.name)">{{item.name}}</div>
    </div>

    <div class="error-block" *ngIf="sendForm.controls['address'].invalid && (sendForm.controls['address'].dirty || sendForm.controls['address'].touched)">
      <div *ngIf="sendForm.controls['address'].errors['required']">
        {{ 'SEND.FORM_ERRORS.ADDRESS_REQUIRED' | translate }}
      </div>
      <div *ngIf="sendForm.controls['address'].errors['address_not_valid']">
        {{ 'SEND.FORM_ERRORS.ADDRESS_NOT_VALID' | translate }}
      </div>
      <div *ngIf="sendForm.controls['address'].errors['alias_not_valid']">
        {{ 'SEND.FORM_ERRORS.ALIAS_NOT_VALID' | translate }}
      </div>
    </div>
  </div>

  <div class="input-blocks-row">

    <div class="input-block">
      <label for="send-amount">{{ 'SEND.AMOUNT' | translate }}</label>
      <input type="text" id="send-amount" formControlName="amount" appInputValidate="money" (contextmenu)="variablesService.onContextMenu($event)">
      <div class="error-block" *ngIf="sendForm.controls['amount'].invalid && (sendForm.controls['amount'].dirty || sendForm.controls['amount'].touched)">
        <div *ngIf="sendForm.controls['amount'].errors['required']">
          {{ 'SEND.FORM_ERRORS.AMOUNT_REQUIRED' | translate }}
        </div>
        <div *ngIf="sendForm.controls['amount'].errors['zero']">
          {{ 'SEND.FORM_ERRORS.AMOUNT_ZERO' | translate }}
        </div>
      </div>
    </div>

    <div class="input-block">
      <label for="send-comment">{{ 'SEND.COMMENT' | translate }}</label>
      <input type="text" id="send-comment" formControlName="comment" [maxLength]="variablesService.maxCommentLength" (contextmenu)="variablesService.onContextMenu($event)">
      <div class="error-block" *ngIf="sendForm.get('comment').value && sendForm.get('comment').value.length >= variablesService.maxCommentLength">
        {{ 'SEND.FORM_ERRORS.MAX_LENGTH' | translate }}
      </div>
    </div>

  </div>

  <button type="button" class="send-select" (click)="toggleOptions()">
    <span>{{ 'SEND.DETAILS' | translate }}</span><i class="icon arrow" [class.down]="!additionalOptions" [class.up]="additionalOptions"></i>
  </button>

  <div class="additional-details" *ngIf="additionalOptions">

    <div class="input-block">
      <label for="send-mixin">{{ 'SEND.MIXIN' | translate }}</label>
      <input type="text" id="send-mixin" formControlName="mixin" appInputValidate="integer" (contextmenu)="variablesService.onContextMenu($event)">
      <div class="error-block" *ngIf="sendForm.controls['mixin'].invalid && (sendForm.controls['mixin'].dirty || sendForm.controls['mixin'].touched)">
        <div *ngIf="sendForm.controls['mixin'].errors['required']">
          {{ 'SEND.FORM_ERRORS.AMOUNT_REQUIRED' | translate }}
        </div>
      </div>
    </div>

    <div class="input-block">
      <label for="send-fee">{{ 'SEND.FEE' | translate }}</label>
      <input type="text" id="send-fee" formControlName="fee" appInputValidate="money" (contextmenu)="variablesService.onContextMenu($event)">
      <div class="error-block" *ngIf="sendForm.controls['fee'].invalid && (sendForm.controls['fee'].dirty || sendForm.controls['fee'].touched)">
        <div *ngIf="sendForm.controls['fee'].errors['required']">
          {{ 'SEND.FORM_ERRORS.FEE_REQUIRED' | translate }}
        </div>
        <div *ngIf="sendForm.controls['fee'].errors['less_min']">
          {{ 'SEND.FORM_ERRORS.FEE_MINIMUM' | translate : {fee: variablesService.default_fee} }}
        </div>
      </div>
    </div>

    <div class="checkbox-block" [ngClass]="{'disabled-checkbox-block': hideWalletAddress}">
      <input type="checkbox" id="send-hide" class="style-checkbox" formControlName="hide" [checked]= "hideWalletAddress">
      <label for="send-hide">{{ 'SEND.HIDE' | translate }}</label>
    </div>

  </div>

  <button type="submit" class="blue-button" [disabled]="!sendForm.valid || !variablesService.currentWallet.loaded">{{ 'SEND.BUTTON' | translate }}</button>

  <app-send-modal *ngIf="isModalDialogVisible" [form]="sendForm" (confirmed)="confirmed($event)"></app-send-modal>

</form>
