<h1 mat-dialog-title>Create new group</h1>
<form [formGroup]="groupNameForm" class="file-name-form">
  <mat-form-field class="file-name-form-field">
    <input
      matInput
      (keydown)="onKeyDown($event)"
      type="text"
      formControlName="groupName"
      [ngClass]="{ 'is-invalid': form.groupName?.errors }"
      placeholder="Please enter group name"
    />
    <mat-error *ngIf="form.groupName?.touched && form.groupName?.errors && form.groupName?.errors.required"
    >Group name is required</mat-error
    >
    <mat-error *ngIf="form.groupName?.errors && form.groupName?.errors.invalidName"
    >Group name is incorrect</mat-error
    >
    <mat-error *ngIf="form.groupName?.errors && form.groupName?.errors.projectExist"
    >Group with this name exists</mat-error
    >
  </mat-form-field>
</form>

  <h5>Add users to group: </h5>
  <mat-form-field class="input-field">
    <mat-label>Users</mat-label>
    <input type="text"
           matInput
           [matAutocomplete]="auto"
           [formControl]="autocompleteControl">
    <mat-autocomplete #auto="matAutocomplete"[displayWith]="displayFn" (optionSelected)='selectedUser($event.option.value)'>
      <mat-option *ngFor="let user of filteredUsers | async" [value]="user" >
        {{user.username}} - {{user.email}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

  <div class="users">
    <div *ngFor="let user of usersToAdd">
      <div class="userList">
        <div>{{user.username}}</div>
        <div>{{user.email}}</div>
        <mat-icon (click)="delUser(user)">delete</mat-icon>
      </div>
    </div>
  </div>




  <div mat-dialog-actions class="button-div">
    <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
    <button mat-button (click)="onAddClick()" tabindex="2" class="add-project-button" mat-raised-button color="primary">
      Add group
    </button>
  </div>

