<div class="container">
  <h1 id="header">{{'admin.metadata-import.page.header' | translate}}</h1>
  <p>{{'admin.metadata-import.page.help' | translate}}</p>
  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="validateOnly" [(ngModel)]="validateOnly">
      <label class="form-check-label" for="validateOnly">
        {{'admin.metadata-import.page.validateOnly' | translate}}
      </label>
    </div>
    <small id="validateOnlyHelpBlock" class="form-text text-muted">
      {{'admin.metadata-import.page.validateOnly.hint' | translate}}
    </small>
  </div>

  <ds-file-dropzone-no-uploader
    (onFileAdded)="setFile($event)"
    [dropMessageLabel]="'admin.metadata-import.page.dropMsg'"
    [dropMessageLabelReplacement]="'admin.metadata-import.page.dropMsgReplace'">
  </ds-file-dropzone-no-uploader>

  <div class="space-children-mr">
    <button class="btn btn-secondary" id="backButton"
            (click)="this.onReturn();">{{'admin.metadata-import.page.button.return' | translate}}</button>
    <button class="btn btn-primary" id="proceedButton"
            (click)="this.importMetadata();">{{'admin.metadata-import.page.button.proceed' | translate}}</button>
  </div>
</div>
