{% extends 'admin/base.html' %}
{% block _title %}General{% endblock %}
{% set general_link = 'active' %}
{% block _content %}
	<form hx-post="{{ url_for('api.updateConfig') }}" hx-target="#response-container" hx-swap="none">
		<h2 id="general" class="mb-3 fw-normal">General</h2>
		<div class="form-group mb-3">
			<label class="form-label" for="charLimit">Question character limit</label>
			<input type="number" id="charLimit" name="charLimit" value="{{ cfg.charLimit }}" class="form-control">
			<p class="form-text">Max length of a question in characters; questions extending this character limit will not be added to the database</p>
		</div>
		<div class="form-group mb-4">
			<label class="form-label" for="anonName">Name for anonymous users</label>
			<input type="text" id="anonName" name="anonName" value="{{ cfg.anonName }}" class="form-control">
			<p class="form-text">This name will be used for questions asked to you by anonymous users</p>
		</div>
		<div class="form-check form-switch mb-2">
			<input
			class="form-check-input"
			type="checkbox"
			name="_lockInbox"
			id="_lockInbox"
			value="{{ cfg.lockInbox }}"
			role="switch"
			{% if cfg.lockInbox %}checked{% endif %}>
			<input type="hidden" id="lockInbox" name="lockInbox" value="{{ cfg.lockInbox }}">
			<label for="_lockInbox" class="form-check-label">Lock inbox and don't allow new questions</label>
		</div>
		<div class="form-check form-switch mb-2">
			<input
			class="form-check-input"
			type="checkbox"
			name="_allowAnonQuestions"
			id="_allowAnonQuestions"
			value="{{ cfg.allowAnonQuestions }}"
			role="switch"
			{% if cfg.allowAnonQuestions %}checked{% endif %}>
			<input type="hidden" id="allowAnonQuestions" name="allowAnonQuestions" value="{{ cfg.allowAnonQuestions }}">
			<label for="_allowAnonQuestions" class="form-check-label">Allow anonymous questions</label>
		</div>
		<div class="form-check form-switch mb-2">
			<input
			class="form-check-input"
			type="checkbox"
			name="_noDeleteConfirm"
			id="_noDeleteConfirm"
			value="{{ cfg.noDeleteConfirm }}"
			role="switch"
			{% if cfg.noDeleteConfirm %}checked{% endif %}>
			<input type="hidden" id="noDeleteConfirm" name="noDeleteConfirm" value="{{ cfg.noDeleteConfirm }}">
			<label for="_noDeleteConfirm" class="form-check-label">Disable confirmation when deleting questions</label>
		</div>
		<div class="form-check form-switch mb-3">
			<input
			class="form-check-input"
			type="checkbox"
			name="_showQuestionCount"
			id="_showQuestionCount"
			value="{{ cfg.showQuestionCount }}"
			role="switch"
			{% if cfg.showQuestionCount %}checked{% endif %}>
			<input type="hidden" id="showQuestionCount" name="showQuestionCount" value="{{ cfg.showQuestionCount }}">
			<label for="_showQuestionCount" class="form-check-label">Show question count in homepage</label>
		</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>
	// 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 %}