<c8y-title>
  {{ 'Software repository' | translate }}
</c8y-title>

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

<c8y-help src="/users-guide/device-management/#software-repo"></c8y-help>

<div class="content-fullpage">
  <c8y-data-grid
    [title]="'Software' | translate"
    [refresh]="refresh$"
    [pagination]="pagination"
    [columns]="columns"
    [actionControls]="actionControls"
    [infiniteScroll]="'auto'"
    [serverSideDataCallback]="serverSideDataCallback"
  >
    <div class="c8y-empty-state">
      <ng-container *ngIf="!sizeRequestDone">
        <c8y-loading></c8y-loading>
      </ng-container>
      <ng-container *ngIf="sizeRequestDone">
        <ng-container *ngIf="(sizeRequest | async) === 0; else noResults">
          <div class="text-center">
            <h1 class="c8y-icon-duocolor" c8yIcon="c8y-tools"></h1>
            <h3 translate>No software to display.</h3>
            <p translate>Add a new software by clicking below.</p>
            <p>
              <button
                class="btn btn-primary"
                title="{{ 'Add software' | translate }}"
                (click)="addSoftware()"
                translate
              >
                Add software
              </button>
            </p>
          </div>
        </ng-container>
        <ng-template #noResults>
          <h1 c8yIcon="search"></h1>
          <div>
            <p>
              <strong>{{ 'No results to display.' | translate }}</strong>
            </p>
            <small>{{ 'Refine your search terms or check your spelling.' | translate }}</small>
          </div>
        </ng-template>
      </ng-container>
    </div>
    <ng-container *ngFor="let column of columns; trackBy: trackByName">
      <c8y-column [name]="column.name"></c8y-column>
    </ng-container>
  </c8y-data-grid>
</div>