{% extends 'base.html' %}
{% block title %}Admin{% endblock %}
{% set adminLink = 'active' %}
{% block additionalHeadItems %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/toastify.css') }}">
{% endblock %}
{% block content %}
<h1 class="mb-3">Admin panel</h1>
<!-- this is actually not used anymore, but htmx requires a valid target so we have to use it -->
<div id="response-container"></div>
<a class="btn d-lg-none mb-2" href="#preview">Skip to preview</a>
<form hx-trigger="click from:#saveConfig, keyup[ctrlKey&&key=='Enter']" hx-post="{{ url_for('api.updateConfig') }}" hx-target="#response-container" hx-swap="none">
<a class="visually-hidden-focusable" href="#preview">Skip to preview</a>
<div class="row">
	<div class="col-sm-6">
				<h2 id="instance">Instance</h2>
				<div class="form-group mb-3">
					<label class="form-label" for="instance.title">Title <small class="text-body-secondary">(e.g. My question box)</small></label>
					<input type="text" id="instance.title" name="instance.title" value="{{ cfg.instance.title }}" oninput="updateText('instance.title', 'title')" class="form-control">
					<p class="form-text">Title of this CatAsk instance</p>
				</div>
				<div class="form-group mb-3">
					<label class="form-label d-flex flex-column flex-lg-row align-items-lg-center justify-content-between" for="instance.description">
						<span>Description <small class="text-body-secondary">(e.g. Ask me a question!)</small></span>
						<small class="text-body-secondary"><i class="bi bi-markdown me-1"></i> Markdown supported</small>
					</label>
					<textarea id="instance.description" name="instance.description" oninput="updateText('instance.description', 'desc')" class="form-control" style="height: 200px; resize: vertical;">{{ cfg.instance.description }}</textarea>
					<p class="form-text">Description of this CatAsk instance</p>
				</div>
				<div class="form-group mb-3">
					<label class="form-label d-flex flex-column flex-lg-row align-items-lg-center justify-content-between" for="instance.rules">
						<span>Rules</span>
						<small class="text-body-secondary"><i class="bi bi-markdown me-1"></i> Markdown supported</small>
					</label>
					<textarea id="instance.rules" name="instance.rules" class="form-control" style="height: 200px; resize: vertical;" oninput="updateText('instance.rules', 'rules-content')">{{ cfg.instance.rules }}</textarea>
					<p class="form-text">Rules of this CatAsk instance</p>
				</div>
				<div class="form-group mb-3">
					<label class="form-label" for="instance.image">Relative image path <small class="text-body-secondary">(default: /static/img/ca_screenshot.png)</small></label>
					<input type="text" id="instance.image" name="instance.image" value="{{ cfg.instance.image }}" class="form-control">
					<p class="form-text">Image that's going to be used in a link preview</p>
				</div>
				<div class="form-group mb-4">
					<label class="form-label" for="instance.fullBaseUrl">Base URL <small class="text-body-secondary">(e.g. https://ask.example.com)</small></label>
					<input type="text" id="instance.fullBaseUrl" name="instance.fullBaseUrl" value="{{ cfg.instance.fullBaseUrl }}" class="form-control">
					<p class="form-text">Full URL to homepage of this CatAsk instance without a trailing slash</p>
				</div>
				<h2 id="general">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>

<!-- reserved for 1.5.0 or later -->
				<!-- <h3>Info block layout</h3> -->
<!-- <div class="btn-group mb-4 w-100" role="group" aria-label="Info block layout toggle button group"> -->
  <!-- <input type="radio" class="btn-check" name="infoBlockLayout" id="columnLayout" autocomplete="off" checked> -->
  <!-- <label class="btn btn-outline-secondary w-100" for="columnLayout">Column</label> -->
<!--  -->
  <!-- <input type="radio" class="btn-check" name="infoBlockLayout" id="rowLayout" autocomplete="off"> -->
  <!-- <label class="btn btn-outline-secondary w-100" for="rowLayout">Row</label> -->
<!-- </div> -->

				<div class="form-check mb-2">
					<input
						class="form-check-input"
						type="checkbox"
						name="_lockInbox"
						id="_lockInbox"
						value="{{ cfg.lockInbox }}"
						{% if cfg.lockInbox == true %}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 mb-2">
					<input
						class="form-check-input"
						type="checkbox"
						name="_allowAnonQuestions"
						id="_allowAnonQuestions"
						value="{{ cfg.allowAnonQuestions }}"
						{% if cfg.allowAnonQuestions == true %}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 mb-2">
					<input
						class="form-check-input"
						type="checkbox"
						name="_noDeleteConfirm"
						id="_noDeleteConfirm"
						value="{{ cfg.noDeleteConfirm }}"
						{% if cfg.noDeleteConfirm == true %}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 mb-3">
					<input
						class="form-check-input"
						type="checkbox"
						name="_showQuestionCount"
						id="_showQuestionCount"
						value="{{ cfg.showQuestionCount }}"
						{% if cfg.showQuestionCount == true %}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 mb-3">
					<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>
			<hr class="mt-4 mb-4">
			<form hx-trigger="click from:#save-blacklist, keyup[ctrlKey&&key=='Enter']" hx-post="{{ url_for('admin.index') }}" hx-target="#response-container" hx-swap="none">
				<input type="hidden" name="action" value="update_word_blacklist">
				<div class="form-group mb-3">
					<label class="form-label" for="blacklist_cat"><h2 id="blacklist">Word blacklist</h2></label>
					<p class="text-body-secondary">Blacklisted words for questions; one word per line</p>
					<textarea id="blacklist_cat" name="blacklist" style="height: 300px; resize: vertical;" class="form-control">{{ blacklist }}</textarea>
					<button type="submit" class="btn btn-primary mt-3" id="save-blacklist">
						<span class="me-1 spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
						<span class="visually-hidden" role="status">Loading...</span>
						Save
					</button>
				</div>
			</form>
	</div>
	<div class="col-sm-6" id="preview">
	<h2>Preview</h2>
	<button class="text-warning-emphasis d-inline-flex align-items-center btn btn-sm mw-100" type="button" data-bs-toggle="collapse" data-bs-target="#preview-warning"><i class="bi bi-exclamation-triangle fs-5 me-2"></i> The preview might not always be accurate</button>
<div class="collapse" id="preview-warning">
	<small class="mt-2 text-body-secondary">The preview is not guaranteed to render the same as on other pages, because it uses a different renderer (<b>marked (js)</b> while everything else uses <b>mistune (python)</b>)<br>The reason for this is live markdown rendering support</small>
</div>

			<h3 class="h1 text-center fw-bold mt-4" id="title">{{ cfg.instance.title }}</h3>
	{% autoescape off %}
	<h4 class="h5 text-center fw-light" id="desc">{{ cfg.instance.description | render_markdown }}</h4>
	{% endautoescape %}
		<div class="m-auto col-sm-10">
			<div class="accordion" id="rules-accordion">
				<div class="accordion-item">
					<h2 class="accordion-header">
						<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rules" aria-expanded="false" aria-controls="collapseTwo">
							<i class="bi bi-exclamation-triangle me-2 fs-4"></i> Rules
						</button>
					</h2>
					<div id="rules" class="accordion-collapse collapse" data-bs-parent="#rules-accordion">
					  <div class="accordion-body">
							<div class="markdown-content" id="rules-content">{{ cfg.instance.rules | render_markdown }}</div>
					  </div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/toastify.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/marked.min.js') }}"></script>
<script>
marked.use({
  breaks: true,
  gfm: true,
});
function updateText(input, element) {
    const inputEl = document.getElementById(input);
    const replaceEl = document.getElementById(element);
    replaceEl.innerHTML = marked.parse(inputEl.value);
}
</script>
<script>
	// fix handling checkboxes and radios
	document.querySelectorAll('.form-check-input, .btn-check').forEach(function(checkbox) {
		checkbox.addEventListener('change', function() {
	        checkbox.nextElementSibling.value = this.checked ? 'True' : 'False';
	    });
	});
</script>
<script>
	document.addEventListener('htmx:afterRequest', function(event) {
		console.log("reached event listener");
		const jsonResponse = event.detail.xhr.response;
		if (jsonResponse) {
			const parsed = JSON.parse(jsonResponse);
			const alertType = event.detail.successful ? 'success' : 'danger';
			message = event.detail.successful ? parsed.message : parsed.error;
			if (event.detail.target.id != "question-count") {
				Toastify({
					text: message,
					duration: 3000,
					gravity: "top",
					position: "right",
					stopOnFocus: true,
					className: `alert alert-${alertType} shadow alert-dismissible`,
					close: true
				}).showToast();
			}
		}
	});
</script>
{% endblock %}