<div class="pagination-footer d-flex space-between items-center">
    <div class="d-flex space-between items-center ">
        <div class="d-flex pr-2 page-size-container">
            <label for="itemsPerPage" class="mg-0 mr-2" translate>Elements per page:</label>
            <select
                id="itemsPerPage"
                class="mb-0"
                style="max-width: 20px"
                ng-model="PageSize"
                ng-options="size for size in ItemsPerPageValues"
            ></select>
        </div>
        <span
            class="pl-4"
            translate
            translate-params-from="From"
            translate-params-to="To"
            translate-params-total="TotalItems"
        >Elements {{from}} to {{to}} of {{total}}</span>
    </div>
    <div class="pagination-actions d-flex items-center justify-end pr-4">
        <button
            type="button"
            class="ekup-icon-button"
            ng-click="ToFirstPage()"
            ng-disabled="1 > CurrentPage - 1"
        >
            <i class="ic-chevrons-left"></i>
        </button>
        <button
            type="button"
            class="ekup-icon-button mr-1"
            ng-click="PreviousPage()"
            ng-disabled="1 > CurrentPage - 1"
        >
            <i class="ic-chevron-left"></i>
        </button>
        <span
            translate
            translate-params-current-page="CurrentPage"
            translate-params-total-pages="TotalPages"
        >Page {{currentPage}} of {{totalPages}}</span>
        <button
            type="button"
            class="ekup-icon-button ml-1"
            ng-click="NextPage()"
            ng-disabled="CurrentPage === TotalPages"
        >
            <i class="ic-chevron-right"></i>
        </button>
        <button
            type="button"
            class="ekup-icon-button"
            ng-click="ToLastPage()"
            ng-disabled="CurrentPage === TotalPages"
        >
            <i class="ic-chevrons-right"></i>
        </button>
    </div>
</div>