<div class="modal-header text-center separator" ng-click="$event.stopPropagation()">
  <h1 id="modal-title" class="h3">{{ 'Select file' | translate }}</h1>
  <form class="fileSearchForm">
    <div class="input-group input-group-search">
      <input
        type="search"
        class="form-control"
        placeholder="{{ 'Search files' | translate }}…"
        ng-model="filesFilter.text"
      />
      <span class="input-group-addon">
        <i c8y-icon="search" ng-class="{ 'icon-spin': loading }"></i>
      </span>
    </div>
  </form>
</div>
<div class="modal-inner-scroll" id="modal-body" ng-click="$event.stopPropagation()">
  <div class="list-group m-t-16">
    <button
      title="{{ file.name }}"
      ng-repeat="file in files | filter:filesFilter.text"
      class="list-group-item"
      ng-class="{'active': result.file === file}"
      ng-click="result.file = file; $event.stopPropagation()"
    >
      <span class="text-truncate">
        <i c8y-icon="{{ file.icon }}"></i>
        {{ file.name }}
      </span>
    </button>
    <c8y-load-more></c8y-load-more>
  </div>
</div>
<div class="modal-footer" ng-click="$event.stopPropagation()">
  <button
    title="{{ 'Cancel' | translate }}"
    type="button"
    class="btn btn-default"
    ng-click="cancel()"
  >
    {{ 'Cancel' | translate }}
  </button>
  <button
    title="{{ 'Select' | translate }}"
    type="button"
    class="btn btn-primary"
    ng-click="select();$event.stopPropagation();close() "
    ng-disabled="!result.file"
  >
    {{ 'Select' | translate }}
  </button>
</div>
