{% include 'snippets/layout/description/normal.html' %}

<div class="row">
	<div class="col-lg-{% if combined %}4{% else %}6{% endif %} col-xxl-3{% if not combined %} m-auto{% endif %}">
		<div class="mb-5 sticky-md-top">
			{% if cfg.lockInbox == false %}
			<br>
			<h2 class="d-flex justify-content-between align-items-center">
				<span>Ask a question</span>
				<button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#cw-collapse" aria-expanded="false" aria-controls="cw-collapse">
					<i class="bi bi-plus-lg me-1"></i> Add CW
				</button>
			</h2>
			<form class="d-lg-block" hx-post="{{ url_for('api.addQuestion') }}" id="question-form" hx-target="#response-container" hx-swap="none" hx-disabled-elt="#ask-btn">
				<div class="collapse" id="cw-collapse">
					<div class="form-floating mb-2">
						<input class="form-control" type="text" name="cw" id="cw" placeholder="Content warning">
						<label for="cw">Content warning</label>
					</div>
				</div>
				<div class="form-floating mb-2">
					<input maxlength="{{ cfg.charLimit }}" {% if cfg.allowAnonQuestions == false %}required{% endif %} class="form-control" type="text" name="from_who" id="from_who" placeholder="Name {% if cfg.allowAnonQuestions == true %}(optional){% else %}(required){% endif %}">
					<label for="from_who">Name {% if cfg.allowAnonQuestions == true %}(optional){% else %}(required){% endif %}</label>
				</div>
				<div class="form-floating mb-2">
					<textarea maxlength="{{ cfg.charLimit }}" class="form-control" style="height: 100px;" required name="question" id="question" placeholder="Write your question..."></textarea>
					<label for="question">Write your question...</label>
					<p class="text-end mt-1 small d-flex align-itemcenter justify-content-between"><span class="text-body-secondary"><i class="bi bi-markdown me-1"></i> Markdown supported</span> <span id="charCount">{{ cfg.charLimit }}</span></p>
				</div>
				{% if cfg.antispam.enabled %}
				{% if cfg.antispam.type == 'basic' %}
				<div class="form-group mb-2">
					<label for="antispam">Anti-spam: please enter the word <code class="text-uppercase">{{ getRandomWord() }}</code> in lowercase</label>
					<input class="form-control" type="text" required name="antispam" id="antispam" autocomplete="off">
				</div>
				{% elif cfg.antispam.type == 'recaptcha' %}
				<div class="form-group mb-2">
					{% if cfg.antispam.recaptcha.sitekey %}
					<div class="g-recaptcha" data-sitekey="{{ cfg.antispam.recaptcha.sitekey }}"></div>
					{% else %}
					<div class="alert alert-warning" role="alert"><b>Warning:</b> reCAPTCHA site key is not set!</div>
					{% endif %}
				</div>
				{% elif cfg.antispam.type == 'turnstile' %}
				<div class="cf-turnstile" data-sitekey="{{ cfg.antispam.turnstile.sitekey }}"></div>
				{% elif cfg.antispam.type == 'frc' %}
				<div class="frc-captcha" data-sitekey="{{ cfg.antispam.frc.sitekey }}"></div>
				{% else %}
				<div class="alert alert-warning"><b>Warning:</b> antispam type is not set!</div>
				{% endif %}
				{% endif %}
				<div class="form-group d-grid d-lg-flex align-items-center justify-content-lg-end mt-3">
					{#
					<div class="form-check mb-0 w-100">
						reserved for version 1.6.0 or later
						<input
						class="form-check-input"
						type="checkbox"
						name="_private"
						id="_private">
						<input type="hidden" id="private" name="private">
						<label for="_private" class="form-check-label">Ask privately</label>
					</div>
					#}
					<button type="submit" class="btn btn-primary col-lg-4" id="ask-btn">
						<span class="me-1 spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
						<span class="visually-hidden" role="status">Loading...</span>
						Ask
					</button>
				</div>
			</form>
			<div id="response-container"></div>
			{% else %}
			<br>
			<h2 class="text-center">New questions cannot be asked right now.</h2>
			{% endif %}
		</div>
	</div>
	{% if combined %}
	<div class="col-lg-8 col-xxl-9">
		{% if cfg.showQuestionCount == true %}
		<h3 class="fs-4">{{ len(combined) }} <span class="fw-light">question(s)</span></h3>
		{% endif %}
		<div id="top-response-container"></div>
		<div id="questions-container">
			{% include 'snippets/layout/questions_list.html' %}
		</div>
	</div>
	{% endif %}
</div>