<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"
    (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>

<!-- 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 class="page-sticky-header c8y-list__item--empty-actions 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"
        >
          {{ configuration.description }}
        </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>