{% load i18n %}
{% include 'filter_tags.html' %}
<div class="oh-card mb-4">
	<div class="oh-faq">
		<ul class="oh-faq__items">
			{% for faq in faqs %}
				<li class="oh-faq__item fade-me-out" id="faqItem{{faq.id}}">
					<div class="oh-faq__item-header icon-inner" onclick="show_answer(this)">
						<div class="oh-faq__item-header__left icon-inner">
							<span class="oh-faq__item-title icon-inner"> {{faq.question}} </span>
							<ul class="oh-faq__tags">
								{% for tag in faq.tags.all %}
									<li class="oh-faq__tag text-light" style="background:{{tag.color}};">{{tag|capfirst}}</li>
								{% endfor %}
							</ul>
						</div>
						<div class="oh-faq__item-header__right">
							{% if perms.helpdesk.change_faq %}
								<button class="oh-btn oh-btn--sq oh-btn--transparent" title="{% trans 'Edit' %}"
									data-toggle="oh-modal-toggle" data-target="#objectCreateModal"
									hx-get="{% url 'faq-update' faq.id %}" hx-target="#objectCreateModalTarget"
									onclick='event.stopPropagation()'>
									<ion-icon name="create-outline"></ion-icon>
								</button>
							{% endif %}
							{% if perms.helpdesk.delete_faq %}
								<form hx-confirm="{% trans 'Are you sure you want to delete this FAQ?' %}"
									hx-target="#faqItem{{faq.id}}" hx-post="{% url 'faq-delete' faq.id %}" class="w-50"
									hx-on:click="event.stopPropagation();"
									hx-on-htmx-after-request="setTimeout(() => {reloadMessage(this);},100);"
									hx-swap="outerHTML swap:.5s">
									{% csrf_token %}
									<button type="submit" class="oh-btn oh-btn--sq oh-btn--danger-text oh-btn--transparent">
										<ion-icon class="me-1 md hydrated" name="trash-outline" role="img"
											aria-label="trash outline"></ion-icon>
									</button>
								</form>
							{% endif %}
						</div>
					</div>
					<div class="oh-faq__item-body">{{faq.answer}}</div>
				</li>
			{% endfor %}
		</ul>
	</div>
</div>
