{% extends '@IDEALContent/layout.html.twig' %}

{% block content %}

    <!------------------------- Header ---------------------------->

    <div class="stage">
        <div class="container">
            <div class="stripe top animate"></div>
            {{ pimcore_image("image",{
                "thumbnail": "IULNXTAppHeader",
            }) }}

            <h1 style="white-space: nowrap"><span class="capital">IDEAL</span> {{ pimcore_input("stage-headline-top",{
                    "placeholder": "Thema"
                }) }}</h1>
            <h2>{{ pimcore_input("stage-headline-sub",{
                "placeholder": "Sub"
            }) }}</h2>
            <div class="stripe bottom">
                    {{ pimcore_areablock("menu", {
                        "allowed": ["menu"]
                    }) }}
            </div>
        </div>
    </div>
    <div class="container">
        {{ pimcore_areablock("content", {
            "sorting": ["intro", "content","faqlist", "iframe","extern","custom","faq"],
            "params": {
                "faq": {
                    "forceEditInView": false
                },
            }
        }) }}
    </div>

    <script>

        $(document).ready(function() {

            var active =  null;


            $(".question h4").on("click", function(e) {

                $(this).parents(".question").find(".faq-body").toggle();
                $(this).children(".collapse-state").toggleClass("active");

                if (active !== null && !$(this).is(active)) {
                    active.parent(".question").find(".faq-body").hide();
                    active.children(".collapse-state").removeClass("active");
                }

                active = $(this);
            });
        })
    </script>

{% endblock %}