{% extends "enap_designsystem/base.html" %}
{% load static wagtailcore_tags wagtailimages_tags %}

{% block title %}<title>{{ page.title }}</title>{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'enap_designsystem/semanadeinovacao.css' %}">
{% endblock %}

{% block content %}

<section>
    <div class="wrapper-flex">
        <div class="faq-container">
            <div class="faq-header">
                <h2 class="faq-title">{{ page.intro_title }}</h2>
                <h1 class="faq-subtitle">{{ page.intro_subtitle }}</h1>
            </div>

            <div class="faq-tabs">
                {% for tab_block in page.faq_tabs %}
                    <button class="faq-tab-button {% if forloop.first %}active{% endif %}"
                            onclick="openFaqTab(event, 'tab-{{ forloop.counter }}')">
                        {{ tab_block.value.tab_name }}
                    </button>
                {% endfor %}
            </div>

            {% for tab_block in page.faq_tabs %}
                <div id="tab-{{ forloop.counter }}" class="faq-tab-content {% if forloop.first %}active{% endif %}">
                    {% for faq_item in tab_block.value.faq_items %}
                        <div class="faq-accordion">
                            <button class="faq-accordion-button">
                                {{ faq_item.question }}
                                <span class="faq-accordion-icon">&#x25BC;</span>
                            </button>
                            <div class="faq-accordion-panel">
                                {{ faq_item.answer|richtext }}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
    </div>
</section>

{% include "enap_designsystem/semana_inovacao/faleconosco_semana.html" %}

<script>
    function openFaqTab(evt, tabId) {
        var i, tabcontent, tabbuttons;
        tabcontent = document.getElementsByClassName("faq-tab-content");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].classList.remove("active");
        }
        tabbuttons = document.getElementsByClassName("faq-tab-button");
        for (i = 0; i < tabbuttons.length; i++) {
            tabbuttons[i].classList.remove("active");
        }
        document.getElementById(tabId).classList.add("active");
        evt.currentTarget.classList.add("active");
    }

    document.addEventListener('DOMContentLoaded', function() {
        var accordions = document.getElementsByClassName("faq-accordion-button");
        for (var i = 0; i < accordions.length; i++) {
            accordions[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.maxHeight) {
                    panel.style.maxHeight = null;
                } else {
                    panel.style.maxHeight = panel.scrollHeight + "px";
                }
                var icon = this.querySelector(".faq-accordion-icon");
                icon.innerHTML = icon.innerHTML === "▼" ? "▲" : "▼";
            });
        }
    });
</script>

{% endblock %}