<div class="modal-header" ng-show="title">
  <h3 id="modal-title">{{ title | translate }}</h3>
</div>
<div class="modal-body" id="modal-body">
  <form name="filesUploadForm" class="panel-body" novalidate>
    <div class="form-group">
      <label translate>Archives to upload</label>
      <i
        c8y-icon="question-circle-o"
        uib-tooltip="{{
          'Compressed files must have an index.html at root. URLs in the web application can be relative.'
            | translate
        }}"
        tooltip-popup-delay="500"
        tooltip-append-to-body="true"
      ></i>
      <file-picker
        files="files"
        multiple="allowMultipleFiles"
        required="filesRequired"
        disabled="uploading"
      ></file-picker>
    </div>
  </form>
</div>
<div class="modal-footer">
  <button
    class="btn btn-primary"
    type="button"
    ng-class="{ 'btn-pending': uploading }"
    ng-click="upload()"
    ng-disabled="filesUploadForm.$invalid || uploading"
  >
    <span title="{{ 'Upload' | translate }}" ng-hide="uploading">
      {{ 'Upload' | translate }}
    </span>
    <span title="{{ 'Uploading' | translate }}…" ng-show="uploading">
      {{ 'Uploading' | translate }}… ({{ uploadProgress | number: 0 }}%)
    </span>
  </button>
  <button
    class="btn btn-default"
    type="button"
    title="{{ 'Cancel' | translate }}"
    ng-click="dismiss()"
    ng-disabled="uploading"
  >
    {{ 'Cancel' | translate }}
  </button>
</div>
