{% extends '@Contao/mod_faqpage.html.twig' %}

{% block content %}
    <div x-data="{ openPanel: null }">
        <div class="max-w-3xl mx-auto">

            <h1 class="text-center text-3xl leading-9 font-extrabold sm:text-4xl sm:leading-10">
                {{ 'faq.title'|trans({}, 'cms') }}
            </h1>

            {% for category in faq %}

                <article class="pb-6">

                    {% for faq in category.items %}

                        <div class="mt-6 border-t-2 border-gray-200 dark:border-gray-700 pt-6">
                            <dl>
                                <div>
                                    <dt class="text-lg leading-7">
                                        <button @click="openPanel = (openPanel === '{{ faq.alias }}' ? null : '{{ faq.alias }}')"
                                                class="text-left w-full flex justify-between items-start text-gray-400 focus:outline-none focus:text-gray-900"
                                                :aria-expanded="openPanel === '{{ faq.alias }}' ? true : false"
                                                id="{{ 'btn-'~faq.alias }}"
                                                aria-controls="{{ 'answer-'~faq.alias }}">
                                            <span class="font-medium text-gray-900 dark:text-gray-50">{{ faq.question|machine_translate }}</span>
                                            <span class="ml-6 h-7 flex items-center">
                                            <twig:ux:icon name="lucide:chevron-down" class="h-6 w-6 transform" x-bind:class="{ '-rotate-180': openPanel === '{{ faq.alias }}', 'rotate-0': openPanel !== '{{ faq.alias }}' }" />
                                        </span>
                                        </button>
                                    </dt>
                                    <dd class="mt-2 pr-12" x-show="openPanel === '{{ faq.alias }}'">
                                        <div class="prose text-gray-600 dark:text-gray-200 max-w-none"
                                             id="{{ 'answer-'~faq.alias }}"
                                             role="region"
                                             aria-labelledby="{{ 'btn-'~faq.alias }}">
                                            {{ faq.answer|insert_tag_raw|machine_translate }}
                                        </div>

                                        {% if faq.enclosure %}
                                            <ul class="enclosure">
                                                {% for enclsoure in faq.enclosure %}
                                                    <li class="download-element {{ 'ext-'~enclosure.extension }}">
                                                        <a href="{{ enclosure.href }}"
                                                           title="{{ enclosure.title }}">{{ enclosure.link }}
                                                            <span class="size">({{ enclosure.filesize }})</span>
                                                        </a>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        {% endif %}
                                    </dd>
                                </div>
                            </dl>
                        </div>
                    {% endfor %}

                </article>
            {% endfor %}

        </div>
    </div>
{% endblock %}