<div>
	<h2 mat-dialog-title>
		Account access rights
	</h2>
	<div mat-dialog-content>
		<form [formGroup]="editForm!" (ngSubmit)="onSubmitClick()">

			<div class="row">
				<div class="col-md-6">
					<label>Invite users</label>
					<div class="text-inside">
						<mat-form-field class="example-full-width">
							<mat-label>Email</mat-label>
							<input matInput formControlName="email">
						</mat-form-field>
					</div>
				</div>
				<div class="col-md-6">
					<h6>User rights</h6>
					<section>
						<mat-checkbox formControlName="allowWrite">
							Allow write
						</mat-checkbox>
					</section>
				</div>
			</div>
			<div formArrayName="accesses">
				<div class="row" *ngFor="let access of accessRightsSorted; let i = index" [formGroupName]="i">
					<div class="col-md-6">
						<input type="hidden" formControlName="userId" />
						{{access.user.email}}
						<span *ngIf="access.isOwner" class="color-gray">(owner)</span>
					</div>
					<div class="col-md-3">
						<mat-checkbox formControlName="allowWrite"> 
							Allow write
						</mat-checkbox>
					</div>
					<div class="col-md-3">
						<button type="button" [disabled]="!access.isAllowDelete" class="btn-space" mat-raised-button color="primary" (click)="removeAccessRight(access)">Delete</button>
					</div>
				</div>
			</div>

			<mat-dialog-actions class="mat-dialog-actions">
				<div class="mat-dialog-left">
					<div class="alert alert-danger mat-dialog-error" *ngIf="errorMessage">
						{{errorMessage}}
					</div>
				</div>
				<div class="mat-dialog-right">
					<div class="button-bottom">
						<button type="button" mat-button (click)="closeDialog()">Cancel</button>
						<button class="btn-space" mat-raised-button color="primary">Save</button>
					</div>
				</div>
			</mat-dialog-actions>

		</form>
	</div>
</div>
