<div ng-class="{ 'drop-zone': vm.displayDropZone() === true }">
  <div ng-repeat="file in vm.files">
    <div ng-show="file.file && !vm.hasValidSize(file.file)" class="alert alert-warning" translate>
      The selected file is too large. The size limit is {{ vm.fileSizeLimit | bytes }}.
    </div>
    <div ng-show="file.file && !vm.checkFileType(file.file)" class="alert alert-warning" translate>
      The selected file is not supported.
    </div>
    <div ng-show="file.file && !vm.checkMaxLength(file.file)" class="alert alert-warning" translate>
      The filename is too long.
    </div>
    <div
      ng-style="{ 'pointer-events': vm.disabled === true ? 'none' : 'auto' }"
      ng-if="vm.displayDropZone()"
      ng-file-drop="vm.onFileSelect(file, $files)"
      ng-file-select="vm.onFileSelect(file, $files)"
      ng-file-drag-over-class="drag-over"
      class="file-placeholder"
    >
      <div class="hint-placeholder">
        <i c8y-icon="{{ vm.dropZoneIcon() || 'plus-square' }}"></i>
        <p>
          <span ng-if="vm.dropZoneLabel()" ng-bind="vm.dropZoneLabel() | translate"></span>
          <span ng-if="!vm.dropZoneLabel()" ng-bind="'Select file' | translate"></span>
          <br ng-if="!vm.dropZoneHideHint() && !vm.process.inProgress" />
          <span ng-if="!vm.dropZoneHideHint() && !vm.process.inProgress" translate>
            <b>Drop file here</b>
            <br />
            or click to browse your file system.
          </span>
        </p>
      </div>

      <div class="upload-status" ng-if="vm.process.inProgress">
        <p>
          <strong>
            <span ng-bind="vm.process.label | translate"></span>
            …
          </strong>
        </p>
        <div class="progress">
          <div
            aria-label="{{ vm.process.progress + '%' }}"
            class="progress-bar active progress-bar-striped"
            role="progressbar"
            aria-valuemin="0"
            aria-valuemax="100"
            style="min-width: 2em"
            ng-style="{ width: vm.process.progress + '%' }"
          >
            <span>{{ vm.process.progress | number: 0 }}%</span>
          </div>
        </div>
      </div>
    </div>

    <div class="form-group" ng-if="!vm.displayDropZone()">
      <div class="input-group" ng-class="{ 'has-error': file.file && !vm.isValid(file.file) }">
        <input
          type="text"
          class="form-control"
          placeholder="{{ 'No file selected' | translate }}"
          ng-model="file.file.name"
          ng-required="vm.required"
          ng-file-select="vm.onFileSelect(file, $files)"
          readonly
        />
        <span class="input-group-btn">
          <button
            title="{{ 'Browse' | translate }}"
            aria-label="{{ 'Browse' | translate }}"
            type="button"
            class="btn btn-default"
            ng-file-select="vm.onFileSelect(file, $files)"
            ng-disabled="vm.disabled"
          >
            <i c8y-icon="ellipsis-h"></i>
          </button>
          <button
            class="btn-dot btn-dot--danger"
            title="{{ 'Remove' | translate }}"
            aria-label="{{ 'Remove' | translate }}"
            type="button"
            ng-click="vm.remove(file)"
            ng-show="file.file.name || (vm.multiple && !$first)"
          >
            <i c8y-icon="minus-circle"></i>
          </button>
        </span>
      </div>
    </div>
    <button
      title="{{ 'Add file' | translate }}"
      aria-label="{{ 'Add file' | translate }}"
      type="button"
      class="btn btn-default"
      ng-click="vm.add()"
      ng-show="vm.multiple && $last && !vm.displayDropZone()"
    >
      <i c8y-icon="plus-circle"></i>
      {{ 'Add file' | translate }}
    </button>
  </div>
</div>
