module.html

<div x-data="faqs">
    <div class="flex flex-wrap md:flex-nowrap justify-between my-4">
        <div class="col md:w-1/4 w-full bg-gray-100 p-4 text-lg">
            <input x-model="search" type="text" placeholder="Search..." class="w-full p-4 rounded-3xl border border-gray-500 focus:outline-none focus-visible:border-pink-600">
            <div class="">
                <button class="cursor-pointer p-4 my-2 rounded-3xl bg-gray-200 text-center transition hover:bg-gray-300" @click="selectCategory(0)">All</button>
                {% for category in module.categories %}
                    <button class="cursor-pointer p-4 my-2 rounded-3xl bg-gray-200 text-center transition hover:bg-gray-300" @click="selectCategory({{ loop.index }})">{{ category }}</button>
                {% endfor %}
            </div>
        </div>
        <div class="w-full mx-4">
            {% for faq in faqs %}
            <div x-data="{ open: false }" class="faq-item border-b border-gray-500" x-show="isFiltered({{ faq|tojson }})">
                <div class="flex justify-between py-8 cursor-pointer text-lg transition-colors hover:text-pink-600">
                    <h3>{{ faq.question }}</h3>
                </div>
                <div class="pb-8 prose" x-show="open">
                    {{ faq.answer }}
                </div>
            </div>
            {% endfor %}
        </div> 
    </div>


</div>
{% require_js %}
<script>
    
    document.addEventListener('alpine:init', () => {
        Alpine.data('faqs', () => ({
            selectedCategory: 0,
            search: '',
 
            isFiltered(faq) {

                // then filter by search term using faq.question
                // is search is not '' and faq.question doesn not contain search term return false
                
                // filter by category using faq.category
                // if faq.category != selectedCategoy return false

                // else return true

            }
        }))
    })

</script>
{% end_require_js %}