{% 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-2 fw-normal">{{ _('General') }}</h2>
		<p class="fs-5 h3 text-body-secondary mb-3">{{ _('General settings') }}</p>
		<div class="form-group mb-3">
			<label class="form-label" for="username">{{ _('Username (optional)') }}</label>
			<input type="text" id="username" name="username" value="{{ cfg.username }}" class="form-control">
			<p class="form-text">{{ _('Your username') }}</p>
		</div>
		<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>
		{% include 'snippets/admin/saveBtn.html' %}
	</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 %}