{% load i18n wagtailcore_tags %}

<style>
	details[open] .rotate-icon {
		transform: rotate(180deg);
	}
</style>


<div class="space-y-4">
    {% if faq_items %}
        <div class="space-y-2">
            {% for faq in faq_items %}
                <details class="group border-2 border-base-300 rounded-md">
                    <summary class="cursor-pointer flex items-center justify-between p-4 hover:bg-gray-50 rounded-md">
                        <span class="font-medium">{{ faq.question }}</span>
                        <svg class="w-5 h-5 transition-transform duration-200 rotate-icon" stroke="currentColor" viewBox="0 0 24 24">
                            <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </summary>
                    <div class="p-3 bg-base-200 rounded-b-md">
                        {{ faq.answer|richtext }}
                    </div>
                </details>
            {% endfor %}
        </div>
        
        {% if self.show_view_all_link and faq_page_url %}
            <div class="mt-6">
                <a href="{{ faq_page_url }}" class="text-blue-600 hover:underline">
                    {% trans "View All FAQs" %} →
                </a>
            </div>
        {% endif %}
    {% else %}
        <p class="text-gray-500">{% trans "No FAQs available." %}</p>
    {% endif %}
</div>