<div class="c8y-viewport-modal">
  <div class="modal-header dialog-header">
    <i c8yIcon="upload"></i>
    <h4
      id="modal-title"
      translate
    >
      Upload files
    </h4>
  </div>
  <div class="modal-inner-scroll">
    <div
      class="modal-body"
      id="modal-body"
    >
      <c8y-file-picker-form-control
        #filePicker
        [uploadInProgress]="isLoading"
        (dropped)="onFileDroppedEvent($event)"
        [uploadProgress]="uploadProgress"
      ></c8y-file-picker-form-control>
    </div>
  </div>
  <div class="card-footer separator d-flex j-c-center">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      (click)="onClose.emit({ uploaded: false })"
      [disabled]="isLoading"
      translate
    >
      Cancel
    </button>
    <button
      class="btn btn-primary btn-form"
      title="{{ 'Upload' | translate }}"
      type="button"
      (click)="upload()"
      [disabled]="!filePicker.valid || isLoading"
      translate
      data-cy="c8y-files-repository-upload--upload"
    >
      Upload
    </button>
  </div>
</div>