{% if BASE_URL and TOTAL_PAGES > 6 %}
<li class="iz-pagination__jump">
	<button
		type="button"
		class="iz-pagination-trigger"
		aria-expanded="false"
		aria-controls="iz-pagejump"
	>
		{{ PAGE_NUMBER }}
	</button>
</li>

<li
	id="iz-pagejump"
	class="iz-pagination-panel"
	hidden
	role="dialog"
	aria-label="{{ L_JUMP_TO_PAGE_NUMBER }}"
>
	<div class="iz-pagination-panel__header">
		{{ L_JUMP_TO_PAGE_NUMBER }}
	</div>

	<div class="iz-pagination-panel__body">
		<div class="iz-pagejump-form">
			<div class="iz-pagejump-row">
				<label class="iz-sr" for="iz-pagejump-input">{{ L_JUMP_PAGE }}</label>

				<input
					id="iz-pagejump-input"
					type="number"
					class="iz-pagejump-input"
					title="{{ L_JUMP_PAGE }}"
					data-per-page="{{ PER_PAGE }}"
					data-base-url="{BASE_URL|e('html_attr')}"
					data-start-name="{{ START_NAME }}"
					min="1"
					max="999999"
					inputmode="numeric"
				/>

				<button type="button" class="iz-pagejump-go">
					{{ L_GO }}
				</button>
			</div>
		</div>
	</div>
</li>

<script>
/* Pagination jump (no jQuery/Bootstrap) */
document.addEventListener('DOMContentLoaded', function () {
	var trigger = document.querySelector('.iz-pagination-trigger');
	var panel = document.getElementById('iz-pagejump');
	var input = document.getElementById('iz-pagejump-input');
	var goBtn = panel ? panel.querySelector('.iz-pagejump-go') : null;

	if (!trigger || !panel || !input || !goBtn) return;

	function openPanel() {
		panel.hidden = false;
		trigger.setAttribute('aria-expanded', 'true');
		setTimeout(function () { input.focus(); }, 0);
	}

	function closePanel() {
		panel.hidden = true;
		trigger.setAttribute('aria-expanded', 'false');
	}

	function buildUrl(pageNumber) {
		// phpBB usually uses start=<offset> or similar via START_NAME
		var perPage = parseInt(input.getAttribute('data-per-page'), 10) || 0;
		var baseUrl = input.getAttribute('data-base-url') || '';
		var startName = input.getAttribute('data-start-name') || 'start';

		// If perPage is unknown, fall back to appending page number as start
		var startValue = perPage > 0 ? (pageNumber - 1) * perPage : pageNumber;

		// If BASE_URL already contains the startName param, replace it; else append it safely.
		var url = baseUrl;

		// Normalize &amp; from template escaping, so location navigation works
		url = url.replace(/&amp;/g, '&');

		var re = new RegExp('([?&])' + startName + '=\\d+');
		if (re.test(url)) {
			url = url.replace(re, '$1' + startName + '=' + startValue);
			return url;
		}

		// Append param
		if (url.indexOf('?') == -1) {
			return url + '?' + startName + '=' + startValue;
		}
		return url + '&' + startName + '=' + startValue;
	}

	function submitJump() {
		var raw = (input.value || '').toString().trim();
		var page = parseInt(raw, 10);

		if (!page || page < 1) page = 1;

		// Respect max attribute if present
		var max = parseInt(input.getAttribute('max'), 10);
		if (max && page > max) page = max;

		window.location.href = buildUrl(page);
	}

	trigger.addEventListener('click', function (e) {
		e.preventDefault();
		var expanded = trigger.getAttribute('aria-expanded') == 'true';
		if (expanded) closePanel();
		else openPanel();
	});

	goBtn.addEventListener('click', function (e) {
		e.preventDefault();
		submitJump();
	});

	input.addEventListener('keydown', function (e) {
		if (e.key == 'Enter') {
			e.preventDefault();
			submitJump();
		}
		if (e.key == 'Escape') {
			e.preventDefault();
			closePanel();
		}
	});

	// Click outside closes (only within the pagination area)
	document.addEventListener('click', function (e) {
		if (panel.hidden) return;
		if (e.target == trigger) return;
		if (panel.contains(e.target)) return;
		closePanel();
	});

	// Global ESC closes
	document.addEventListener('keydown', function (e) {
		if (e.key == 'Escape' && !panel.hidden) {
			closePanel();
		}
	});
});
</script>
{% endif %}

{% for pagination in pagination %}
	{% if pagination.S_IS_PREV %}
	<li><a href="{{ pagination.PAGE_URL }}" rel="prev" role="button">{{ L_PREVIOUS }}</a></li>
	{% elseif pagination.S_IS_CURRENT %}
	<li class="active"><a>{{ pagination.PAGE_NUMBER }}</a></li>
	{% elseif pagination.S_IS_ELLIPSIS %}
	<li class="ellipsis" role="separator"><a>{{ L_ELLIPSIS }}</a></li>
	{% elseif pagination.S_IS_NEXT %}
	<li><a href="{{ pagination.PAGE_URL }}" rel="next" role="button">{{ L_NEXT }}</a></li>
	{% else %}
	<li><a href="{{ pagination.PAGE_URL }}" role="button">{{ pagination.PAGE_NUMBER }}</a></li>
	{% endif %}
{% endfor %}
