<form *ngIf="formGroup" [formGroup]="formGroup" class="dataset-external-references-editor">
	<!-- Tags -->
	<div class="pt-2">
		<div class="row">
			<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
				<h4 class="col-auto heading">1.3 {{'DATASET-EDITOR.FIELDS.TAGS' | translate}}</h4>
			</div>
		</div>
		<div class="tags-form">
			<mat-form-field appearance="outline">
				<app-multiple-auto-complete [configuration]="tagsAutoCompleteConfiguration" [formControl]="formGroup.get('tags')" placeholder="{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}"></app-multiple-auto-complete>
			</mat-form-field>
		</div>
	</div>
	<!-- Data Repositories -->
	<!-- <div class="pt-2">
		<div class="row">
			<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
				<h4 class="col-auto heading">1.5 {{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES' | translate}}</h4>
				<div class="col"></div>
				<div class="col-auto d-flex align-items-center" *ngIf='!viewOnly'>
					<button class="col-auto" mat-raised-button (click)="addDataRepository()">
						{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
					</button>
				</div>
			</div>
		</div>
		<app-external-item-listing class="col-12" *ngIf="formGroup.get('dataRepositories') && dataRepositoriesTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.dataRepositories" placeholder="{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES' | translate}}" [parentTemplate]='dataRepositoriesTemplate' [formArray]="formGroup.get('dataRepositories')" [autoCompleteConfiguration]="dataRepositoriesAutoCompleteConfiguration" (onItemChange)="dataRepositoriesOnItemChange($event)">
		</app-external-item-listing>
		<ng-template #dataRepositoriesTemplate let-suggestion let-i="index" let-callback="function">
			<div class="col-12 row align-items-center">
				<span class="col">
					{{i+1}}) {{suggestion.get('name').value}}
				</span>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.DATA-REPOSITORY.LABEL' | translate}}" type="text" name="name" [formControl]="suggestion.get('name')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.DATA-REPOSITORY.ABBREVIATION' | translate}}" type="text" name="abbreviation" [formControl]="suggestion.get('abbreviation')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.DATA-REPOSITORY.URI' | translate}}" type="text" name="uri" [formControl]="suggestion.get('uri')">
					</mat-form-field>
				</div>
				<div class="col-auto">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES-INFO' | translate}}" type="text" name="info" [formControl]="suggestion.get('info')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf='!viewOnly && isInternal(suggestion)'>
					<button mat-raised-button (click)="updateDataRepository(suggestion)" type="button">
						{{ 'DATASET-EDITOR.ACTIONS.UPDATE' | translate }}
					</button>
				</div>
				<div class="col-auto" *ngIf='!viewOnly'>
					<button mat-icon-button (click)="callback(i)">
						<mat-icon>close</mat-icon>
					</button>
				</div>
			</div>
		</ng-template>
	</div> -->
	<!-- External Datasets -->
	<!-- <div class="pt-2">
		<div class="row">
			<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
				<h4 class="col-auto heading">1.6 {{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASETS' | translate}}</h4>
				<div class="col"></div>
				<div class="col-auto d-flex align-items-center" *ngIf='!viewOnly'><button mat-raised-button (click)="addExternalDataset()">
						{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
					</button>
				</div>
			</div>
			<div class="col-12">
				<span class="hint">{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASETS-DESCRIPTION' | translate}}</span>
			</div>
		</div>
		<app-external-item-listing class="col-12" *ngIf="formGroup.get('externalDatasets') && externalDatasetsTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.externalDatasets" placeholder="{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASETS' | translate}}" [parentTemplate]='externalDatasetsTemplate' [formArray]="formGroup.get('externalDatasets')" [autoCompleteConfiguration]="externalDatasetAutoCompleteConfiguration" (onItemChange)="externalDatasetsOnItemChange($event)">
		</app-external-item-listing>

		<ng-template #externalDatasetsTemplate let-suggestion let-i="index" let-callback="function">
			<div class="col-12 row align-items-center">
				<div class="col">
					<p>
						{{i+1}}) {{suggestion.get('name').value}}
					</p>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.EXTERNAL-DATASET.LABEL' | translate}}" type="text" name="name" [formControl]="suggestion.get('name')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.EXTERNAL-DATASET.ABBREVIATION' | translate}}" type="text" name="abbreviation" [formControl]="suggestion.get('abbreviation')">
					</mat-form-field>
				</div>
				<div class="col-auto">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASET-INFO' | translate}}" type="text" name="info" [formControl]="suggestion.get('info')">
					</mat-form-field>
				</div>

				<div class="col-auto">
					<mat-form-field>
						<mat-select placeholder="{{'DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-DATASET-TYPE' | translate}}" [formControl]="suggestion.get('type')" required>
							<mat-option [value]="0">{{'TYPES.EXTERNAL-DATASET-TYPE.SOURCE' | translate}}</mat-option>
							<mat-option [value]="1">{{'TYPES.EXTERNAL-DATASET-TYPE.OUTPUT' | translate}}</mat-option>
						</mat-select>
						<mat-error *ngIf="suggestion.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf='!viewOnly && isInternal(suggestion)'>
					<button mat-raised-button (click)="updateExternalDataset(suggestion)" type="button">
						{{ 'DATASET-EDITOR.ACTIONS.UPDATE' | translate }}
					</button>
				</div>
				<div class="col-auto">
					<button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
						<mat-icon>close</mat-icon>
					</button>
				</div>
			</div>
		</ng-template>
	</div> -->
	<!-- Registries -->
	<!-- <div class="pt-2">
		<div class="row">
			<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
				<h4 class="col-auto heading">1.7 {{'DATASET-EDITOR.FIELDS.REGISTRIES' | translate}}</h4>
				<div class="col"></div>
				<div class="col-auto d-flex align-items-center" *ngIf='!viewOnly'><button mat-raised-button (click)="addRegistry()">
						{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
					</button>
				</div>
			</div>
		</div>
		<app-external-item-listing class="col-12" *ngIf="formGroup.get('registries') && registriesTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.registries" placeholder="{{'DATASET-EDITOR.FIELDS.REGISTRIES' | translate}}" [parentTemplate]='registriesTemplate' [formArray]="formGroup.get('registries')" [autoCompleteConfiguration]="registriesAutoCompleteConfiguration" (onItemChange)="registriesOnItemChange($event)">
		</app-external-item-listing>

		<ng-template #registriesTemplate let-suggestion let-i="index" let-callback="function">
			<div class="col-12 row align-items-center">
				<div class="col">
					<p>
						{{i+1}}) {{suggestion.get('label').value}}
					</p>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.REGISTRY.LABEL' | translate}}" type="text" name="label" [formControl]="suggestion.get('label')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.REGISTRY.ABBREVIATION' | translate}}" type="text" name="abbreviation" [formControl]="suggestion.get('abbreviation')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.REGISTRY.URI' | translate}}" type="text" name="uri" [formControl]="suggestion.get('uri')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf='!viewOnly && isInternal(suggestion)'>
					<button mat-raised-button (click)="updateRegistry(suggestion)" type="button">
						{{ 'DATASET-EDITOR.ACTIONS.UPDATE' | translate }}
					</button>
				</div>
				<div class="col-auto">
					<button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
						<mat-icon>close</mat-icon>
					</button>
				</div>
			</div>
		</ng-template>
	</div> -->
	<!-- Services -->
	<!-- <div class="pt-2">
		<div class="row">
			<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
				<h4 class="col-auto heading">1.8 {{'DATASET-EDITOR.FIELDS.SERVICES' | translate}}</h4>
				<div class="col"></div>
				<div class="col-auto d-flex align-items-center" *ngIf='!viewOnly'>
					<button mat-raised-button (click)="addService()">
						{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
					</button>
				</div>
			</div>
		</div>
		<app-external-item-listing class="col-12" *ngIf="formGroup.get('services') && servicesTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.services" placeholder="{{'DATASET-EDITOR.FIELDS.SERVICES' | translate}}" [parentTemplate]='servicesTemplate' [formArray]="formGroup.get('services')" [autoCompleteConfiguration]="servicesAutoCompleteConfiguration" (onItemChange)="servicesOnItemChange($event)">
		</app-external-item-listing>

		<ng-template #servicesTemplate let-suggestion let-i="index" let-callback="function">
			<div class="col-12 row align-items-center">
				<div class="col">
					<p>
						{{i+1}}) {{suggestion.get('label').value}}
					</p>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.SERVICES.LABEL' | translate}}" type="text" name="label" [formControl]="suggestion.get('label')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.SERVICES.ABBREVIATION' | translate}}" type="text" name="abbreviation" [formControl]="suggestion.get('abbreviation')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.SERVICES.URI' | translate}}" type="text" name="uri" [formControl]="suggestion.get('uri')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf='!viewOnly && isInternal(suggestion)'>
					<button mat-raised-button (click)="updateRegistry(suggestion)" type="button">
						{{ 'DATASET-EDITOR.ACTIONS.UPDATE' | translate }}
					</button>
				</div>
				<div class="col-auto">
					<button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
						<mat-icon>close</mat-icon>
					</button>
				</div>
			</div>
		</ng-template>
	</div> -->
</form>

<!-- <form *ngIf="formGroup" [formGroup]="formGroup" class="dataset-external-references-editor">
	<mat-card class="col-12 external-item-card">
		<div class="row">
			<div class="col-12 row">
				<h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES' | translate}}</h4>
				<div class="col"></div>
				<div class="col-auto" *ngIf='!viewOnly'>
					<button class="col-auto" mat-raised-button color="primary" (click)="addDataRepository()">
						{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
					</button>
				</div>
			</div>
		</div>
		<app-external-item-listing class="col-12" *ngIf="formGroup.get('dataRepositories') && dataRepositoriesTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.dataRepositories" placeholder="{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES' | translate}}" [parentTemplate]='dataRepositoriesTemplate' [formArray]="formGroup.get('dataRepositories')" [autoCompleteConfiguration]="dataRepositoriesAutoCompleteConfiguration" (onItemChange)="dataRepositoriesOnItemChange($event)">
		</app-external-item-listing>
		<ng-template #dataRepositoriesTemplate let-suggestion let-i="index" let-callback="function">
			<div class="col-12 row align-items-center">
				<span class="col">
					{{i+1}}) {{suggestion.get('name').value}}
				</span>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.DATA-REPOSITORY.LABEL' | translate}}" type="text" name="name" [formControl]="suggestion.get('name')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.DATA-REPOSITORY.ABBREVIATION' | translate}}" type="text" name="abbreviation" [formControl]="suggestion.get('abbreviation')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.DATA-REPOSITORY.URI' | translate}}" type="text" name="uri" [formControl]="suggestion.get('uri')">
					</mat-form-field>
				</div>
				<div class="col-auto">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES-INFO' | translate}}" type="text" name="info" [formControl]="suggestion.get('info')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf='!viewOnly && isInternal(suggestion)'>
					<button mat-raised-button (click)="updateDataRepository(suggestion)" type="button" color="primary">
						{{ 'DATASET-EDITOR.ACTIONS.UPDATE' | translate }}
					</button>
				</div>
				<div class="col-auto" *ngIf='!viewOnly'>
					<button mat-icon-button (click)="callback(i)">
						<mat-icon>close</mat-icon>
					</button>
				</div>
			</div>
		</ng-template>
	</mat-card>
	<mat-card class="col-12 external-item-card">
		<div class="row">
			<div class="col-12 row">
				<h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASETS' | translate}}</h4>
				<div class="col"></div>
				<div class="col-auto" *ngIf='!viewOnly'><button mat-raised-button color="primary" (click)="addExternalDataset()">
						{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
					</button>
				</div>
			</div>
			<div class="col-12">
				<span>{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASETS-DESCRIPTION' | translate}}</span>
			</div>
		</div>
		<app-external-item-listing class="col-12" *ngIf="formGroup.get('externalDatasets') && externalDatasetsTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.externalDatasets" placeholder="{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASETS' | translate}}" [parentTemplate]='externalDatasetsTemplate' [formArray]="formGroup.get('externalDatasets')" [autoCompleteConfiguration]="externalDatasetAutoCompleteConfiguration" (onItemChange)="externalDatasetsOnItemChange($event)">
		</app-external-item-listing>

		<ng-template #externalDatasetsTemplate let-suggestion let-i="index" let-callback="function">
			<div class="col-12 row align-items-center">
				<div class="col">
					<p>
						{{i+1}}) {{suggestion.get('name').value}}
					</p>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.EXTERNAL-DATASET.LABEL' | translate}}" type="text" name="name" [formControl]="suggestion.get('name')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.EXTERNAL-DATASET.ABBREVIATION' | translate}}" type="text" name="abbreviation" [formControl]="suggestion.get('abbreviation')">
					</mat-form-field>
				</div>
				<div class="col-auto">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASET-INFO' | translate}}" type="text" name="info" [formControl]="suggestion.get('info')">
					</mat-form-field>
				</div>

				<div class="col-auto">
					<mat-form-field>
						<mat-select placeholder="{{'DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-DATASET-TYPE' | translate}}" [formControl]="suggestion.get('type')" required>
							<mat-option [value]="0">{{'TYPES.EXTERNAL-DATASET-TYPE.SOURCE' | translate}}</mat-option>
							<mat-option [value]="1">{{'TYPES.EXTERNAL-DATASET-TYPE.OUTPUT' | translate}}</mat-option>
						</mat-select>
						<mat-error *ngIf="suggestion.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf='!viewOnly && isInternal(suggestion)'>
					<button mat-raised-button (click)="updateExternalDataset(suggestion)" type="button" color="primary">
						{{ 'DATASET-EDITOR.ACTIONS.UPDATE' | translate }}
					</button>
				</div>
				<div class="col-auto">
					<button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
						<mat-icon>close</mat-icon>
					</button>
				</div>
			</div>
		</ng-template>
	</mat-card>

	<mat-card class="col-12 external-item-card">
		<div class="row">
			<div class="col-12 row">
				<h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.REGISTRIES' | translate}}</h4>
				<div class="col"></div>
				<div class="col-auto" *ngIf='!viewOnly'><button mat-raised-button color="primary" (click)="addRegistry()">
						{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
					</button>
				</div>
			</div>
		</div>
		<app-external-item-listing class="col-12" *ngIf="formGroup.get('registries') && registriesTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.registries" placeholder="{{'DATASET-EDITOR.FIELDS.REGISTRIES' | translate}}" [parentTemplate]='registriesTemplate' [formArray]="formGroup.get('registries')" [autoCompleteConfiguration]="registriesAutoCompleteConfiguration" (onItemChange)="registriesOnItemChange($event)">
		</app-external-item-listing>

		<ng-template #registriesTemplate let-suggestion let-i="index" let-callback="function">
			<div class="col-12 row align-items-center">
				<div class="col">
					<p>
						{{i+1}}) {{suggestion.get('label').value}}
					</p>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.REGISTRY.LABEL' | translate}}" type="text" name="label" [formControl]="suggestion.get('label')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.REGISTRY.ABBREVIATION' | translate}}" type="text" name="abbreviation" [formControl]="suggestion.get('abbreviation')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.REGISTRY.URI' | translate}}" type="text" name="uri" [formControl]="suggestion.get('uri')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf='!viewOnly && isInternal(suggestion)'>
					<button mat-raised-button (click)="updateRegistry(suggestion)" type="button" color="primary">
						{{ 'DATASET-EDITOR.ACTIONS.UPDATE' | translate }}
					</button>
				</div>
				<div class="col-auto">
					<button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
						<mat-icon>close</mat-icon>
					</button>
				</div>
			</div>
		</ng-template>
	</mat-card>

	<mat-card class="col-12 external-item-card">
		<div class="row">
			<div class="col-12 row">
				<h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.SERVICES' | translate}}</h4>
				<div class="col"></div>
				<div class="col-auto" *ngIf='!viewOnly'>
					<button mat-raised-button color="primary" (click)="addService()">
						{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
					</button>
				</div>
			</div>
		</div>
		<app-external-item-listing class="col-12" *ngIf="formGroup.get('services') && servicesTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.services" placeholder="{{'DATASET-EDITOR.FIELDS.SERVICES' | translate}}" [parentTemplate]='servicesTemplate' [formArray]="formGroup.get('services')" [autoCompleteConfiguration]="servicesAutoCompleteConfiguration" (onItemChange)="servicesOnItemChange($event)">
		</app-external-item-listing>

		<ng-template #servicesTemplate let-suggestion let-i="index" let-callback="function">
			<div class="col-12 row align-items-center">
				<div class="col">
					<p>
						{{i+1}}) {{suggestion.get('label').value}}
					</p>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.SERVICES.LABEL' | translate}}" type="text" name="label" [formControl]="suggestion.get('label')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.SERVICES.ABBREVIATION' | translate}}" type="text" name="abbreviation" [formControl]="suggestion.get('abbreviation')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf="isInternal(suggestion)">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-REFERENCED-MODELS.SERVICES.URI' | translate}}" type="text" name="uri" [formControl]="suggestion.get('uri')">
					</mat-form-field>
				</div>
				<div class="col-auto" *ngIf='!viewOnly && isInternal(suggestion)'>
					<button mat-raised-button (click)="updateRegistry(suggestion)" type="button" color="primary">
						{{ 'DATASET-EDITOR.ACTIONS.UPDATE' | translate }}
					</button>
				</div>
				<div class="col-auto">
					<button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
						<mat-icon>close</mat-icon>
					</button>
				</div>
			</div>
		</ng-template>
	</mat-card>

	<mat-card class="col-12 external-item-card">
		<div class="row">
			<div class="col-12 row">
				<h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}</h4>
			</div>
		</div> -->
<!-- <app-external-item-listing *ngIf="formGroup.get('tags') && tagsTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.tags" placeholder="{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}" [parentTemplate]='tagsTemplate' [formArray]="formGroup.get('tags')" [autoCompleteConfiguration]="tagsAutoCompleteConfiguration" (onItemChange)="tagsOnItemChange($event)">
		</app-external-item-listing> -->
<!-- <mat-form-field>
			<mat-chip-list #chipList [disabled]="viewOnly">
				<mat-chip *ngFor="let tag of formGroup.get('tags').value"
					[removable]="true" (removed)="removeTag(tag)">
					{{tag.name}}
					<mat-icon  matChipRemove *ngIf="!viewOnly">cancel</mat-icon>
				</mat-chip>
				<input  matInput [disabled]="viewOnly" placeholder="{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}"
			[matChipInputFor]="chipList"
			[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
			[matChipInputAddOnBlur]="true"
			(matChipInputTokenEnd)="addTag($event)">
			</mat-chip-list>
		</mat-form-field>

		<ng-template #tagsTemplate let-suggestion let-i="index" let-callback="function">
			<div class="col-12 row align-items-center">
				<div class="col">
					<p>
						{{i+1}}) {{suggestion.get('name').value}}
					</p>
				</div>
				<div class="col-auto">
					<button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
						<mat-icon>close</mat-icon>
					</button>
				</div>
			</div>
		</ng-template>
	</mat-card>
</form> -->
