{% load i18n %}
<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
    <div class="oh-main__titlebar oh-main__titlebar--left">
        <h1 class="oh-main__titlebar-title fw-bold">
            {% trans "FAQ Categories" %}
        </h1>
        <a
            class="oh-main__titlebar-search-toggle"
            role="button"
            aria-label="Toggle Search"
            @click="searchShow = !searchShow"
        >
            <ion-icon
                name="search-outline"
                class="oh-main__titlebar-serach-icon"
            ></ion-icon>
        </a>
    </div>
    <div
        class="oh-main__titlebar oh-main__titlebar--right oh-title_faq__main-header"
    >
        <div
            class="oh-input-group oh-input__search-group oh-faq__input-search"
            :class="searchShow ? 'oh-input__search-group--show' : ''"
        >
            <ion-icon
                name="search-outline"
                class="oh-input-group__icon oh-input-group__icon--left md hydrated oh-faq_search--icon"
                role="img"
                aria-label="search outline"
            ></ion-icon>
            <input
                type="text"
                class="oh-input oh-input__icon oh-search_input"
                aria-label="Search Input"
                name="search"
                placeholder="Search in FAQs..."
                hx-get="{% url 'faq-search' %}?category=true"
                hx-trigger="change delay:300ms"
                onkeyup='$("#suggestion_box").show(); if ($(this).val() == "") {$("#suggestion_box").hide()}'
				onfocusout = '$("#suggestion_box").fadeOut(500)'
                hx-target="#faqCategoryList"
            />
            <div class="oh-autocomplete-suggestions" id="suggestion_box"></div>
        </div>
        {% comment %}
        <select class="oh-select oh-select-faq oh-select--dropdown">
            <option value="1">{% trans "category" %}</option>
            <option value="2">{% trans "All FAQ" %}</option>
        </select>
        {% endcomment %}
    </div>
    <div class="oh-main__titlebar oh-main__titlebar--right">
        <form
            method="post"
            hx-get="{% url 'faq-category-search' %}"
            hx-target="#faqCategoryList"
            id="filterForm"
            class="d-none"
        >
            <div class="oh-dropdown__filter-footer">
                <button
                    class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton"
                    type="submit"
                >
                    {% trans "Filter" %}
                </button>
            </div>
        </form>
        {% if perms.helpdesk.add_faqcategory %}
        <div class="oh-main__titlebar-button-container">
            <div class="oh-btn-group ml-2">
                <div class="oh-dropdown" x-data="{open: false}">
                    <button
                        class="oh-btn oh-btn--secondary oh-btn--shadow"
                        data-toggle="oh-modal-toggle"
                        data-target="#objectCreateModal"
                        hx-get="{% url 'faq-category-create' %}"
                        hx-target="#objectCreateModalTarget"
                    >
                        <ion-icon name="add-outline" class="me-1"></ion-icon>
                        {% trans "Create" %}
                    </button>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</section>
