{% if S_USE_ZXCVBN %}
	{% set zxcvbntsLang = ZXCVBNTS_LANG|default('en') %}
	{% INCLUDEJS '@vse_passwordstrength/js/zxcvbn-ts/core/dist/zxcvbn-ts.js' %}
	{% INCLUDEJS '@vse_passwordstrength/js/zxcvbn-ts/language-common/dist/zxcvbn-ts.js' %}
	{% INCLUDEJS '@vse_passwordstrength/js/zxcvbn-ts/language-en/dist/zxcvbn-ts.js' %}
	{% if zxcvbntsLang != 'en' %}{% INCLUDEJS '@vse_passwordstrength/js/zxcvbn-ts/language-' ~ zxcvbntsLang ~ '/dist/zxcvbn-ts.js' %}{% endif %}
{% endif %}
{% INCLUDECSS '@vse_passwordstrength/password_strength.css' %}
<script>
	(function() {
		'use strict';

		// Cache DOM elements
		const passField = document.querySelector('input[name=new_password]');
		if (!passField) {
			return;
		}
		{% if S_USE_ZXCVBN -%}
		const userField = document.querySelector('input[name=username], input[name=user]');
		const mailField = document.querySelector('input[name=email], input[name=user_email]');
		{% endif -%}
		const meter = document.createElement('div');
		const meterSegments = document.createElement('div');
		const resultMsg = document.createElement('div');
		const resultPrefix = document.createElement('span');
		const resultLabel = document.createElement('strong');
		const resultFeedback = document.createElement('em');

		// Define password strength values
		const strengthValues = [
			'', // 0 defaults
			'{{ lang_js("PS_VERY_WEAK") }}',
			'{{ lang_js("PS_WEAK") }}',
			'{{ lang_js("PS_GOOD") }}',
			'{{ lang_js("PS_STRONG") }}',
			'{{ lang_js("PS_VERY_STRONG") }}',
		];

		// Define helper functions
		const showStrength = (score, result) => {
			meter.dataset.score = String(score);
			meter.classList.toggle('is-active', score > 0);
			resultLabel.textContent = strengthValues[score];
			resultFeedback.textContent = result || '';
		};

		const trigger = () => {
			const input = passField.value;
			{% if S_USE_ZXCVBN -%}
			const result = zxcvbn.check(input, userInputs());
			showStrength(result.score + (input.length > 0), result.feedback.warning);
			{% else -%}
			showStrength(Math.max(complexity(input), +(input.length > 0)), '');
			{% endif -%}
		};

		{% if S_USE_ZXCVBN -%}
		// Set zxcvbn options
		const userInputs = () => ['{{ USER|e("js") }}', '{{ USERNAME|e("js") }}', '{{ EMAIL|e("js") }}', '{{ USER_EMAIL|e("js") }}', userField?.value, mailField?.value].filter(Boolean);
		const options = {
			translations: zxcvbnts['language-{{ zxcvbntsLang }}'].translations,
			graphs: zxcvbnts['language-common'].adjacencyGraphs,
			dictionary: {
				...zxcvbnts['language-common'].dictionary,
				...zxcvbnts['language-en'].dictionary,
				{%- if zxcvbntsLang != 'en' -%}
				...zxcvbnts['language-{{ zxcvbntsLang }}'].dictionary,
				{%- endif -%}
			},
		};
		const zxcvbn = new zxcvbnts.core.ZxcvbnFactory(options);
		{% else -%}
		function complexity(input) {
			let score = 0;
			if (input.length > 5) score++; // more than 5 chars
			if (input.length > 12) score++; // more than 12 chars
			if (/[a-z]/.test(input) && /[A-Z]/.test(input)) score++; // mixed case chars
			if (/\d/.test(input) && /\D/.test(input)) score++; // at least 1 number and 1 other char
			if (/[!@#$%^&*?_~\-(),]/.test(input) && /\w/.test(input)) score++; // letters and special chars
			return score;
		}
		{% endif -%}

		// Attach event listeners and insert resultMsg into DOM
		meter.className = 'password-strength';
		meter.setAttribute('aria-live', 'polite');
		meter.dataset.score = '0';
		meterSegments.className = 'password-strength__meter';
		meterSegments.setAttribute('aria-hidden', 'true');
		resultMsg.className = 'password-strength__status';
		resultPrefix.textContent = '{{ lang_js("PS_PASSWORD_STRENGTH") }}: ';
		resultFeedback.className = 'password-strength__feedback';

		for (let i = 0; i < 5; i++) {
			const segment = document.createElement('span');
			segment.className = 'password-strength__segment';
			meterSegments.appendChild(segment);
		}

		resultMsg.appendChild(resultPrefix);
		resultMsg.appendChild(resultLabel);
		resultMsg.appendChild(resultFeedback);
		meter.appendChild(meterSegments);
		meter.appendChild(resultMsg);
		passField.addEventListener('input', trigger);
		passField.addEventListener('blur', trigger);
		passField.parentNode.insertBefore(meter, passField.nextSibling);
		trigger();
	})();
</script>