{% load css_tags %}{% block_css 'enap_designsystem/blocks/faq_busca.css' %}
{% load wagtailcore_tags %}

<section class="faq-busca" id="faq-categoria-{{ value.id }}">
    <div class="faq-busca__container">
        <div class="faq-busca__faq-grupo">
            <h3 class="faq-busca__nome-categoria">{{ value.nome_categoria }}</h3>

            {% if value.titulos %}
                <div class="faq-busca__titulos-nav">
                    {% for titulo_block in value.titulos %}
                        {% if titulo_block.block_type == 'titulo' %}
                            <button
                                type="button"
                                class="faq-busca__titulo-btn"
                                data-faq-titulo-target="faq-categoria-{{ value.id }}-titulo-{{ forloop.counter }}"
                            >
                                {{ titulo_block.value.titulo }}
                            </button>
                        {% endif %}
                    {% endfor %}
                </div>

                {% for titulo_block in value.titulos %}
                    {% if titulo_block.block_type == 'titulo' %}
                        {% with titulo=titulo_block.value %}
                        <div
                            class="faq-busca__titulo-grupo"
                            id="faq-categoria-{{ value.id }}-titulo-{{ forloop.counter }}"
                        >
                            <h4 class="faq-busca__titulo-nome">{{ titulo.titulo }}</h4>

                            <div class="faq-busca__perguntas">
                                {% for pergunta_block in titulo.perguntas %}
                                    {% if pergunta_block.block_type == 'pergunta' %}
                                        {% with pergunta=pergunta_block.value %}
                                        <div class="faq-busca__item" data-faq-item>
                                            <button
                                                type="button"
                                                class="faq-busca__pergunta"
                                                aria-expanded="false"
                                                data-faq-toggle
                                            >
                                                <span class="faq-busca__pergunta-texto" data-faq-pergunta>{{ pergunta.pergunta }}</span>
                                                <i class="fa-solid fa-chevron-down faq-busca__pergunta-icone"></i>
                                            </button>
                                            <div class="faq-busca__resposta-wrapper">
                                                <div class="faq-busca__resposta" data-faq-resposta>
                                                    {{ pergunta.resposta|richtext }}
                                                </div>
                                            </div>
                                        </div>
                                        {% endwith %}
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                        {% endwith %}
                    {% endif %}
                {% endfor %}
            {% endif %}
        </div>
    </div>
</section>

<script>
(function() {
    var root = document.getElementById('faq-categoria-{{ value.id }}');
    if (!root || root.dataset.faqInitialized) {
        return;
    }
    root.dataset.faqInitialized = 'true';

    var items = root.querySelectorAll('[data-faq-item]');
    var tituloBtns = root.querySelectorAll('[data-faq-titulo-target]');

    function setItemOpen(item, open) {
        var button = item.querySelector('[data-faq-toggle]');
        var icon = item.querySelector('.faq-busca__pergunta-icone');
        button.setAttribute('aria-expanded', open ? 'true' : 'false');
        item.classList.toggle('is-open', open);
        if (icon) {
            icon.style.transform = open ? 'rotate(180deg)' : 'rotate(0deg)';
        }
    }

    items.forEach(function(item) {
        var button = item.querySelector('[data-faq-toggle]');
        button.addEventListener('click', function() {
            setItemOpen(item, button.getAttribute('aria-expanded') !== 'true');
        });
    });

    tituloBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var targetId = btn.getAttribute('data-faq-titulo-target');
            var target = document.getElementById(targetId);
            if (!target) {
                return;
            }
            root.querySelectorAll('.faq-busca__titulo-btn').forEach(function(b) {
                b.classList.remove('is-active');
            });
            btn.classList.add('is-active');
            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
    });
})();
</script>