<div class="row">
	<div class="external-item col">
		<mat-form-field appearance="outline">
			<mat-select placeholder="{{'TYPES.EXTERNAL-DATASET-TYPE.SELECT' | translate}} {{placeholder}}" [(ngModel)]="choice" (selectionChange)="selectionChange($event)" [disabled]="formArray.disabled">
				<mat-option *ngFor="let option of options" [value]="option.key">
					{{ option.label }}
				</mat-option>
			</mat-select>
		</mat-form-field>
	</div>
	<div class="external-item col" *ngIf="formControl.enabled">
		<mat-form-field appearance="outline">
			<app-single-auto-complete [placeholder]="placeholder" [formControl]="formControl" [configuration]="autoCompleteConfiguration">
			</app-single-auto-complete>
			<mat-hint>{{ 'DATASET-WIZARD.SECOND-STEP.EXTERNAL-HINT' | translate }}</mat-hint>
		</mat-form-field>
	</div>
	<div class="col-12" *ngIf="formArray">
		<div class="row" *ngFor="let suggestion of formArray['controls']; let i = index">
			<ng-container *ngTemplateOutlet="parentTemplate; context: { $implicit: suggestion, index: i,function: this.deleteItem.bind(this) }">
			</ng-container>
		</div>
	</div>
</div>
