<form *ngIf="formGroup" [formGroup]="formGroup">
	<h1 mat-dialog-title>{{'INVITATION-EDITOR.TITLE' | translate}} {{data.dmpName}}</h1>
	<div mat-dialog-content>
		<!-- User -->
		<mat-form-field class="col">
			<app-multiple-auto-complete [formControl]="formGroup.get('users')"
				placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-USER' | translate}}"
				[configuration]="usersAutoCompleteConfiguration">
			</app-multiple-auto-complete>
		</mat-form-field>

		<!-- Email -->
		<mat-form-field class="example-chip-list col">
			<mat-chip-list #chipList>
				<mat-chip *ngFor="let email of emails" [selectable]="selectable" [removable]="removable"
					(removed)="remove(email)">
					{{email}}
					<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
				</mat-chip>
				<input placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-EMAIL' | translate}}" [matChipInputFor]="chipList"
					[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
					(matChipInputTokenEnd)="add($event)">
			</mat-chip-list>
		</mat-form-field>

		<!-- <mat-form-field class="col">
			<app-multiple-auto-complete required='false' [formControl]="formGroup.get('users').get('email')"
				placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-EMAIL' | translate}}"
				[configuration]="emailAutoCompleteConfiguration" ()>
			</app-multiple-auto-complete>
			<mat-error *ngIf="formGroup.get('users').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
			</mat-error>
		</mat-form-field> -->

		<div class="col-12 d-flex">
			<button mat-raised-button color="primary" (click)="send()" type="button" class="ml-auto">{{'INVITATION-EDITOR.ACTIONS.SEND-INVITATION' | translate}}</button>
		</div>
	</div>
</form>
