<div id="TipPageWBFileUpload" class="card card-default" data-ng-init="collapsed = false">
  <div class="card-header clearfix" data-ng-click="collapsed = !collapsed; $event.stopPropagation();">
    <span data-translate>Files attached by recipients</span>
    <span class="float-right">
      <i data-ng-if="!collapsed" class="fa-solid fa-chevron-up" data-uib-tooltip="{{'Collapse' | translate}}"></i>
      <i data-ng-if="collapsed" class="fa-solid fa-chevron-down" data-uib-tooltip="{{'Expand' | translate}}"></i>
    </span>
  </div>
  <div class="card-body"
       data-ng-show="!collapsed"
       data-ng-controller="RTipWBFileUploadCtrl">
    <div data-ng-repeat="wbfile in tip.wbfiles | orderBy: 'creation_date'">
      <div id="wbfile-{{$index}}" data-wbfile data-ctx="'rtip'"></div>
    </div>
    <div data-ng-if="tip.status !== 'closed'">
      <div data-translate>Upload a file:</div>
      <div class="form"
          data-ng-controller="WBFileUploadCtrl"
          data-flow-init="{target: 'api/rtips/' + tip_id + '/wbfile'}"
          data-flow-files-submitted="beginUpload($files, $event, $flow)"
          data-flow-file-success="reload()"
          extend-flow-valid-size="public.node.maximum_filesize*1024*1024">
        <div class="input-group">
          <span class="input-group-prepend"><span class="input-group-text" data-translate>Description</span></span>
          <input type="text" class="form-control" data-ng-model="file_upload_description" />
          <span class="input-group-append" data-ng-disabled="!file_upload_description" >
            <div class="custom-file">
              <input id="customFile" class="custom-file-input" type="file" data-flow-btn data-flow-single-file />
              <label class="btn btn-primary" for="customFile">
                <i class="fa-solid fa-upload"></i>
                <span data-translate>Upload</span>
              </label>
            </div>
          </span>
        </div>
        <div errors-upload></div>
      </div>
    </div>
  </div>
</div>
