<c8y-title>
  {{ title | translate }}
</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    icon="c8y-management"
    [label]="managementTitle | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="title | translate"></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    title="{{ 'Upload files' | translate }}"
    *c8yIfAllowed="['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_CREATE']; allowAny: true"
    (click)="openFileUploadComponent()"
    data-cy="c8y-files-repository--open-file-upload-component"
  >
    <i c8yIcon="upload"></i>
    {{ 'Upload files' | translate }}
  </button>
</c8y-action-bar-item>

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

<div class="content-fullpage border-top border-bottom">
  <c8y-data-grid
    [title]="title"
    [loadMoreItemsLabel]="loadMoreItemsLabel"
    [loadingItemsLabel]="loadingItemsLabel"
    [displayOptions]="displayOptions"
    [columns]="columns"
    [pagination]="pagination"
    [infiniteScroll]="infiniteScroll"
    [serverSideDataCallback]="serverSideDataCallback"
    [actionControls]="actionControls"
    [selectable]="selectable"
    [showSearch]="true"
    [refresh]="refresh"
    [bulkActionControls]="bulkActionControls"
  >
    <c8y-ui-empty-state
      [icon]="stats?.size > 0 ? 'search' : 'c8y-archive'"
      [title]="stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)"
      [subtitle]="stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)"
      *emptyStateContext="let stats"
      [horizontal]="stats?.size > 0"
    >
      <p *ngIf="stats?.size === 0">
        <button
          class="btn btn-primary"
          title="{{ 'Upload file' | translate }}"
          type="button"
          (click)="openFileUploadComponent()"
        >
          <i c8yIcon="plus-circle"></i>
          {{ 'Upload file' | translate }}
        </button>
      </p>
    </c8y-ui-empty-state>

    <c8y-column name="name">
      <ng-container *c8yCellRendererDef="let context">
        <span title="{{ context.value }}">
          <div class="d-flex j-c-between a-i-center">
            {{ context.value }}
            <c8y-file-preview
              class="m-l-auto"
              [mo]="context.item"
            >
              <button
                class="btn btn-emphasis btn-icon"
                [title]="'Preview file' | translate"
                type="button"
                customButton
              >
                <i c8yIcon="search"></i>
              </button>
            </c8y-file-preview>
          </div>
        </span>
      </ng-container>
    </c8y-column>

    <c8y-column name="length">
      <ng-container *c8yCellRendererDef="let context">
        <span title="{{ context.value }} B">
          {{ context.value | bytes }}
        </span>
      </ng-container>
    </c8y-column>

    <c8y-column name="lastUpdated">
      <ng-container *c8yCellRendererDef="let context">
        <span title="{{ context.value | c8yDate }}">
          {{ context.value | c8yDate }}
        </span>
      </ng-container>
    </c8y-column>
  </c8y-data-grid>
</div>