<nav class="pagination-style-3 overflow-auto my-5" *ngIf="totalItems > 0">
  <ul class="ti-pagination">
    <!-- ปุ่มย้อนกลับ -->
    <li>
      <a aria-label="Previous" class="page-link" href="javascript:void(0);" (click)="changePage(currentPage - 1)">
        <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
      </a>
    </li>

    <!-- แสดงหมายเลขหน้า -->
    <li *ngFor="let item of visiblePages">
      <ng-container *ngIf="item === '...'">
        <a aria-label="More" class="page-link" href="javascript:void(0);">
          <i class="ri-more-line"></i>
        </a>
      </ng-container>
      <ng-container *ngIf="item !== '...'">
        <a class="page-link" href="javascript:void(0);" [class.active]="item === currentPage"
          (click)="changePage(item)">
          {{ item }}
        </a>
      </ng-container>
    </li>

    <!-- ปุ่มถัดไป -->
    <li>
      <a aria-label="Next" class="page-link" href="javascript:void(0);" (click)="changePage(currentPage + 1)">
        <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
      </a>
    </li>

    <!-- ตัวเลือกจำนวนรายการต่อหน้า -->
    <li>
      <select class="ti-form-select" [(ngModel)]="pageSize" (ngModelChange)="onPageSizeChange()">
        <option *ngFor="let size of pageSizes" [ngValue]="size">{{'ItemsPerPage' | translate}}: {{ size }}</option>
      </select>
    </li>
  </ul>

  <ul class="nav-tabs mt-3">
    <span>{{'Show' | translate}} {{ (currentPage - 1) * pageSize + 1 }} {{'To'| translate }} {{ getEndIndex() }}
      {{'From' | translate}} {{ totalItems }} {{'Items' | translate}}</span>
  </ul>
</nav>