<div class="container">
  <div class="row">

    <div class="col-12">
      <input
        placeholder="Start searching..."
        class="form-control search-downloads"
        type="text"
        ng-model="ctrl.query"
        ng-model-options="{debounce: 1000}">
    </div>

    <div
      class="col-12">

      <wave-spinner
        ng-if="!ctrl.downloads.length">
      </wave-spinner>

      <div
        class="py-4"
        pagination-id="downloads"
        dir-paginate="download in ctrl.downloads | filter:ctrl.query | itemsPerPage: ctrl.itemsPerPage">
        <h3>{{ download.name }}</h3>
        <div class="container-fluid px-0">
          <div class="row">
            <div
              class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"
              ng-repeat="file in download.files">
              <beyer-tile-download
                class="dark"
                icon="Cloud-Download"
                link="{{ file.url }}"
                target="{{ file.target }}">
                <hr>
                <h3 class="product-downloads__item-header">{{ file.downloadType }}</h3>
                <p class="product-downloads__item-description">{{ file.name }} ({{ file.size }})</p>
              </beyer-tile-download>
            </div>
          </div>
        </div>
      </div>

      <pagination-component
        color="white"
        pagination-id="downloads">
      </pagination-component>

    </div>
    

  </div>
</div>