<div class="form-container">
	<form *ngIf="formGroup" [formGroup]="formGroup" class="m-0">
		<div class="row d-flex justify-content-end m-0" (click)="closeDialog()">
			<mat-icon class="close-icon">close</mat-icon>
		</div>
		<div class="row m-0">
			<h1 mat-dialog-title class="title">{{'DMP-LISTING.ACTIONS.INVITE-AUTHORS' | translate}}</h1>
		</div>
		<div mat-dialog-content class="row content">
			<mat-form-field class="col pt-0 pb-2 mb-4 search">
				<!-- <mat-label>{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}</mat-label> -->
				<app-multiple-auto-complete [formControl]="formGroup.get('users')" placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}"
											[configuration]="usersAutoCompleteConfiguration" [showNoResultsLabel]="false"
											[minLength]="3">
				</app-multiple-auto-complete>
			</mat-form-field>
			<p class="d-flex m-0 hint">
				<mat-icon class="align-self-center mr-1">info_outlined</mat-icon>
				{{'GENERAL.INVITATION-DIALOG.HINT' | translate}}
			</p>
			<div class="col-12 d-flex justify-content-end align-items-center row m-0 pt-1 pb-1">
				<mat-form-field class="select-role">
					<mat-select [formControl]="formGroup.get('role')">
						<mat-option [value]="roles.Owner">{{enumUtils.toRoleString(roles.Owner)}}</mat-option>
						<mat-option [value]="roles.Member">{{enumUtils.toRoleString(roles.Member)}}</mat-option>
					</mat-select>
				</mat-form-field>
				<button mat-raised-button *ngIf="hasValue()" (click)="send()" type="button" class="invite-btn mt-2">{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}</button>
				<button mat-raised-button *ngIf="!hasValue()" type="button" class="invite-btn-disabled mt-2">{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}</button>
			</div>
		</div>
	</form>
</div>



<!-- <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> -->
