<div data-ng-if="uploads[fileinput].files.length" data-flow-init>
  <div data-flow-name="flow" class="row">
    <div data-ng-repeat="file in uploads[fileinput].files" data-ng-hide="hideUploadWhenFinished === true && file.isComplete() && !file.error" data-ng-class="{'col-md-12': uploads[fileinput].files.length === 1, 'col-md-6 col-sm-12': uploads[fileinput].files.length > 1}">
      <div class="fileUploadBox mt-2 mb-2">
        <div class="row">
          <div class="col-md-4">
            <div class="filePreview">
              <div class="imgPreview">
                <img alt="preview picture" data-flow-img="file" data-ng-if="Utils.showFilePreview(file.file.type)" />
              </div>
              <div class="fileButtons">
                <div data-ng-if="page === 'submissionpage' || !file.isComplete()" class="removeFileButton text-danger">
                  <div class="btn btn-sm btn-danger" data-ng-click="Utils.removeFile(submission, uploads[fileinput].files, file)"><i class="fa-solid fa-times"></i></div>
                </div>
              </div>
              <div class="fileUpload">
                <div>
                  <div class="fileUploadIcon" data-ng-show="file.error">
                    <i class="fa-solid fa-ban-circle"></i>
                  </div>
                  <div class="fileUploadIcon" data-ng-show="!file.error && !file.isComplete()">
                    <i class="fa-solid fa-file"></i>
                  </div>
                  <div class="fileUploadIcon" data-ng-show="!file.error && file.isComplete()">
                    <i class="fa-solid fa-check"></i>
                  </div>
                </div>
		<div class="fileUploadProgress progress progress-striped" data-ng-class="{'invisible': file.paused}">
                  <div class="progress-bar" data-ng-class="{'progress-bar-complete': file.progress() === 1 }" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-ng-style="{'width': (file.progress() * 100) + '%'}"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-8">
            <div class="pl-2 pr-2">
              <div>
                <label class="fileName">{{file.name}}</label>
              </div>
              <div>
                <label class="fileSize">
                  <span data-translate>Size:</span> <span>{{file.size | byteFmt:2}}</span>
                </label>
              </div>
              <br />
              <div data-ng-hide="file.error">
                <div data-ng-repeat="option in file.value">
                  <textarea class="form-control" data-ng-model="option.value" data-ng-attr-placeholder="{{option['attrs']['name']}}"></textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
