<c8y-title>
  <span translate> Configuration snapshots repository </span>&nbsp;
  <small *ngIf="(configurations$ | async)?.paging.totalPages === 1 && !filterTerm">
    {{ (configurations$ | async).data.length }}
    <span translate> snapshots </span>
  </small>
  <small
    *ngIf="(configurations$ | async)?.paging.totalPages > 1 && !filterTerm"
    [tooltip]="'More data available. Scroll to the bottom of the list to load it.' | translate"
    container="body"
  >
    {{ (configurations$ | async).paging.pageSize }}+
    <span translate>snapshots</span>
  </small>
  <small *ngIf="filterTerm">
    <span translate> Search results for </span>&nbsp;" {{ this.filterTerm }}"
  </small>
</c8y-title>

<c8y-action-bar-item itemClass="navbar-form">
  <c8y-filter [icon]="'search'" (onSearch)="setPipe($event)"></c8y-filter>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'right'">
  <button class="btn btn-link" title="{{ 'Add configuration snapshot' | translate }}" (click)="add()">
    <i c8yIcon="plus-circle"></i>
    {{ 'Add configuration snapshot' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'right'">
  <button class="btn btn-link" title="{{ 'Reload' | translate }}" (click)="loadConfigurations()">
    <i [ngClass]="{ 'icon-spin': reloading }" c8yIcon="refresh"></i>
    {{ 'Reload' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-help src="/users-guide/device-management/#configuration-repository"></c8y-help>

<!-- empty state -->
<div
  class="c8y-empty-state text-center"
  *ngIf="!filterTerm && (configurations$ | async)?.data.length === 0"
>
  <h1 c8yIcon="gears"></h1>
  <h3 translate>There are no configuration snapshots defined</h3>
  <p translate>Add a configuration snapshot first.</p>
  <div>
    <button (click)="add()" class="btn btn-primary" translate>Add configuration snapshot</button>
  </div>
  <p c8y-guide-docs>
    <small translate ngNonBindable>
      Find out more in the
      <a c8y-guide-href="users-guide/device-management/#configuration-repository">
        User guide`KEEP_ORIGINAL` </a
      >.
    </small>
  </p>
</div>

<!-- no results empty state -->
<div
  class="c8y-empty-state"
  *ngIf="shouldShowEmptyState() && (configurations$ | async)?.data.length > 0"
>
  <h1 class="c8y-icon-duocolor" c8yIcon="search"></h1>
  <h3 translate>No results to display.</h3>
  <p translate>Refine your search terms or check your spelling.</p>
</div>

<c8y-list-group
  class="m-b-24"
  *ngIf="(configurations$ | async)?.data.length > 0"
  [ngClass]="{
    'dd-low': data && data.length ? data.length < 10 : (configurations$ | async)?.data.length < 10
  }"
>
  <c8y-li
    [emptyActions]="true"
    class="page-sticky-header hidden-xs"
    *ngIf="!shouldShowEmptyState()"
  >
    <c8y-li-icon>
      <i class="p-l-24"></i>
    </c8y-li-icon>
    <c8y-li-body class="content-flex-60">
      <div class="col-2">
        {{ 'Configuration' | translate }}
      </div>
      <div class="col-3">
        {{ 'Description' | translate }}
      </div>
      <div class="col-3">
        {{ 'File' | translate }}
      </div>
      <div class="col-2">
        {{ 'Device type' | translate }}
      </div>
      <div class="col-2">
        {{ 'Configuration type' | translate }}
      </div>
    </c8y-li-body>
  </c8y-li>

  <c8y-li *c8yFor="let configuration of configurations$; pipe: filterPipe">
    <c8y-li-icon icon="gears"></c8y-li-icon>
    <div class="content-flex-60">
      <button class="btn-clean col-2" (click)="edit(configuration)">
        <span class="text-truncate" title="{{ configuration.name || '-' }}">
          <c8y-highlight
            [text]="configuration.name || '-'"
            elementClass="text-info"
            [pattern]="filterTerm"
          ></c8y-highlight>
        </span>
      </button>
      <div class="col-3">
        <div class="text-label-small visible-xs-inline m-r-4">
          {{ 'Description' | translate }}
        </div>
        <small
          class="text-truncate"
          *ngIf="configuration.description; else emptyDescription"
          title="configuration.description"
        >
          <c8y-highlight
            [text]="configuration.description || '-'"
            elementClass="text-info"
            [pattern]="filterTerm"
          >
          </c8y-highlight>
        </small>
      </div>
      <div class="col-3">
        <span class="text-truncate">
          <span class="text-label-small m-r-4 visible-xs-inline" translate> File </span>
          <small
            *ngIf="isBinaryFile(configuration); else noFile"
            title="{{ getBinaryName(configuration) | async }}"
          >
            {{ getBinaryName(configuration) | async }}
          </small>
          <ng-template #noFile>
            <small title="{{ configuration.url }}">
              {{ configuration.url }}
            </small>
          </ng-template>
        </span>
      </div>
      <div class="col-2">
        <div
          class="text-truncate"
          title="{{ 'Device type' | translate }}: {{ configuration.deviceType || '-' }}"
        >
          <span class="text-label-small visible-xs-inline m-r-4" translate> Device type </span>
          <span *ngIf="configuration.deviceType; else emptyText">
            <c8y-highlight
              [text]="configuration.deviceType || '-'"
              elementClass="text-info"
              [pattern]="filterTerm"
            >
            </c8y-highlight>
          </span>
        </div>
      </div>
      <div class="col-2">
        <div class="text-truncate" title="{{ configuration.configurationType }}">
          <span class="label label-primary" *ngIf="configuration.configurationType; else emptyText">
            <c8y-highlight
              [text]="configuration.configurationType"
              elementClass="text-info"
              [pattern]="filterTerm"
            >
            </c8y-highlight>
          </span>
        </div>
      </div>
    </div>
    <c8y-li-action (click)="edit(configuration)" icon="pencil" label="{{ 'Edit' | translate }}">
    </c8y-li-action>
    <c8y-li-action
      (click)="delete(configuration)"
      icon="trash-o"
      label="{{ 'Delete' | translate }}"
    >
    </c8y-li-action>
    <c8y-li-action
      *ngIf="isBinaryFile(configuration)"
      (click)="download(configuration)"
      icon="download"
      label="{{ 'Download' | translate }}"
    >
    </c8y-li-action>
    <ng-template #emptyText>
      <small class="text-muted">
        <em>{{ 'Undefined' | translate }}</em>
      </small>
    </ng-template>
    <ng-template #emptyDescription>
      <small class="text-muted">
        <em>{{ 'No description' | translate }}</em>
      </small>
    </ng-template>
  </c8y-li>
</c8y-list-group>