<div class="content scrolled-content">
  <div class="head">
    <div class="breadcrumbs">
      <span [routerLink]="['/contacts']">{{ 'CONTACTS.TITLE' | translate }}</span>
      <span>{{ 'CONTACTS.ADD' | 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-add" [formGroup]="addContactForm" (ngSubmit)="add()">

    <div class="input-block input-block-name">
      <label for="add-name">{{ 'CONTACTS.FORM.NAME' | translate }}</label>
      <input type="text" id="add-name" formControlName="name" (contextmenu)="variablesService.onContextMenu($event)">
      <div class="error-block" *ngIf="addContactForm.controls['name'].invalid && (addContactForm.controls['name'].dirty || addContactForm.controls['name'].touched)">
        <div *ngIf="addContactForm.controls['name'].errors['minlength'] || addContactForm.controls['name'].errors['maxlength']">
          {{ 'CONTACTS.FORM_ERRORS.NAME_LENGTH' | translate }}
        </div>
        <div *ngIf="addContactForm.controls['name'].errors['required']">
          {{ 'CONTACTS.FORM_ERRORS.NAME_REQUIRED' | translate }}
        </div>
        <div *ngIf="addContactForm.controls['name'].errors['dublicated']">
          {{ 'CONTACTS.FORM_ERRORS.NAME_DUBLICATED' | translate }}
        </div>
      </div>
    </div>

    <div class="input-block input-block-alias">
      <label for="address">{{ 'CONTACTS.FORM.ADDRESS' | translate }}</label>
  
      <input type="text" id="address" formControlName="address" (contextmenu)="variablesService.onContextMenu($event)">
  
      <div class="error-block" *ngIf="addContactForm.controls['address'].invalid && (addContactForm.controls['address'].dirty || addContactForm.controls['address'].touched)">
        <div *ngIf="addContactForm.controls['address'].errors['required']">
          {{ 'CONTACTS.FORM_ERRORS.ADDRESS_REQUIRED' | translate }}
        </div>
        <div *ngIf="addContactForm.controls['address'].errors['address_not_valid']">
          {{ 'CONTACTS.FORM_ERRORS.ADDRESS_NOT_VALID' | translate }}
        </div>
        <div *ngIf="addContactForm.controls['address'].errors['dublicated']">
          {{ 'CONTACTS.FORM_ERRORS.ADDRESS_DUBLICATED' | translate }}
        </div>
      </div>
    </div>

    <div class="input-block input-block-notes">
      <label for="notes">{{ 'CONTACTS.FORM.NOTES' | translate }}</label>
  
      <input type="text" id="notes" formControlName="notes" (contextmenu)="variablesService.onContextMenu($event)">
      
      <div class="error-block" *ngIf="addContactForm.controls['notes'].invalid">
        <div *ngIf="addContactForm.controls['notes'].errors['maxLength']">
          {{ 'CONTACTS.FORM_ERRORS.MAX_LENGTH' | translate }}
        </div>
      </div>
    </div>
   
    <button type="submit" class="blue-button" [disabled]="!addContactForm.valid">{{ 'CONTACTS.BUTTON.ADD_EDIT' | translate }}</button>
  
    <app-send-modal *ngIf="isModalDialogVisible" [form]="addContactForm" (confirmed)="confirmed($event)"></app-send-modal>
  
  </form>
</div>
