<form *ngIf="formGroup" [formGroup]="formGroup">
	<div class="row d-flex flex-row">
		<div mat-dialog-title class="col-auto">
			{{'DATASET-REFERENCED-MODELS.SERVICES.TITLE' | translate}}
		</div>
		<div class="col-auto ml-auto close-btn" (click)="close()">
			<mat-icon>close</mat-icon>
		</div>
	</div>
	<div mat-dialog-content class="row">
		<mat-form-field class="col-auto">
			<input matInput formControlName="label" placeholder="{{'DATASET-REFERENCED-MODELS.SERVICES.LABEL' | translate}}" required>
			<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
		</mat-form-field>
		<mat-form-field class="col-auto">
			<input matInput formControlName="abbreviation" placeholder="{{'DATASET-REFERENCED-MODELS.SERVICES.ABBREVIATION' | translate}}" required>
			<mat-error *ngIf="formGroup.get('abbreviation').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
		</mat-form-field>
		<mat-form-field class="col-auto">
			<input matInput formControlName="uri" placeholder="{{'DATASET-REFERENCED-MODELS.SERVICES.URI' | translate}}" required>
			<mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
		</mat-form-field>
	</div>
	<div mat-dialog-actions class="row">
		<div class="ml-auto col-auto"><button mat-raised-button mat-dialog-close type="button">Cancel</button></div>
		<div class="col-auto"><button mat-raised-button color="primary" (click)="send()" type="button">Save</button></div>
	</div>
</form>
