<div id="pagination" data-pagination>
	<div data-v-if="pagecount > 1">

		<form method="get" action="?" class="d-inline-block" data-current-url>
			<span class="pages" data-count>100</span> items, page
				<input type="text" name="page" class="form-control d-inline-block w-auto pages" size="1" data-current-page>
			of <span class="pages" data-pagecount></span> 
		</form>

		<nav class="d-inline-block">
			<ul class="pagination">
			
				<li class="page-item pager-first" data-first>
					<a class="page-link" title="First page" href="#" data-page-url>
						<i aria-hidden="true" class="icon-arrow-back-outline"></i>
						<span class="sr-only">First</span>
					</a>
				</li>
			
				<li class="page-item me-2 prev" data-prev>
					<a class="page-link" href="#" aria-label="Previous"  title="Previous page" data-page-url>
						<i aria-hidden="true" class="icon-chevron-back-outline"></i>
						<span class="sr-only">Previous</span>
					</a>
				</li>
				
				
				
				<li class="page-item" data-page><a class="page-link" href="#" data-page-no data-page-url>1</a></li>
				<li class="page-item" data-page><a class="page-link" href="#" data-page-no data-page-url>2</a></li>
				<li class="page-item" data-page><a class="page-link" href="#" data-page-no data-page-url>3</a></li>
				<li class="page-item" data-page><a class="page-link" href="#" data-page-no data-page-url>4</a></li>
				<li class="page-item" data-page><a class="page-link" href="#" data-page-no data-page-url>5</a></li>
				
				<li class="page-item ms-2 pager-next" data-next>
					<a class="page-link" href="#" aria-label="Next" title="Next page" data-page-url >
						<i aria-hidden="true" class="icon-chevron-forward-outline"></i>
						<span class="sr-only">Next</span>
					</a>
				</li>

				<li class="page-item pager-last" data-last><a class="page-link" title="Last page" href="#" data-page-url>
					<i aria-hidden="true" class="icon-arrow-forward-outline"></i>
						<span class="sr-only">Last</span>
				</a></li>

			</ul>
		</nav>
	</div>
</div>

