{% extends 'teamer/layout.html.twig' %}

{% block title %}FAQ{% endblock %}

{% block content %}
    <h1 class="text-2xl font-bold pb-8">
        FAQ
    </h1>
    <div class="flex flex-col space-y-4">
        {% for faq in faqs %}
            <div {{ stimulus_controller('toggle', [], {'closed': 'hidden'}) }}>
                <div {{ stimulus_action('toggle', 'toggle', 'click') }} role="button" class="flex items-center space-x-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" {{ stimulus_target('toggle', 'icon') }}>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                    </svg>
                    <span class="flex-1 text-lg">{{ faq.question }}</span>
                </div>
                <div class="hidden" {{ stimulus_target('toggle', 'toggle') }}>
                    <div class="pl-8 pr-4 py-2">
                        {{ faq.answer|nl2br }}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}