[TASK] Update pagination to bootstrap5

Resources/Private/Partials/Backend/Pagination.html

@@ -5,32 +5,32 @@
 	<ul class="pagination pagination-block">
 		<f:if condition="{pagination.previousPageNumber} && {pagination.previousPageNumber} >= {pagination.firstPageNumber}">
 			<f:then>
-				<li>
-					<a href="{f:uri.action(action:actionName, arguments:{currentPage: 1})}" title="{f:translate(key:'widget.pagination.first')}">
+				<li class="page-item">
+					<a href="{f:uri.action(action:actionName, arguments:{currentPage: 1})}" title="{f:translate(key:'widget.pagination.first')}" class="page-link">
 						<core:icon identifier="actions-view-paging-first" />
 					</a>
 				</li>
-				<li>
-					<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.previousPageNumber})}" title="{f:translate(key:'widget.pagination.previous')}">
+				<li class="page-item">
+					<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.previousPageNumber})}" title="{f:translate(key:'widget.pagination.previous')}" class="page-link">
 						<core:icon identifier="actions-view-paging-previous" />
 					</a>
 				</li>
 			</f:then>
 			<f:else>
-				<li class="disabled">
-					<span>
+				<li class="page-item disabled">
+					<span class="page-link">
 						<core:icon identifier="actions-view-paging-first" />
 					</span>
 				</li>
-				<li class="disabled">
-					<span>
+				<li class="page-item disabled">
+					<span class="page-link">
 						<core:icon identifier="actions-view-paging-previous" />
 					</span>
 				</li>
 			</f:else>
 		</f:if>
-		<li>
-			<span>
+		<li class="page-item">
+			<span class="page-link">
 				<f:if condition="{recordsLabel}">
 					<f:then>
 						{recordsLabel}
@@ -42,8 +42,8 @@
 				{pagination.startRecordNumber} - {pagination.endRecordNumber} / {paginator.totalItems}
 			</span>
 		</li>
-		<li>
-			<span>
+		<li class="page-item">
+			<span class="page-link">
 				<f:translate key="widget.pagination.page" />
 				<form id="paginator-form-{position}" onsubmit="goToPage{position}(this); return false;" style="display:inline;">
 				<script type="text/javascript">
@@ -70,32 +70,32 @@
 		</li>
 		<f:if condition="{pagination.nextPageNumber} && {pagination.nextPageNumber} <= {pagination.lastPageNumber}">
 			<f:then>
-				<li>
-					<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.nextPageNumber})}" title="{f:translate(key:'widget.pagination.next')}">
+				<li class="page-item">
+					<a class="page-link" href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.nextPageNumber})}" title="{f:translate(key:'widget.pagination.next')}">
 						<core:icon identifier="actions-view-paging-next" />
 					</a>
 				</li>
-				<li>
-					<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.lastPageNumber})}" title="{f:translate(key:'widget.pagination.last')}">
+				<li class="page-item">
+					<a class="page-link" href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.lastPageNumber})}" title="{f:translate(key:'widget.pagination.last')}">
 						<core:icon identifier="actions-view-paging-last" />
 					</a>
 				</li>
 			</f:then>
 			<f:else>
-				<li class="disabled">
-					<span>
+				<li class="page-item disabled">
+					<span class="page-link">
 						<core:icon identifier="actions-view-paging-next" />
 					</span>
 				</li>
-				<li class="disabled">
-					<span>
+				<li class="page-item disabled">
+					<span class="page-link">
 						<core:icon identifier="actions-view-paging-last" />
 					</span>
 				</li>
 			</f:else>
 		</f:if>
-		<li>
-			<a href="{f:uri.action(action:actionName, arguments:{currentPage: currentPage})}" title="{f:translate(key:'widget.pagination.refresh')}">
+		<li class="page-item">
+			<a class="page-link" href="{f:uri.action(action:actionName, arguments:{currentPage: currentPage})}" title="{f:translate(key:'widget.pagination.refresh')}">
 				<core:icon identifier="actions-refresh" />
 			</a>
 		</li>