{% if pageInfo.totalPages > 1 %}

	{% set maxpages = 7 %}

	{% set currentClass = 'pagination__item--current' %}

	{% set pagediff = (pageInfo.totalPages - pageInfo.currentPage) + 1 %}

	{% set prevButtonContent %}
		<svg class="pagination__icon  icon  icon-arrow-left"><use xlink:href="#icon-arrow-left"></use></svg>
		<span class="pagination__title">Previous</span>
	{% endset %}

	{% set nextButtonContent %}
		<span class="pagination__title">Next</span>
		<svg class="pagination__icon  icon  icon-arrow-right"><use xlink:href="#icon-arrow-right"></use></svg>
	{% endset %}

	<nav class="pagination" role="navigation" aria-label="Pagination">

		<div class="{{ pageInfo.currentPage == 1 ? currentClass }}">
			{% if pageInfo.currentPage != 1 %}
				<a href="{{ pageInfo.prevUrl }}" class="pagination__arrowed pagination__link">{{ prevButtonContent }}</a>
			{% else %}
				<div class="pagination__arrowed pagination__link pagination__link--disabled">{{ prevButtonContent }}</div>
			{% endif %}
		</div>

		{# This shows on larger screens #}
		<ul class="pagination__list">

			{% spaceless %}

			{% if pageInfo.currentPage > pageInfo.totalPages - 3 %}

				{% for page, url in pageInfo.getPrevUrls(maxpages - pagediff) %}
					<li class="pagination__item">
						<a href="{{ url }}" class="pagination__link" aria-label="Page {{ page }}">{{ page }}</a>
					</li>
				{% endfor %}

			{% else %}

				{% for page, url in pageInfo.getPrevUrls(3) %}
					<li class="pagination__item">
						<a href="{{ url }}" class="pagination__link" aria-label="Page {{ page }}">{{ page }}</a>
					</li>
				{% endfor %}

			{% endif %}

			<li class="pagination__item {{ currentClass }}">
				<div class="pagination__link pagination__link--current" aria-label="Page {{ pageInfo.currentPage }}">{{ pageInfo.currentPage }}</div>
			</li>

			{% if pageInfo.currentPage <= 3 %}

				{% for page, url in pageInfo.getNextUrls(maxpages - pageInfo.currentPage) %}
					<li class="pagination__item">
						<a href="{{ url }}" class="pagination__link" aria-label="Page {{ page }}">{{ page }}</a>
					</li>
				{% endfor %}

			{% else %}

				{% for page, url in pageInfo.getNextUrls(3) %}
					<li class="pagination__item">
						<a href="{{ url }}" class="pagination__link" aria-label="Page {{ page }}">{{ page }}</a>
					</li>
				{% endfor %}

			{% endif %}

			{% endspaceless %}
		</ul>

		{# This shows on smaller screens #}
		<div class="pagination__jump">
			<span class="pagination__mobile__label">Jump to page</span>
			<select class="" onchange="if (this.value) window.location.href=this.value">
				{% for i in range(1, pageInfo.totalPages) %}
					<option value="{{ pageInfo.getPageUrl( i ) }}"{% if i == pageInfo.currentPage %} selected="selected"{% endif %}>{{ i }}</option>
				{% endfor %}
			</select>
		</div>

		<div class="{{ pageInfo.currentPage == pageInfo.totalPages ? currentClass }}">
			{% if pageInfo.currentPage != pageInfo.totalPages %}
				<a href="{{ pageInfo.nextUrl }}" class="pagination__arrowed pagination__link">{{ nextButtonContent }}</a>
			{% else %}
				<div class="pagination__arrowed pagination__link pagination__link--disabled">{{ nextButtonContent }}</div>
			{% endif %}
		</div>

	</nav>

{% endif %}