{% load get_item %}

<div class="relative w-full flex flex-col gap-2">
    {% for i in 50|range_filter %}
        {% with key_title=i|make_key:"faq_title" %}
            {% with title=block.content|get_item:key_title %}
                {% if title %}
                    {% with key_desc=i|make_key:"faq_desc" %}
                        {% with desc=block.content|get_item:key_desc %}
                            <div x-data="{ open: false }" class="p-3 rounded-3xl outline outline-1 outline-offset-[-1px] outline-zinc-300">
                                <button @click="open=!open" class="flex justify-between items-center w-full text-slate-950 font-semibold text-base leading-snug transition-all duration-300">
                                    <span class="text-slate-950 text-sm font-semibold">{{ title }}</span>
                                    <svg x-show="!open" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-500 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                    </svg>
                                    <svg x-show="open" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-500 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/>
                                    </svg>
                                </button>
                                <div x-show="open" x-collapse x-transition class="mt-2 text-gray-600 text-xs font-normal leading-relaxed">
                                    {{ desc }}
                                </div>
                            </div>
                        {% endwith %}
                    {% endwith %}
                {% endif %}
            {% endwith %}
        {% endwith %}
    {% endfor %}
</div>