{% load static i18n %}
<div class="oh-modal__dialog-header">
    <span class="oh-modal__dialog-title">{% trans "Load FAQs" %}</span>
    <button class="oh-modal__close" aria-label="Close">
        <ion-icon name="close-outline"></ion-icon>
    </button>
</div>
<div class="oh-modal__dialog-body">
    <div class="oh-card">
        <form hx-post="{{request.path}}" hx-target="#objectCreateModalTarget">
            <div class="oh-checkpoint-badge text-success mb-2 selectFaqs"
                style="cursor: pointer"
            >
            {% trans "Select All Faqs" %}
            </div>
            <div class="oh-checkpoint-badge text-secondary mb-2 unSelectFaqs"
                style="cursor: pointer"
            >
            {% trans "Unselect All Faqs" %}
            </div>
            {% csrf_token %}
            {% for cat_id, category in catagories.items %}
                <div class="oh-accordion">
                    <div class="oh-accordion-header">{{category}}</div>
                    <div
                        class="oh-accordion-body"
                        style="
                            max-height: 500px; overflow-y: auto;
                        "
                    >
                        <span class="d-flex flex-row-reverse mb-2 me-3">
                            <input
                                type="checkbox"
                                title="{% trans 'Select All' %}"
                                class="custom-radio-checkmark my-2 selectAll"
                            />
                        </span>
                        <div
                            class="oh-layout--grid-3 faqs-list"
                            style="
                                grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
                            "
                        >
                            {% for faq in faqs %}
                                {% if faq.fields.category == cat_id %}
                                    <div class="oh-card rounded">
                                        <div class="oh-kanban-card__details">
                                            <div class="d-flex-justify-between mb-2">
                                                <span class="oh-kanban-card__title"
                                                    >{{faq.fields.question}}</span
                                                >
                                                <span>
                                                    <input
                                                        name="{{faq.pk}}"
                                                        type="checkbox"
                                                        class="custom-radio-checkmark"
                                                    />
                                                </span>
                                            </div>
                                            <div
                                                class="oh-kanban-card__subtitle truncated-text"
                                                style="
                                                    height: 70px;
                                                    white-space: wrap;
                                                "
                                            >
                                                {{faq.fields.answer}}
                                            </div>
                                            <ul class="oh-faq__tags m-0 flex-wrap">
                                                {% for tag in faq.tags %}
                                                    <li class="oh-faq__tag {% cycle 'bg-primary' 'bg-danger' 'bg-warning' %}">
                                                        <span class="oh-faq__tag-text text-light">{{tag}}</span>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endfor %}

            <div class="d-flex flex-row-reverse">
                <button
                    type="submit"
                    class="oh-btn oh-btn--secondary mt-2 mr-0 pl-4 pr-5 oh-btn--w-100-resp"
                >
                    {% trans "Add" %}
                </button>
            </div>
        </form>
    </div>
</div>
<script>
    $(document).ready(function () {
        $(".selectAll").click(function () {
            var isChecked = $(this).prop("checked");
            $(this).parent().siblings(".faqs-list").find(".custom-radio-checkmark").prop("checked", isChecked);
        });
        $(".selectFaqs").click(function () {
            $(".selectAll").prop("checked", false);
            $(".selectAll").click();
        });
        $(".unSelectFaqs").click(function () {
            $(".selectAll").prop("checked", true);
            $(".selectAll").click();
        });
    });
</script>