<button
  class="btn btn-default btn-block text-center"
  type="button"
  title="{{ 'Load more' | translate }}"
  [ngClass]="{ 'btn-pending': isLoading }"
  [style.visibility]="hidden ? 'hidden' : 'visible'"
  [style.height]="hidden ? '1px' : null"
  (click)="loadMore($event)"
  *ngIf="hasMore && !(loadingTemplate && isLoading)"
>
  <ng-container *ngIf="!isLoading">
    <span *ngIf="loadNextLabel; else loadPage" [innerHTML]="loadNextLabel | translate"></span>
    <ng-template #loadPage>
      <span translate ngNonBindable [translateParams]="{ pageNo: paging.currentPage + 1 }">
        Load page {{ pageNo }}
      </span>
    </ng-template>
  </ng-container>
  <ng-container *ngIf="isLoading">
    <span *ngIf="loadingLabel; else loading" [innerHTML]="loadingLabel | translate"></span>
    <ng-template #loading>
      <span translate ngNonBindable [translateParams]="{ pageNo: paging.currentPage + 1 }">
        Page {{ pageNo }} is loading…
      </span>
    </ng-template>
  </ng-container>
</button>

<ng-container *ngIf="hasNoMoreData && !hideNoMoreDataHint && !isLoading">
  <ng-container *ngTemplateOutlet="noMoreDataHint || finishHint"></ng-container>
</ng-container>

<ng-template #finishHint>
  <div class="legend form-block center last-record" title="{{ 'Last record' | translate }}">
    <i [c8yIcon]="'circle'"></i>
  </div>
</ng-template>

<ng-container *ngIf="loadingTemplate && isLoading">
  <ng-container *ngTemplateOutlet="loadingTemplate"></ng-container>
</ng-container>