#if( $pickerhits && $pickerhits.getTotalPages() >  1  )
    #set($module = $content.module)
    #set($resultsPage = "$home$apphome/components/assetpicker/search/results.html")
    #set($resultsPage = "$resultsPage?hitssessionid=$pickerhits.sessionId&searchtype=$pickerhits.getSearcher().getSearchType()&hitsperpage=$!hits.hitsPerPage&oemaxlevel=1")
    #set($resultsPage = "$resultsPage&page")
    #set($thispage = $pickerhits.getPage())
    #set($targetdiv = "#pickerresultdiv")

    <div id="assetpickerpages" class="pages d-flex justify-content-center mt-3">
        <ul class="pagination pagination-sm">
            <!-- ✅ Previous Page Button -->
            #if( $pickerhits.prevPage() )
                <li class="page-item">
                    <a class="page-link" data-ajax-get data-targetdivinner="$targetdiv"
                       href="$resultsPage=$pickerhits.prevPage()"
                       title="Previous (alt p enter)" accesskey="p">
                        <span class="bi  bi-chevron-left"></span>
                    </a>
                </li>
            #end

            <!-- ✅ First Page & Ellipsis -->
            #set( $befores = $pickerhits.linksBefore() )					
            #if($befores.size() != 0)
                #if($befores.get(0) > 1)
                    <li class="page-item">
                        <a class="page-link" data-ajax-get data-targetdivinner="$targetdiv" href="$resultsPage=1">1</a>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                #end
            #end

            <!-- ✅ Page Numbers Before Current -->
            #foreach( $before in $befores )
                <li class="page-item">
                    <a class="page-link" data-ajax-get data-targetdivinner="$targetdiv" href="$resultsPage=$before">$before</a>
                </li>		
            #end

            <!-- ✅ Current Page (Active) -->
            <li class="page-item active">
                <span class="page-link">$!thispage</span>
            </li>

            <!-- ✅ Page Numbers After Current -->
            #set( $afters = $pickerhits.linksAfter() )
            #foreach( $after in $afters )
                <li class="page-item">
                    <a class="page-link" data-ajax-get data-targetdivinner="$targetdiv" href="$resultsPage=$after">$after</a>
                </li>		
            #end

            <!-- ✅ Last Page & Ellipsis -->
            #set($size = ${afters.size()} - 1)
            #if($size > 0)
                #if ($afters.get($size) < $pickerhits.getTotalPages() )
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                    <li class="page-item">
                        <a class="page-link" data-ajax-get data-targetdivinner="$targetdiv"
                           href="$resultsPage=$pickerhits.getTotalPages()">
                            $pickerhits.getTotalPages()
                        </a>
                    </li>	
                #end
            #end

            <!-- ✅ Next Page Button -->
            #if( $pickerhits.nextPage() )
                <li class="page-item">
                    <a id="next" class="page-link" data-ajax-get data-targetdivinner="$targetdiv"
                       href="$resultsPage=$pickerhits.nextPage()"
                       title="Next (alt n enter)" accesskey="n">
                        <span class="bi  bi-chevron-right"></span>
                    </a>
                </li>
            #end
        </ul>
    </div>
#end