<div ng-controller="binaryArtefactsListCtrl as vm">
  <c8y-breadcrumbs-set>
    <c8y-breadcrumbs-item
      icon="c8y-management"
      label="{{ 'Files repository' | translate }}"
    ></c8y-breadcrumbs-item>
    <c8y-breadcrumbs-item
      icon="c8y-management"
      label="{{ 'Management' | translate }}"
    ></c8y-breadcrumbs-item>
  </c8y-breadcrumbs-set>

  <c8y-ui-action-bar-set>
    <li
      class="navbar-form"
      action-bar-position="left"
    >
      <div class="input-group input-group-search">
        <input
          class="form-control"
          title="{{ 'Filter files' | translate }}…"
          id="Filter"
          placeholder="{{ 'Filter' | translate }}…"
          type="search"
          ng-model="vm.searchString"
        />
        <span class="input-group-addon">
          <i
            c8y-icon="search"
            ng-if="vm.searchString.length === 0 || !vm.searchString"
          ></i>
          <i
            class="text-muted"
            c8y-icon="times"
            ng-if="vm.searchString.length > 0"
            ng-click="vm.searchString = ''"
          ></i>
        </span>
        <span
          class="sr-only"
          for="Filter"
          translate
        >
          Filter files
        </span>
      </div>
    </li>

    <li
      c8y-if-allowed
      any-role="['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_CREATE', 'ROLE_BINARY_ADMIN', 'ROLE_BINARY_CREATE']"
    >
      <button
        class="btn btn-link"
        title="{{ 'Upload file' | translate }}"
        type="button"
        ng-click="upload()"
        data-cy="upload()"
      >
        <i c8y-icon="upload"></i>
        {{ 'Upload file' | translate }}
      </button>
    </li>

    <c8y-refresh-btn></c8y-refresh-btn>
  </c8y-ui-action-bar-set>

  <c8y-help src="/docs/standard-tenant/managing-data/#file-repository"></c8y-help>

  <!-- empty state -->
  <c8y-ui-empty-state
    [icon]="'c8y-archive'"
    [title]="'No files to display.' | translate"
    [subtitle]="'Click below to upload your first file.' | translate"
    ng-if="files.length === 0"
  >
    <button
      class="btn btn-primary"
      title="{{ 'Upload file' | translate }}"
      type="button"
      ng-click="upload()"
    >
      <i c8y-icon="upload"></i>
      {{ 'Upload file' | translate }}
    </button>
  </c8y-ui-empty-state>

  <div
    class="c8y-list__group m-b-24"
    ng-class="{ 'dd-low': (files | filter: vm.filter).length < 10 }"
  >
    <div
      class="page-sticky-header c8y-list__item hidden-xs"
      ng-if="files.length > 0"
    >
      <div class="c8y-list__item__block">
        <div class="c8y-list__item__icon">
          <i class="p-l-24"></i>
        </div>
        <div class="c8y-list__item__body">
          <div class="content-flex-60">
            <div class="col-3">
              {{ 'File name' | translate }}
            </div>
            <div class="col-1"></div>
            <div class="col-3">
              {{ 'Type' | translate }}
            </div>
            <div class="col-1">
              {{ 'Size' | translate }}
            </div>
            <div class="col-2">
              {{ 'Owner' | translate }}
            </div>
            <div class="col-2">
              {{ 'Last update' | translate }}
            </div>
          </div>
        </div>
        <div class="c8y-list__item__actions">
          <div class="c8y-list__item--empty-actions"></div>
        </div>
      </div>
    </div>
    <div ng-repeat="file in files | filter:vm.searchString as filtered">
      <div class="c8y-list__item">
        <div class="c8y-list__item__block">
          <div class="c8y-list__item__icon">
            <i c8y-icon="{{ file.icon }}"></i>
          </div>
          <div class="c8y-list__item__body">
            <div class="content-flex-60">
              <div class="col-3">
                <div
                  class="text-truncate"
                  title="{{ file.name }}"
                >
                  {{ file.name }}
                </div>
              </div>
              <div class="col-1">
                <span ng-if="isImage(file)">
                  <button
                    class="btn btn-default btn-xs visible-xs-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"
                    title="{{ 'Preview file' | translate }}"
                    type="button"
                    ng-click="toggle(file)"
                    uib-popover-template="popoverTemplateUrl"
                    popover-placement="right"
                    popover-append-to-body="true"
                    popover-trigger="'focus'"
                  >
                    <i c8y-icon="search"></i>
                  </button>
                </span>
              </div>
              <div class="col-3">
                <span class="text-label-small visible-xs m-t-8">
                  {{ 'File type' | translate }}
                </span>
                <div
                  class="text-truncate"
                  title="{{ file.type }}"
                >
                  <span>
                    {{ file.type }}
                  </span>
                </div>
              </div>
              <div class="col-1">
                <span class="text-label-small visible-xs m-t-8">
                  {{ 'File size' | translate }}
                </span>
                <span title="{{ file.type }}">
                  {{ size(file) | bytes }}
                </span>
              </div>
              <div
                class="col-2"
                title="{{ 'Owner' | translate }}: {{ file.owner }}"
              >
                <span class="text-label-small visible-xs m-t-8">
                  {{ 'File owner' | translate }}
                </span>
                <div
                  class="text-truncate"
                  title="{{ file.type }}"
                >
                  <span>
                    {{ file.owner }}
                  </span>
                </div>
              </div>
              <div class="col-2">
                <span class="text-label-small visible-xs m-t-8">
                  {{ 'Last update' | translate }}
                </span>
                <span
                  class="text-muted"
                  title="{{ 'Last update' | translate }}"
                >
                  <i c8y-icon="calendar"></i>
                  {{ file.lastUpdated | absoluteDate }}
                </span>
              </div>
            </div>
          </div>
          <div class="c8y-list__item__actions">
            <div
              class="settings pull-right dropdown"
              uib-dropdown
              is-open="menuOpen"
            >
              <button
                class="dropdown-toggle c8y-dropdown"
                title="{{ 'Actions' | translate }}"
                aria-haspopup="true"
                type="button"
                uib-dropdown-toggle
              >
                <i c8y-icon="ellipsis-v"></i>
              </button>
              <ul
                class="dropdown-menu"
                uib-dropdown-menu
              >
                <li>
                  <c8y-download-button
                    binary="file"
                    downloading="file.downloading"
                  ></c8y-download-button>
                </li>
                <li ng-show="!file.downloading">
                  <button
                    title="{{ 'Delete' | translate }}"
                    type="button"
                    ng-disabled="isApplicationBinary(file)"
                    ng-click="onClickDelete(file)"
                  >
                    <i c8y-icon="delete"></i>
                    {{ 'Delete' | translate }}
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- no results empty state -->
  <c8y-ui-empty-state
    [icon]="'search'"
    [title]="'No results to display.' | translate"
    [subtitle]="'Refine your search terms or check your spelling.' | translate"
    ng-if="filtered.length === 0 && vm.searchString.length > 0"
  ></c8y-ui-empty-state>

  <c8y-load-more></c8y-load-more>
</div>
