pager

// src/components/patterns/pager/pager.twig

{{ attach_library("circle_dot/pattern-pager") }}

{% set variant = variant|default('pages') %}
{% set light = light|default(false) %}
{% set base_url = base_url|default('#') %}
{% set prev_label = prev_label|default('Previous page') %}
{% set next_label = next_label|default('Next page') %}
{% set page_label = page_label|default('Go to page') %}

{% set is_first_page = (start_page_in_0) ? current_page == 0 : current_page == 1 %}
{% set is_last_page = (start_page_in_0) ? current_page == total_pages - 1 : current_page == total_pages %}

<nav
	class="Pager Pager--{{ variant }}{% if light %} Pager--light{% endif %}"
	aria-label="Pagination navigation"
	data-current-page="{{ current_page }}"
	data-total-pages="{{ total_pages }}"
>
	{% if variant == 'pages' %}
		<div class="Pager-divider"></div>
	{% endif %}

	<div class="Pager-inner">
		{# Previous Button #}
		<a
			href="{{ is_first_page ? '#' : base_url ~ (current_page - 1) }}"
			class="Pager-button Pager-button--prev{% if is_first_page %} Pager-button--disabled{% endif %}"
			aria-label="{{ prev_label }}"
			{% if is_first_page %}aria-disabled="true" tabindex="-1"{% endif %}
		>
			<span class="Pager-buttonIcon Pager-buttonIcon--prev">
				<svg width="24" height="24" viewBox="0 -960 960 960" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" fill="currentColor"/>
				</svg>
			</span>
		</a>

		{# Variant-specific content #}
		{% if variant == 'dots' %}
			{# Dots variant - Position Indicator #}
			{% include "@patterns/pager/position-indicator/position-indicator.twig" with {
				position: current_page,
				total: total_pages,
				light: light,
			} only %}

		{% elseif variant == 'digits' %}
			{# Digits variant - "1 / 20" format #}
			<div class="Pager-digits">
				<span class="Pager-currentPage">{{ current_page }}</span>
				<span class="Pager-separator">/</span>
				<span class="Pager-totalPages">{{ total_pages }}</span>
			</div>

		{% elseif variant == 'pages' %}
			{# Pages variant - Show page numbers #}
			<div class="Pager-pages">
				{% set starting = start_page_in_0 ? 0 : 1 %}
				{% set end = start_page_in_0 ? total_pages - 1 : total_pages %}

				{% for page_num in starting..end %}
					{% set is_current = page_num == current_page %}
					<a
						href="{{ is_current ? '#' : base_url ~ page_num }}"
						class="Pager-pageButton{% if is_current %} Pager-pageButton--current{% endif %}"
						{% if is_current %}
							aria-current="page"
							aria-label="Page {{ page_num }}, current page"
						{% else %}
							aria-label="{{ page_label }} {{ page_num }}"
						{% endif %}
					>
						{{ start_page_in_0 ? page_num + 1 : page_num }}
					</a>
				{% endfor %}
			</div>
		{% endif %}

		{# Next Button #}
		<a
			href="{{ is_last_page ? '#' : base_url ~ (current_page + 1) }}"
			class="Pager-button Pager-button--next{% if is_last_page %} Pager-button--disabled{% endif %}"
			aria-label="{{ next_label }}"
			{% if is_last_page %}aria-disabled="true" tabindex="-1"{% endif %}
		>
			<span class="Pager-buttonIcon Pager-buttonIcon--next">
				<svg width="24" height="24" viewBox="0 -960 960 960" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z" fill="currentColor"/>
				</svg>
			</span>
		</a>
	</div>
</nav>