Pagination: Few Pages

{#
	{% include '@partial-pagination' with {
		title: 'Articles Pagination',
		pages: 50,
		current_page: 1,
		focus_target: '.news-list__item'
	} %}
#}

{% if pages > 1 %}
	{% set id = uniqid('pagination') %}
	{% set heading_level = heading_level ?? 2 %}
	{% set heading_tag = 'h' ~ (heading_level) %}

	{% set current_page = current_page|default(1) + 0 %}
	{% set pages = pages|default(1) + 0 %}

	{% set siblings = 2 %}
	{% set start_delta = 3 %}
	{% set end_delta = 3 %}
	{% set left_bound = current_page - siblings %}
	{% set right_bound = current_page + siblings %}

	{% if current_page == 1 %}
		{% set right_bound = current_page + start_delta %}
	{% endif %}
	{% if current_page == pages %}
		{% set left_bound = pages - end_delta %}
	{% endif %}

	<!-- Pagination -->
	<div
		class="pagination"
		data-js-focus-on-load{% if focus_target %}='{ "focusTarget": "{{ focus_target }}", "urlParam": "page" }'{% endif %}
		id="{{ id }}"
	>
		<{{ heading_tag }} class="pagination__title" id="{{ id ~ '__title' }}">
			{{- title|default('Pagination') -}}
		</{{ heading_tag }}>

		<div class="pagination__body">
			<nav
				class="pagination__nav"
				aria-labelledby="{{ id ~ '__title' }}"
			>

				{% set is_prev_disabled = current_page <= 1 %}

				<div class="pagination__control pagination__control--previous">
					{% include '@partial-link' with {
						classes: {
							base: 'pagination__control-link',
							modifiers: is_prev_disabled ? ['disabled'] : []
						},
						id: id ~ '__nav-link-previous',
						title: 'Previous Page',
						url: is_prev_disabled ? null : '?page=' ~ (current_page - 1),
						icon: 'arrow-left',
						attributes: {
							'aria-labelledby': id ~ '__title ' ~ id ~ '__nav-link-previous',
							'rel': 'prev',
							'aria-disabled': is_prev_disabled ? 'true' : null,
							'tabindex': is_prev_disabled ? '-1' : null
						}
					} only %}
				</div>

				<ul class="pagination__nav-list">
					<li class="pagination__nav-item">
						{% include '@partial-link' with {
							classes: {
								base: 'pagination__nav-link',
								modifiers: current_page == 1 ? ['number', 'current'] : ['number']
							},
							title: 1,
							url: '?page=1',
							attributes: current_page == 1 ? {'aria-current': 'page'} : {}
						} only %}
					</li>

					{% if left_bound > 2 %}
						<li
							class="
								pagination__nav-item
								pagination__nav-item--ellipsis
							"
							aria-hidden="true"
						>
							<span class="pagination__ellipsis">
								&hellip;
							</span>
						</li>
					{% endif %}

					{% if pages > 2 %}
						{% for i in 2..(pages - 1) %}
							{% if i >= left_bound and i <= right_bound %}

								{% set is_desktop_only = true %}

								{% set distance = (current_page - i)|abs %}

								{% if distance < 2 %}
									{% set is_desktop_only = false %}
								{% endif %}

								{% if (current_page == 1 and i <= 3) or (current_page == pages and i >= pages - 2) %}
									{% set is_desktop_only = false %}
								{% endif %}

								<li
									class="
										pagination__nav-item
										{{ is_desktop_only ? 'pagination__nav-item--desktop-only' }}
									"
								>
									{% include '@partial-link' with {
										classes: {
											base: 'pagination__nav-link',
											modifiers: current_page == i ? ['number', 'current'] : ['number']
										},
										title: i,
										url: '?page=' ~ i,
										attributes: current_page == i ? {'aria-current': 'page'} : {}
									} only %}
								</li>
							{% endif %}
						{% endfor %}
					{% endif %}

					{% if right_bound < pages - 1 %}
						<li
							class="
								pagination__nav-item
								pagination__nav-item--ellipsis
							"
							aria-hidden="true"
						>
							<span class="pagination__ellipsis">
								&hellip;
							</span>
						</li>
					{% endif %}

					{% if pages > 1 %}
						<li class="pagination__nav-item">
							{% include '@partial-link' with {
								classes: {
									base: 'pagination__nav-link',
									modifiers: current_page == pages ? ['number', 'current'] : ['number']
								},
								title: pages,
								url: '?page=' ~ pages,
								attributes: current_page == pages ? {'aria-current': 'page'} : {}
							} only %}
						</li>
					{% endif %}
				</ul>

				{% set is_next_disabled = current_page >= pages %}

				<div class="pagination__control pagination__control--next">
					{% include '@partial-link' with {
						classes: {
							base: 'pagination__control-link',
							modifiers: is_next_disabled ? ['disabled'] : []
						},
						id: id ~ '__nav-link-next',
						title: 'Next Page',
						url: is_next_disabled ? null : '?page=' ~ (current_page + 1),
						icon: 'arrow-right',
						attributes: {
							'aria-labelledby': id ~ '__title ' ~ id ~ '__nav-link-next',
							'rel': 'next',
							'aria-disabled': is_next_disabled ? 'true' : null,
							'tabindex': is_next_disabled ? '-1' : null
						}
					} only %}
				</div>

			</nav>
		</div>
	</div>
	<!-- END: Pagination -->
{% endif %}