<div class="confirmation-dialog">
	<div class="row d-flex">
		<div class="confirmation-message col align-self-center">
			<h4>{{ data.message }}</h4>
		</div>
		<div class="col-auto ml-auto">
			<mat-icon class="close-btn" (click)="cancel()">close</mat-icon>
		</div>
	</div>

	<div class="row">
		<div class="col-12">
			<ngx-dropzone class="drop-file" (change)="selectXML($event)" [accept]="'text/xml'" [multiple]="false">
				<ngx-dropzone-preview class="file-preview" [removable]="true" *ngIf="hasProfile()" (removed)="onRemove()">
					<ngx-dropzone-label class="file-label">{{ selectedFileName }}</ngx-dropzone-label>
				</ngx-dropzone-preview>
			</ngx-dropzone>
		</div>
	</div>

	<div class="row">
		<div class="col-12 d-flex justify-content-center attach-btn">
			<button mat-button type="button" class="col-auto attach-file" (click)="imgFileInput.click()">
				<mat-icon class="mr-2">input</mat-icon>
				<span *ngIf="!hasProfile()">{{'GENERAL.START-NEW-DMP-DIALOG.UPLOAD-FILE' | translate}}</span>
				<span *ngIf="hasProfile()">{{'GENERAL.START-NEW-DMP-DIALOG.REPLACE-FILE' | translate}}</span>
			</button>
			<input class="hidden" type="file" #imgFileInput (change)="selectXML($event)" accept="text/xml" />
		</div>
	</div>

	<div class="row">
		<mat-form-field class="col-12">
			<input matInput placeholder="{{'DATASET-WIZARD.UPLOAD.UPLOAD-XML-NAME'| translate}}" name="datasetProfileName" [(ngModel)]="data.name">
		</mat-form-field>
		<div class="col-auto">
			<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button>
		</div>
		<div class="col"></div>
		<div class="col-auto">
			<button mat-button color="primary" class="next-btn" type="button" (click)="confirm()" [disabled]="!hasProfile()">{{ data.confirmButton }}</button>
		</div>
	</div>
</div>
