<div class="container">
  <h1 id="header">{{'admin.batch-import.page.header' | translate}}</h1>
  <p>{{'admin.batch-import.page.help' | translate}}</p>
  @if (dso) {
    <p>
      selected collection: <b>{{getDspaceObjectName()}}</b>&nbsp;
      <a href="javascript:void(0)" (click)="removeDspaceObject()">{{'admin.batch-import.page.remove' | translate}}</a>
    </p>
  }
  <p>
    <button class="btn btn-primary" (click)="this.selectCollection();">{{'admin.metadata-import.page.button.select-collection' | translate}}</button>
  </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.batch-import.page.validateOnly.hint' | translate}}
    </small>
  </div>

  <ui-switch color="#ebebeb"
    [checkedLabel]="'admin.metadata-import.page.toggle.upload' | translate"
    [uncheckedLabel]="'admin.metadata-import.page.toggle.url' | translate"
    [checked]="isUpload"
  (change)="toggleUpload()" ></ui-switch>
  <small class="form-text text-muted d-block">
    {{'admin.batch-import.page.toggle.help' | translate}}
  </small>


  @if (isUpload) {
    <ds-file-dropzone-no-uploader
      data-test="file-dropzone"
      (onFileAdded)="setFile($event)"
      [dropMessageLabel]="'admin.batch-import.page.dropMsg'"
      [dropMessageLabelReplacement]="'admin.batch-import.page.dropMsgReplace'">
    </ds-file-dropzone-no-uploader>
  }

  @if (!isUpload) {
    <div class="mb-3 mt-2">
      <input class="form-control" type="text" placeholder="{{'admin.metadata-import.page.urlMsg' | translate}}"
        data-test="file-url-input" [(ngModel)]="fileURL">
    </div>
  }

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