<ng-form name="binaryInputForm">
  <div
    class="form-group m-0 m-b-4"
    ng-class="{ 'has-error': binaryInputForm.$dirty && binaryInputForm.$invalid }"
  >
    <span ng-show="!file.id">
      <span ng-show="!allowFreeUrlInput">
        {{ 'No file selected.' | translate }}
      </span>
      <div ng-show="allowFreeUrlInput">
        <div class="input-group">
          <span class="input-group-addon">
            <i c8y-icon="globe"></i>
          </span>
          <input
            type="text"
            class="form-control"
            ng-model="file.url"
            placeholder="{{ 'e.g.' | translate }} http://example.com/binary.zip"
            ng-required="fileRequired"
          />
        </div>
      </div>
    </span>
    <p ng-show="file.id" class="form-control-static text-truncate" title="{{ file.name }}">
      <i c8y-icon="{{ file.icon }}"></i>
      {{ file.name }}
    </p>
    <p
      ng-show="fileNotAvailable"
      class="form-control-static text-truncate text-danger"
      title="{{ 'Selected file is no longer available in the platform.' | translate }}"
    >
      <i c8y-icon="exclamation-triangle"></i>
      <span translate>Selected file is no longer available in the platform.</span>
    </p>
  </div>
  <div class="btn-group btn-group-justified p-0">
    <button
      class="btn btn-default btn-xs"
      type="button"
      ng-class="{ 'btn-pending': status.upload.inProgress }"
      aria-label="{{ 'Upload' | translate }}"
      uib-tooltip="{{ 'Upload' | translate }}"
      tooltip-popup-delay="500"
      tooltip-trigger="'mouseenter'"
      tooltip-append-to-body="true"
      ng-if="uploadable"
      ng-disabled="status.upload.inProgress"
      ng-file-select="onFileSelect($files)"
      ng-click="file.showUrlInput = false"
    >
      <i c8y-icon="upload"></i>
    </button>
    <button
      class="btn btn-default btn-xs"
      type="button"
      aria-label="{{ 'External URL' | translate }}"
      uib-tooltip="{{ 'External URL' | translate }}"
      tooltip-popup-delay="500"
      tooltip-trigger="'mouseenter'"
      tooltip-append-to-body="true"
      ng-if="!file.id"
      ng-click="file.showUrlInput = true"
    >
      <span><i c8y-icon="globe"></i></span>
    </button>
    <button
      class="btn btn-default btn-xs"
      type="button"
      aria-label="{{ 'Select file' | translate }}"
      uib-tooltip="{{ 'Select file' | translate }}"
      tooltip-popup-delay="500"
      tooltip-trigger="'mouseenter'"
      tooltip-append-to-body="true"
      ng-if="editable"
      ng-click="chooseFile()"
    >
      <i c8y-icon="file"></i>
    </button>
    <button
      class="btn btn-default btn-xs"
      ng-class="{ 'btn-pending': status.download.inProgress }"
      type="button"
      aria-label="{{ 'Download' | translate }}"
      uib-tooltip="{{ 'Download' | translate }}"
      tooltip-popup-delay="500"
      tooltip-trigger="'mouseenter'"
      tooltip-append-to-body="true"
      ng-if="downloadable && file.id"
      ng-disabled="status.download.inProgress"
      ng-click="download(file); file.showUrlInput = false;"
    >
      <span ng-hide="status.download.inProgress">
        <i c8y-icon="download"></i>
      </span>
      <span
        ng-show="status.download.inProgress"
        title="{{ 'Downloading…' | translate }} ({{ file.downloadProgress | number: 0 }}%)"
      >
        <i c8y-icon="download"></i>
      </span>
    </button>
    <button
      class="btn btn-default btn-xs"
      type="button"
      aria-label="{{ 'Clear`selection`' | translate }}"
      uib-tooltip="{{ 'Clear`selection`' | translate }}"
      tooltip-popup-delay="500"
      tooltip-trigger="'mouseenter'"
      tooltip-append-to-body="true"
      ng-if="clearable && file.id"
      ng-click="clear(file); file.showUrlInput = false;"
    >
      <i c8y-icon="eraser"></i>
    </button>
    <button
      class="btn btn-default btn-xs"
      type="button"
      aria-label="{{ 'Remove' | translate }}"
      uib-tooltip="{{ 'Remove' | translate }}"
      tooltip-popup-delay="500"
      tooltip-trigger="'mouseenter'"
      tooltip-append-to-body="true"
      ng-if="removable && file.id"
      ng-click="remove(file); file.showUrlInput = false;"
    >
      <i c8y-icon="times"></i>
    </button>
  </div>
</ng-form>
