<f:if condition="{paginator.numberOfPages} > 1">
    <nav class="pagination-wrap">
        <ul class="pagination">
            <f:if condition="{pagination.previousPageNumber} && {pagination.previousPageNumber} >= {pagination.firstPageNumber}">
                <f:then>
                    <li class="page-item">
                        <a href="{f:uri.action(arguments:{currentPage: 1})}" title="{f:translate(key:'pagination.first')}" class="page-link">
                            <core:icon identifier="actions-view-paging-first" />
                        </a>
                    </li>
                    <li class="page-item">
                        <a href="{f:uri.action(arguments:{currentPage: pagination.previousPageNumber})}" title="{f:translate(key:'pagination.previous')}" class="page-link">
                            <core:icon identifier="actions-view-paging-previous" />
                        </a>
                    </li>
                </f:then>
                <f:else>
                    <li class="page-item disabled">
                        <span class="page-link">
                            <core:icon identifier="empty-empty"/>
                        </span>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link">
                            <core:icon identifier="empty-empty"/>
                        </span>
                    </li>
                </f:else>
            </f:if>
            <li class="page-item">
                <span class="page-link">
                    <f:translate key="pagination.records" /> {pagination.startRecordNumber} - {pagination.endRecordNumber}
                </span>
            </li>
            <li class="page-item">
                <span class="page-link">
                    <f:translate key="pagination.page" />
                    <form style="display:inline;"
                        data-global-event="submit"
                        data-action-navigate="$form=~s/$value/"
                        data-navigate-value="{f:uri.action(arguments:'{currentPage: \'$[value]\'}')}"
                        data-value-selector="input[name='paginator-target-page']">
                        <input
                            min="{pagination.firstPageNumber}"
                            max="{pagination.lastPageNumber}"
                            data-number-of-pages="{paginator.numberOfPages}"
                            name="paginator-target-page"
                            class="form-control form-control-sm paginator-input"
                            size="5"
                            value="{paginator.currentPageNumber}"
                            type="number"
                        />
                    </form>
                    / {pagination.lastPageNumber}
                </span>
            </li>

            <f:if condition="{pagination.nextPageNumber} && {pagination.nextPageNumber} <= {pagination.lastPageNumber}">
                <f:then>
                    <li class="page-item">
                        <a href="{f:uri.action(arguments:{currentPage: pagination.nextPageNumber})}" title="{f:translate(key:'pagination.next')}" class="page-link">
                            <core:icon identifier="actions-view-paging-next" />
                        </a>
                    </li>
                    <li class="page-item">
                        <a href="{f:uri.action(arguments:{currentPage: pagination.lastPageNumber})}" title="{f:translate(key:'pagination.last')}" class="page-link">
                            <core:icon identifier="actions-view-paging-last" />
                        </a>
                    </li>
                </f:then>
                <f:else>
                    <li class="page-item disabled">
                        <span class="page-link">
                            <core:icon identifier="empty-empty"/>
                        </span>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link">
                            <core:icon identifier="empty-empty"/>
                        </span>
                    </li>
                </f:else>
            </f:if>
            <li class="page-item">
                <a href="{f:uri.action(arguments:{currentPage: paginator.currentPageNumber})}" title="{f:translate(key:'pagination.refresh')}" class="page-link">
                    <core:icon identifier="actions-refresh" />
                </a>
            </li>
        </ul>
    </nav>
</f:if>
