{% extends 'partials/layout-vertical.html.twig' %}

{% block title %}Pagination
{% endblock %}

{% block pagetitle %}
	{{ include('partials/page-title.html.twig', { sub_title: 'Base UI', page_title: 'Pagination' }) }}
{% endblock %}

{% block body %}
	<div class="row">
		<div class="col-xl-6">
			<div class="card">
				<div class="card-body">
					<h4 class="header-title">Default Pagination</h4>
					<p class="text-muted fs-14">Simple pagination inspired by Rdio, great for apps and search results.</p>

					<nav>
						<ul class="pagination mb-0">
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);" aria-label="Previous">
									<span aria-hidden="true">&laquo;</span>
								</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">1</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">2</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">3</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">4</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">5</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);" aria-label="Next">
									<span aria-hidden="true">&raquo;</span>
								</a>
							</li>
						</ul>
					</nav>
				</div>
				<!-- end card-body -->
			</div>
			<!-- end card-->

			<div class="card">
				<div class="card-body">
					<h4 class="header-title">Disabled and active states</h4>
					<p class="text-muted fs-14">Pagination links are customizable for different circumstances. Use
						<code>.disabled</code>
						for links that appear un-clickable and
						<code>.active</code>
						to indicate the current page.</p>

					<nav aria-label="...">
						<ul class="pagination mb-0">
							<li class="page-item disabled">
								<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="#">1</a>
							</li>
							<li class="page-item active" aria-current="page">
								<a class="page-link" href="#">2</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="#">3</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="#">Next</a>
							</li>
						</ul>
					</nav>
				</div>
				<!-- end card-body -->
			</div>
			<!-- end card-->

			<div class="card">
				<div class="card-body">
					<h4 class="header-title">Alignment</h4>
					<p class="text-muted fs-14">Change the alignment of pagination components with flexbox utilities.</p>

					<nav aria-label="Page navigation example">
						<ul class="pagination justify-content-center">
							<li class="page-item disabled">
								<a class="page-link" href="javascript: void(0);" tabindex="-1">Previous</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">1</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">2</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">3</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">Next</a>
							</li>
						</ul>
					</nav>

					<nav aria-label="Page navigation example">
						<ul class="pagination justify-content-end">
							<li class="page-item disabled">
								<a class="page-link" href="javascript: void(0);" tabindex="-1">Previous</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">1</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">2</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">3</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">Next</a>
							</li>
						</ul>
					</nav>
				</div>
				<!-- end card-body -->
			</div>
			<!-- end card-->
		</div>
		<!-- end col -->

		<div class="col-xl-6">
			<div class="card">
				<div class="card-body">
					<h4 class="header-title">Rounded Pagination</h4>
					<p class="text-muted fs-14">Add
						<code>
							.pagination-rounded</code>
						for rounded pagination.</p>

					<nav>
						<ul class="pagination pagination-rounded mb-0">
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);" aria-label="Previous">
									<span aria-hidden="true">&laquo;</span>
								</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">1</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">2</a>
							</li>
							<li class="page-item active">
								<a class="page-link" href="javascript: void(0);">3</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">4</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">5</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);" aria-label="Next">
									<span aria-hidden="true">&raquo;</span>
								</a>
							</li>
						</ul>
					</nav>
				</div>
				<!-- end card-body -->
			</div>
			<!-- end card-->

			<div class="card">
				<div class="card-body">
					<h4 class="header-title">Sizing</h4>
					<p class="text-muted fs-14">Add
						<code>
							.pagination-lg</code>
						or
						<code>
							.pagination-sm</code>
						for additional sizes.</p>

					<nav>
						<ul class="pagination pagination-lg">
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);" aria-label="Previous">
									<span aria-hidden="true">&laquo;</span>
								</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">1</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">2</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">3</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);" aria-label="Next">
									<span aria-hidden="true">&raquo;</span>
								</a>
							</li>
						</ul>
					</nav>

					<nav>
						<ul class="pagination pagination-sm mb-0">
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);" aria-label="Previous">
									<span aria-hidden="true">&laquo;</span>
								</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">1</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">2</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);">3</a>
							</li>
							<li class="page-item">
								<a class="page-link" href="javascript: void(0);" aria-label="Next">
									<span aria-hidden="true">&raquo;</span>
								</a>
							</li>
						</ul>
					</nav>
				</div>
				<!-- end card-body -->
			</div>
			<!-- end card-->
		</div>
		<!-- end col -->
	</div>
	<!-- end row -->

{% endblock %}