{% extends 'admin/base.html' %}
{% block _title %}Anti-spam{% endblock %}
{% set antispam_link = 'active' %}
{% block _content %}
	<form hx-post="{{ url_for('api.updateConfig') }}" hx-target="#response-container" hx-swap="none">
		<h2 id="antispam" class="mb-2 fw-normal">Anti-spam</h2>
		<p class="fs-5 h3 text-body-secondary mb-3">Protect your {{ const.appName }} instance from spammers</p>
		<div class="form-check form-switch mb-3">
			<input
			class="form-check-input"
			type="checkbox"
			name="_antispam.enabled"
			id="_antispam.enabled"
			value="{{ cfg.antispam.enabled }}"
			role="switch"
			{% if cfg.antispam.enabled %}checked{% endif %}>
			<input type="hidden" id="antispam.enabled" name="antispam.enabled" value="{{ cfg.antispam.enabled }}">
			<label for="_antispam.enabled" class="form-check-label">Enabled</label>
		</div>
		{% if not cfg.antispam.enabled %}
		<div class="alert alert-warning border-0 small" role="alert">
			<p class="m-0 d-flex align-items-center gap-2 fw-medium"><i class="bi bi-exclamation-circle fs-5"></i> Warning</p>
			<p class="m-0">
				It's highly encouraged to keep anti-spam enabled, otherwise you could become a target of a spam attack.<br><br>
				If you don't want your visitors to worry about completing a CAPTCHA, some providers have "non-interactive" and "invisible" CAPTCHA variants.
			</p>
		</div>
		{% endif %}
		<div class="form-group mb-3{% if not cfg.antispam.enabled %}d-none{% endif %}">
			<label class="form-label" for="antispam.type">Anti-spam type</label>
			<select id="antispam.type" name="antispam.type" class="form-select" onchange="checkForRecaptcha(this)">
				<option value="basic"{% if cfg.antispam.type == 'basic' %} selected{% endif %}>Basic</option>
				<option value="turnstile"{% if cfg.antispam.type == 'turnstile' %} selected{% endif %}>Cloudflare Turnstile</option>
				<option value="frc"{% if cfg.antispam.type == 'frc' %} selected{% endif %}>Friendly Captcha</option>
				<option value="recaptcha"{% if cfg.antispam.type == 'recaptcha' %} selected{% endif %}>reCAPTCHA v2</option>
			</select>
			<p class="form-text">Anti-spam type to use</p>
		</div>
		<div id="recaptcha-options"{% if cfg.antispam.type != 'recaptcha' %} class="d-none"{% endif %}>
			<h3 id="recaptcha" class="mb-3 fw-light">reCAPTCHA options</h3>
			<div class="form-group mb-3">
				<label class="form-label" for="antispam.recaptcha.sitekey">Site key</label>
				<input type="text" id="antispam.recaptcha.sitekey" name="antispam.recaptcha.sitekey" value="{{ cfg.antispam.recaptcha.sitekey }}" class="form-control">
				<p class="form-text">reCAPTCHA site key</p>
			</div>
			<div class="form-group mb-3">
				<label class="form-label" for="antispam.recaptcha.secretkey">Secret key</label>
				<input type="password" id="antispam.recaptcha.secretkey" name="antispam.recaptcha.secretkey" value="{{ cfg.antispam.recaptcha.secretkey }}" class="form-control">
				<p class="form-text">reCAPTCHA secret key</p>
			</div>
		</div>
		<div id="turnstile-options"{% if cfg.antispam.type != 'turnstile' %} class="d-none"{% endif %}>
			<h3 id="turnstile" class="mb-3 fw-light">Turnstile options</h3>
			<div class="form-group mb-3">
				<label class="form-label" for="antispam.turnstile.sitekey">Site key</label>
				<input type="text" id="antispam.turnstile.sitekey" name="antispam.turnstile.sitekey" value="{{ cfg.antispam.turnstile.sitekey }}" class="form-control">
				<p class="form-text">Turnstile site key</p>
			</div>
			<div class="form-group mb-3">
				<label class="form-label" for="antispam.turnstile.secretkey">Secret key</label>
				<input type="password" id="antispam.turnstile.secretkey" name="antispam.turnstile.secretkey" value="{{ cfg.antispam.turnstile.secretkey }}" class="form-control">
				<p class="form-text">Turnstile secret key</p>
			</div>
		</div>
		<div id="frc-options"{% if cfg.antispam.type != 'frc' %} class="d-none"{% endif %}>
			<h3 id="frc" class="mb-3 fw-light">Friendly Captcha options</h3>
			<div class="form-group mb-3">
				<label class="form-label" for="antispam.frc.sitekey">Site key</label>
				<input type="text" id="antispam.frc.sitekey" name="antispam.frc.sitekey" value="{{ cfg.antispam.frc.sitekey }}" class="form-control">
				<p class="form-text">Friendly Captcha site key</p>
			</div>
			<div class="form-group mb-3">
				<label class="form-label" for="antispam.frc.apikey">API key</label>
				<input type="password" id="antispam.frc.apikey" name="antispam.frc.apikey" value="{{ cfg.antispam.frc.apikey }}" class="form-control">
				<p class="form-text">Friendly Captcha API key</p>
			</div>
		</div>
		<div class="form-group">
			<button type="submit" class="btn btn-primary mt-3" id="saveConfig">
				<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
				<span class="visually-hidden" role="status">Loading...</span>
				Save
			</button>
		</div>
	</form>
{% endblock %}
{% block _scripts %}
<script>
	let recaptchaDiv = document.getElementById("recaptcha-options");
	let turnstileDiv = document.getElementById("turnstile-options");
	let frcDiv = document.getElementById("frc-options");
	const typeSelect = document.getElementById('antispam.type');
	function checkForRecaptcha(element) {
		console.log(element);
			if (element.value === 'recaptcha') {
				recaptchaDiv.classList.remove('d-none');
				turnstileDiv.classList.add('d-none');
				frcDiv.classList.add('d-none');
			} else if (element.value === 'turnstile') {
				turnstileDiv.classList.remove('d-none');
				recaptchaDiv.classList.add('d-none');
				frcDiv.classList.add('d-none');
			} else if (element.value === 'frc') {
				turnstileDiv.classList.add('d-none');
				recaptchaDiv.classList.add('d-none');
				frcDiv.classList.remove('d-none');					
			} else {
				recaptchaDiv.classList.add('d-none');
				turnstileDiv.classList.add('d-none');
				frcDiv.classList.add('d-none');
			}
	}
</script>
<script>
	// fix handling checkboxes
	document.querySelectorAll('.form-check-input[type=checkbox]').forEach(function(checkbox) {
		checkbox.addEventListener('change', function() {
			checkbox.nextElementSibling.value = this.checked ? 'True' : 'False';
		});
	});
</script>
{% endblock %}