{if !$imoje_twisto_arrangement_call_js }
	<style>
		.hidden {
			display:none;
		}
	</style>
	<div id="twisto_loading" class="hidden" style="position:fixed; top:0; left:0; right:0; bottom:0; z-index:50000; background: rgba(0,0,0,.5)">

		<div style="background: #fbfbfb none; border: 1px solid #d6d4d4; border-radius: 4px; transform:translate(-50%, -50%); position:absolute; top:50%; left:50%; color:black;padding:20px;">
			<img id="loading-gif"
			     src="{$loading_gif}" alt="Loading"
			     style="display: block; margin-left: auto; margin-right: auto;"/><br/>
            {$twisto_hint}
		</div>
	</div>
	<script type="text/javascript">
		var twistoConfig = {
				public_key: '{$imoje_payment_methods.twisto.pk}',
				script:     '{$imoje_twisto_script_url}'
			},
			$form,
			twistoTimeout,
			twistoTimeoutFlag = false,
			timeBeforeCheck,
			isClicked = false,
			$button,
			$twistoData;

		(function (e, g, a) {
			function h(a) {
				return function () {
					b._.push([a, arguments])
				}
			}

			var f = ["check"], b = e || {}, c = document.createElement(a);
			a = document.getElementsByTagName(a)[0];
			b._ = [];
			for (var d = 0; d < f.length; d++) {
				b[f[d]] = h(f[d]);
			}
			this[g] = b;
			c.type = "text/javascript";
			c.async = !0;
			c.src = e.script;
			a.parentNode.insertBefore(c, a);
			delete e.script
		}).call(window, twistoConfig, "Twisto", "script");

		function timeout() {

			return setTimeout(function () {
				processForm({
					"details": "timeout"
				});
			}, {$imoje_payment_methods.twisto.timeout});
		}

		function processForm(response) {

			clearTimeout(twistoTimeout);
			response.timeResponse = (new Date()).getTime() - timeBeforeCheck;
			$button = $('<button type="submit" id="twisto-send-form" class="hidden"></button>');
			$twistoData = $('<input name="twistoData" type="hidden" id="twisto-data" />');
			$form.append($button, $twistoData);
			$twistoData.val(JSON.stringify(response));
			$button[0].click();
		}

		document.addEventListener("DOMContentLoaded", function (event) {

			$form = $("form[action='{$imoje_link_twisto}']");

			$form[0].onsubmit = function (e) {

				if (!$(`[data-module-name='twisto']`)[0].checked || isClicked) {
					return;
				}

				e.preventDefault();

				document.getElementById('twisto_loading').classList.remove("hidden");

				// region support for one-page checkout
				var cgv = document.getElementById("cgv");

				if (cgv && !cgv.checked) {
					return false;
				}
				// endregion

				if (isClicked) {
					return false;
				}
				isClicked = true;

				timeBeforeCheck = (new Date()).getTime();

				twistoTimeout = timeout();

				Twisto.check("{$imoje_twisto_payload}", function (response) {

						processForm(response);

					}, function (response) {

						if (!response) {
							response = {
								"details": "errorCallback"
							}
						}
						processForm(response);
					}, {
						"processingStarted": function () {

							if (twistoTimeoutFlag) {
								return;
							}
							twistoTimeoutFlag = true;

							clearTimeout(twistoTimeout);
							twistoTimeout = timeout();
						}
					}
				);
			}
		})
	</script>
{/if}