{% extends 'base.html' %}
{% block title %}{{ trimContent(question.content, cfg.trimContentAfter) }} - {{ trimContent(answer.content, cfg.trimContentAfter) }}{% endblock %}
{% block additionalHeadItems %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/toastify.css') }}">
{% endblock %}
{% block content %}
<div class="row">
	<div class="col-sm-8 m-auto">
		{% with answers=answer, noManageBtns=True %}
		{% include 'snippets/layout/question_card.html' %}
		{% endwith %}
	</div>
</div>
<div class="modal fade" id="question-modal" tabindex="-1" aria-labelledby="q-modal-label" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header border-0">
				<h1 class="modal-title fs-5 fw-normal" id="q-modal-label">Share on Fediverse</h1>
				<button type="button" class="btn-close d-flex align-items-center fs-5" data-bs-dismiss="modal" aria-label="Close"><i class="bi bi-x-lg"></i></button>
			</div>
			<div class="modal-body py-0">
				<div class="form-group mb-3">
					<label for="fediInstance" class="form-label">Fediverse instance domain:</label>
					<input type="text" id="fediInstance" name="fediInstance" class="form-control">
				</div>
			</div>
			<div class="modal-footer pt-1 border-0">
				<button type="button" class="btn btn-outline-secondary flex-fill flex-lg-grow-0" data-bs-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-primary flex-fill flex-lg-grow-0" data-bs-dismiss="modal" id="q-modal-submit">Share</button>
			</div>
		</div>
	</div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/toastify.min.js') }}"></script>
<script>
	const questionModal = document.getElementById('question-modal');
	questionModal.addEventListener('show.bs.modal', event => {
	    // Button that triggered the modal
		let button = event.relatedTarget;
	    // Extract info from data-bs-* attributes
		let questionId = "{{ question.id }}";
		let questionContent = document.querySelector(`.question-${questionId}`).innerText;
		console.log(questionContent);
		let answerContent = document.getElementById(`a-${questionId}-content`).innerText;
		console.log(answerContent);

		let submitBtn = document.getElementById('q-modal-submit');

		// Define the cfg variables
		const trimContentAfter = "{{ cfg.trimContentAfter }}";
		const instanceFullBaseUrl = "{{ cfg.instance.fullBaseUrl }}";

		let questionText = questionContent.length > trimContentAfter ? questionContent.substring(0, trimContentAfter) + '…' : questionContent;
		let answerText = answerContent.length > trimContentAfter ? answerContent.substring(0, trimContentAfter) + '…' : answerContent;
		let questionUrl = `${instanceFullBaseUrl}/q/${questionId}/`;

		let encodedContent = encodeURI(`${questionText} — ${answerText} ${questionUrl}`);
		// Set up the shareOnFediverse function
		submitBtn.addEventListener('click', function() {
			shareOnFediverse(questionId, encodedContent);
		});
		console.log(submitBtn);
	});
    document.addEventListener('DOMContentLoaded', function () {
        const collapseElements = document.querySelectorAll('.collapse.question-cw');
        const toggleButtons = document.querySelectorAll('.cw-btn');
        const cwTexts = document.querySelectorAll('.cw-text');

        collapseElements.forEach(function (collapseElement, index) {
            let toggleButton = toggleButtons[index];
            let cwText = cwTexts[index];
            let buttonText = toggleButton.querySelector('.cw-btn-text');
            let buttonCharsText = toggleButton.querySelector('.cw-btn-chars');

            collapseElement.addEventListener('show.bs.collapse', function () {
                buttonText.textContent = 'Hide content';
                buttonCharsText.classList.add('d-none');
                cwText.classList.remove('text-center');
                cwText.classList.remove('fw-bold');
            });

            collapseElement.addEventListener('hide.bs.collapse', function () {
                buttonText.textContent = 'Show content';
                buttonCharsText.classList.remove('d-none');
                cwText.classList.add('text-center');
                cwText.classList.add('fw-bold');
            });
        });
    });

	function copy(questionId) {
		navigator.clipboard.writeText("{{ cfg.instance.fullBaseUrl }}/q/" + questionId + "/");
		Toastify({
			text: "Successfully copied link to clipboard!",
			duration: 3000,
			gravity: "top",
			position: "right",
			stopOnFocus: true,
			className: `alert alert-success shadow alert-dismissible`,
			close: true
		}).showToast();
	}
	function copyFull(text) {
		navigator.clipboard.writeText(text);
		Toastify({
			text: "Successfully copied text to clipboard!",
			duration: 3000,
			gravity: "top",
			position: "right",
			stopOnFocus: true,
			className: `alert alert-success shadow alert-dismissible`,
			close: true
		}).showToast();
	}
function shareOnFediverse(questionId, contentToShare) {
    const instanceDomain = document.getElementById(`fediInstance`).value.trim();
    const shareUrl = `https://${instanceDomain}/share?text=${contentToShare}`;
    
   	window.open(shareUrl, '_blank');
}

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

	document.addEventListener('htmx:afterRequest', function(event) {
		if (event.detail.target.id != "question-count") {
			document.getElementById('ask-btn').removeAttribute('disabled');
		}
		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;
			let targetElementId = event.detail.target.id;
			if (targetElementId != "question-count") {
				// WARNING: HACK
				// we use this hack to avoid triggering the event listener twice when making a request to api.returnToInbox and api.(un)pinQuestion
				if (
					(document.getElementById(targetElementId) && event.detail.requestConfig.elt.dataset.deletetarget === "")
					||
					document.getElementById(targetElementId) && event.detail.requestConfig.elt.dataset.deletetarget === ""
					) {
					targetElementId = event.detail.requestConfig.elt.dataset.target;
					document.getElementById(targetElementId).outerHTML = '';
				}
				if (msgType) {
					Toastify({
						text: msgType,
						duration: 3000,
						gravity: "top",
						position: "right",
						stopOnFocus: true,
						className: `alert alert-${alertType} shadow alert-dismissible`,
						close: true
					}).showToast();
				}
				if (event.detail.requestConfig.elt.id == 'question-form') {
					document.getElementById('question-form').reset();
					document.getElementById('charCount').textContent = "{{ cfg.charLimit }}";
				}
			}
		}
	});
</script>
{% endblock %}