{% load i18n static %} {% 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>
            {% empty %}
                <div
                    style="
                        height: 70vh;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                    "
                >
                    <div class="oh-404">
                        <img
                            src="{% static 'images/ui/faq.png' %}"
                            class="mb-4 oh-404__image"
                            alt=""
                        />
                        <h3 style="font-size: 20px" class="oh-404__subtitle">
                            {% trans "There are no FAQs at the moment." %}
                        </h3>
                    </div>
                </div>
            {% endfor %}
        </ul>
    </div>
</div>