<div class="text-center m-t-16">
  <button
    class="btn-default btn btn-block m-b-16 classForObserver"
    ng-class="{ 'btn-pending': paging.loading }"
    type="button"
    uib-tooltip="{{ getLoadMoreTooltip() | translate }}"
    tooltip-popup-delay="500"
    ng-click="paging.loading? false : loadNext()"
    ng-show="shouldShowLoadMore"
  >
    <i c8y-icon="repeat" ng-class="{ 'icon-spin': paging.loading }"></i>
    <span ng-if="paging.loading">{{ 'Loading…' | translate }}</span>
    <span ng-if="!paging.loading">{{ 'Load more' | translate }}</span>
    <span ng-hide="paging.blind || hidePageSize">{{ paging.statistics.pageSize }}</span>
    <span ng-hide="1" translate>({{ paging.more }} left)</span>
  </button>

  <div
    class="dropdown dropup"
    ng-show="shouldShowLoadMore && !paging.blind && _pageSizes"
    is-open="c8yLoadMore.isOpen"
    uib-dropdown
  >
    <button
      class="btn btn-default dropdown-toggle"
      type="button"
      uib-dropdown-toggle
      ng-show="!paging.blind && _pageSizes"
      aria-haspopup="true"
    >
      {{ 'Page size' | translate }}
      <span class="caret"></span>
      <span class="sr-only">{{ 'Toggle dropdown' | translate }}</span>
    </button>
    <ul
      class="dropdown-menu"
      role="menu"
      uib-dropdown-menu
      ng-show="!paging.blind && paging.statistics.pageSize != 500"
    >
      <li ng-repeat="pageSize in _pageSizes">
        <a href="" ng-click="loadNext(pageSize)" translate>Change page size to {{ pageSize }}</a>
      </li>
    </ul>
  </div>
</div>
