<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">
					<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'>
					<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">
					<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">
					<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">
					<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">
					<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>

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