{% if AVATAR_MULTIAVATAR_PREVIEW %}
<dl>
	<dt><label>{{ lang('MULTIAVATAR_PREVIEW') }}{{ lang('COLON') }}</label></dt>
	<dd>
		<img src="{{ AVATAR_MULTIAVATAR_PREVIEW|e('html_attr') }}" width="{{ AVATAR_MULTIAVATAR_WIDTH|e('html_attr') }}" height="{{ AVATAR_MULTIAVATAR_HEIGHT|e('html_attr') }}" alt="{{ lang('MULTIAVATAR_PREVIEW')|e('html_attr') }}" id="avatar_multiavatar_preview" />
		<br><br>
		<button type="button" id="avatar_multiavatar_generate" class="button2" title="{{ lang('MULTIAVATAR_GENERATE')|e('html_attr') }}" aria-label="{{ lang('MULTIAVATAR_GENERATE')|e('html_attr') }}">
			<i class="icon fa-refresh fa-fw" aria-hidden="true"></i> {{ lang('MULTIAVATAR_GENERATE') }}
		</button>
	</dd>
</dl>
{% endif %}
<input type="hidden" name="avatar_multiavatar_seed" id="avatar_multiavatar_seed" value="{{ AVATAR_MULTIAVATAR_SEED|e('html_attr') }}" />
<br>
<script>
(function() {
	var seedInput = document.getElementById('avatar_multiavatar_seed');
	var generateButton = document.getElementById('avatar_multiavatar_generate');
	var preview = document.getElementById('avatar_multiavatar_preview');
	var routePattern = '{{ AVATAR_MULTIAVATAR_PREVIEW_PATTERN|e('js') }}';
	var tokenPlaceholder = '{{ AVATAR_MULTIAVATAR_TOKEN_PLACEHOLDER|e('js') }}';

	function randomSeed() {
		var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
		var values = new Uint8Array(16);
		var seed = '';

		if (window.crypto && window.crypto.getRandomValues) {
			window.crypto.getRandomValues(values);
			for (var i = 0; i < values.length; i++) {
				seed += chars.charAt(values[i] % chars.length);
			}
		} else {
			seed += String(Date.now()) + Math.random().toString(36).slice(2, 12);
		}

		return seed;
	}

	function encodeSeed(seed) {
		return window.btoa(seed).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
	}

	function currentSize() {
		return {{ AVATAR_MULTIAVATAR_WIDTH|e('js') }};
	}

	function previewUrl(seed) {
		var url = routePattern.replace(tokenPlaceholder, encodeSeed(seed));

		return url.replace(/\/\d+\.svg$/, '/' + currentSize() + '.svg');
	}

	function updatePreview() {
		if (!preview || !seedInput.value) {
			return;
		}

		preview.src = previewUrl(seedInput.value);
		preview.width = currentSize();
		preview.height = currentSize();
	}

	if (generateButton && seedInput) {
		generateButton.addEventListener('click', function() {
			seedInput.value = randomSeed();
			updatePreview();
		});
	}
})();
</script>