{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% set homeLink = 'active' %}
{% block content %}
<div class="mt-3 mb-5">
<h2>Ask a question</h2>
<form hx-post="{{ url_for('api.addQuestion') }}" id="question-form" hx-target="#response-container" hx-swap="none">
<div class="form-group d-grid gap-2">
<input class="form-control" type="text" name="from_who" id="from_who" placeholder="Name (optional)">
<textarea class="form-control" required name="question" id="question" placeholder="Write your question..."></textarea>
<label for="antispam">Anti-spam: please enter the word <code>{{ getRandomWord().upper() }}</code> in lowercase</label>
<input class="form-control" type="text" required name="antispam" id="antispam">
<button type="submit" class="btn btn-primary">Ask</button>
</div>
</form>
<div id="response-container" class="mt-3"></div>
</div>
{% for item in combined %}
<div class="card mt-2 mb-2" id="question-{{ item.question.id }}">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<h5 class="card-title mt-1 mb-1">{% if item.question.from_who %}{{ item.question.from_who }}{% else %}Anonymous{% endif %}</h5>
<h6 class="card-subtitle fw-light text-body-secondary" data-bs-toggle="tooltip" data-bs-title="{{ item.question.creation_date }}" data-bs-placement="top">{{ formatRelativeTime(str(item.question.creation_date)) }}</h6>
</div>
<p class="card-text">{{ item.question.content }}</p>
</div>
<div class="card-body">
<a href="{{ url_for('viewQuestion', question_id=item.question.id) }}" class="text-decoration-none text-reset">
{% for answer in item.answers %}
<p class="mb-0">{{ answer.content }}</p>
</div>
</a>
<div class="card-footer text-body-secondary d-flex justify-content-between align-items-center">
<span class="fs-6">answered {{ formatRelativeTime(str(answer.creation_date)) }}</span>
{% endfor %}
<div class="dropdown">
<a class="text-reset btn-sm icon-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><i style="font-size: 1.2rem;" class="bi bi-three-dots"></i></a>
<ul class="dropdown-menu">
	<li><button class="dropdown-item" onclick="copy({{ item.question.id }})">Copy link</button></li>
	{% if logged_in %}
	<li><button class="dropdown-item" hx-post="{{ url_for('api.returnToInbox', question_id=item.question.id) }}" hx-target="#question-{{ item.question.id }}" hx-swap="none">Return to inbox</button></li>
	{% endif %}
</ul>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
{% block scripts %}
<script>
	console.log(navigator.clipboard);
	function copy(questionId) {
		navigator.clipboard.writeText("{{ cfg.fullBaseUrl }}/q/" + questionId + "/")
	}
</script>
<script>
	document.getElementById('question-form').reset();

	const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
	const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

	const appendAlert = (elementId, message, type, onclick) => {
			const alertPlaceholder = document.querySelector(`#${elementId}`);
			const alertHtml = `
				<div class="alert alert-${type} alert-dismissible" role="alert">
					<div>${message}</div>
					<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick=${onclick}></button>
				</div>
			`;
	
			alertPlaceholder.outerHTML = alertHtml;
	}

document.addEventListener('htmx:afterRequest', function(event) {
			const jsonResponse = event.detail.xhr.response;
			if (jsonResponse) {
				const parsed = JSON.parse(jsonResponse);
				const alertType = event.detail.successful ? 'success' : 'danger';
				msgType = event.detail.successful ? parsed.message : parsed.error;
				const targetElementId = event.detail.target.id;
 				onclick = event.detail.successful ? null : "window.location.reload()";
				appendAlert(targetElementId, msgType, alertType, onclick);
				document.getElementById('question-form').reset();
			}
		})
</script>
{% endblock %}