{#
 # Cloudflare Turnstile CAPTCHA template (frontend)
 #
 # Widget types:
 # - checkbox: Always visible widget
 # - invisible: Runs in background, only shows if challenge needed
 #}

{% if S_TURNSTILE_AVAILABLE %}
	<script src="{{ U_TURNSTILE_SCRIPT }}" async defer></script>

	{% set scale_factor = TURNSTILE_WIDGET_SIZE|default('100') %}
	{% if scale_factor != '100' %}
	<style>
		.turnstile-scaled { transform: scale({{ scale_factor / 100 }}); transform-origin: left top; }
		.turnstile-scaled-wrap { overflow: hidden; {% if scale_factor == '80' %}height: 52px; width: 240px;{% elseif scale_factor == '60' %}height: 39px; width: 180px;{% endif %} }
	</style>
	{% endif %}

	{% if TURNSTILE_WIDGET_TYPE == 'invisible' %}
		{# Invisible mode - auto-starts, only shows widget if Cloudflare needs interaction #}
		<div class="cf-turnstile" id="turnstile-invisible-widget"
			 data-sitekey="{{ TURNSTILE_SITEKEY }}"
			 data-size="normal"
			 data-appearance="interaction-only"
			 data-theme="{{ TURNSTILE_THEME|default('auto') }}"
			 data-callback="turnstileInvisibleReady">
		</div>
		<script>
		(function() {
			var state = { tokenReady: false, pendingSubmit: false, originalText: '', timeoutStarted: false };
			var submitButton = null;

			window.turnstileInvisibleReady = function(token) {
				state.tokenReady = true;
				if (submitButton && state.pendingSubmit) {
					submitButton.disabled = false; // Re-enable for click (visual styles stay)
					submitButton.click();
				}
			};

			document.addEventListener('DOMContentLoaded', function() {
				var widget = document.getElementById('turnstile-invisible-widget');
				if (!widget) return;
				var form = widget.closest('form');
				if (!form) return;

				submitButton = form.querySelector('input[name="post"], button[name="post"]')
						  || form.querySelector('input[name="login"], button[name="login"]')
						  || form.querySelector('input[type="submit"], button[type="submit"]');
				if (submitButton) {
					state.originalText = submitButton.tagName === 'INPUT' ? submitButton.value : submitButton.textContent;
				}

				form.addEventListener('submit', function(e) {
					var tokenInput = form.querySelector('input[name="cf-turnstile-response"]');
					if ((tokenInput && tokenInput.value) || state.tokenReady) {
						return true;
					}
					e.preventDefault();
					state.pendingSubmit = true;
					if (submitButton) {
						submitButton.disabled = true;
						submitButton.style.opacity = '0.6';
						submitButton.style.cursor = 'not-allowed';
						if (submitButton.tagName === 'INPUT') { submitButton.value = '{{ lang('TURNSTILE_VERIFYING')|e('js') }}'; }
						else { submitButton.textContent = '{{ lang('TURNSTILE_VERIFYING')|e('js') }}'; }
					}
					if (!state.timeoutStarted) {
						state.timeoutStarted = true;
						setTimeout(function() {
							if (!state.tokenReady && submitButton) {
								submitButton.disabled = false;
								submitButton.style.opacity = '';
								submitButton.style.cursor = '';
								if (submitButton.tagName === 'INPUT') { submitButton.value = state.originalText; }
								else { submitButton.textContent = state.originalText; }
							}
						}, 10000);
					}
					return false;
				});
			});
		})();
		</script>
	{% else %}
		{# Checkbox/visible mode - always show widget #}
		<noscript>
			<div class="error">{{ lang('TURNSTILE_NOSCRIPT') }}</div>
		</noscript>

		{% if S_TYPE == 1 %}
		{# Registration form - show in a panel #}
		<div class="panel captcha-panel">
			<div class="inner">
				<h3 class="captcha-title">{{ lang('TURNSTILE_VERIFY_HUMAN') }}</h3>
				<fieldset class="fields2">
					{% if scale_factor != '100' %}
					<div class="turnstile-scaled-wrap">
						<div class="cf-turnstile turnstile-scaled"
							 data-sitekey="{{ TURNSTILE_SITEKEY }}"
							 data-size="normal"
							 data-appearance="always"
							 data-theme="{{ TURNSTILE_THEME|default('auto') }}">
						</div>
					</div>
					{% else %}
					<div class="cf-turnstile"
						 data-sitekey="{{ TURNSTILE_SITEKEY }}"
						 data-size="normal"
						 data-appearance="always"
						 data-theme="{{ TURNSTILE_THEME|default('auto') }}">
					</div>
					{% endif %}
				</fieldset>
			</div>
		</div>
		{% else %}
		{# Login form - simpler layout #}
		<dl>
			<dt>&nbsp;</dt>
			<dd>
				{% if scale_factor != '100' %}
				<div class="turnstile-scaled-wrap">
					<div class="cf-turnstile turnstile-scaled"
						 data-sitekey="{{ TURNSTILE_SITEKEY }}"
						 data-size="normal"
						 data-appearance="always"
						 data-theme="{{ TURNSTILE_THEME|default('auto') }}">
					</div>
				</div>
				{% else %}
				<div class="cf-turnstile"
					 data-sitekey="{{ TURNSTILE_SITEKEY }}"
					 data-size="normal"
					 data-appearance="always"
					 data-theme="{{ TURNSTILE_THEME|default('auto') }}">
				</div>
				{% endif %}
			</dd>
		</dl>
		{% endif %}
	{% endif %}

{% else %}
	<div class="error">{{ lang('TURNSTILE_NOT_AVAILABLE') }}</div>
{% endif %}