{%
    set c_down = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
    <path d="M16.218 17.218c1.794-1.794 2.782-4.18 2.782-6.718s-0.988-4.923-2.782-6.717-4.18-2.782-6.718-2.782-4.923 0.988-6.718 2.782-2.782 4.18-2.782 6.717 0.988 4.923 2.782 6.718 4.18 2.782 6.718 2.782 4.923-0.988 6.718-2.782zM1 10.5c0-4.687 3.813-8.5 8.5-8.5s8.5 3.813 8.5 8.5c0 4.687-3.813 8.5-8.5 8.5s-8.5-3.813-8.5-8.5z" fill="#000000"></path>
    <path d="M4 9c0-0.128 0.049-0.256 0.146-0.354 0.195-0.195 0.512-0.195 0.707 0l4.646 4.646 4.646-4.646c0.195-0.195 0.512-0.195 0.707 0s0.195 0.512 0 0.707l-5 5c-0.195 0.195-0.512 0.195-0.707 0l-5-5c-0.098-0.098-0.146-0.226-0.146-0.354z" fill="#000000"></path>
    </svg>'
 %}

{% set blockName = pimcore_relations("faq_list").getName() %}

<style>
    .fag-container[data-cols="{{ blockName }}"]{
        grid-template-columns: repeat({{ pimcore_input('faq_cols').isEmpty() ? 0: pimcore_input('faq_cols').getData() }} , 1fr);
    }
    @media (max-width: 768px) {
        .fag-container[data-cols="{{ blockName }}"] {
            grid-template-columns: repeat(1, 1fr);
        }
    }
</style>

<div class="block faq aniview {{ blockName }}" data-av-animation="slideInRight" data-type="faqblock" id="{{ blockName }}">
        <h2 class="mt-lg-2 mb-lg-1 p-lg-2 text-center" id="{{ pimcore_input('faq_id').getData() }}">{{ pimcore_input('faq_title')}}</h2>
            <div class="row fag-container container " data-cols="{{ blockName }}">
            {% for element in pimcore_relations("faq_list") %}

                {%  if element.getType() == 'object' %}
                    {%  set classname = element.getO_ClassName() %}

                    {%  if classname == 'IULNXTFAQ' %}
                        <div class="question" data-type="faqitem" id="{{ faq_element.getID() }}">
                            <h4>
                                {{ element.getTitle() }} <span class="collapse-state"> {{ c_down | raw }}</span>
                            </h4>
                            <div class="faq-body">
                                {{ element.getContent() | raw }}

                                {%  if element.getExternUrl() != "" %}
                                    {{  pimcore_inc(element.getExternUrl()) }}
                                {%  endif %}
                            </div>
                        </div>
                    {%  endif %}

                    {%  if classname == 'FAQ' %}
                        <div class="question" data-type="faqitem" id="faq_{{ element.getID() }}">
                            <h4>
                                {{ element.getFAQ_Title() }} <span class="collapse-state"> {{ c_down | raw }}</span>
                            </h4>
                            <div class="faq-body">
                                {{ element.getFAQ_Content()  | raw }}
                                {%  if element.getFaq_ExternUrl() != "" %}
                                    {{  pimcore_inc(element.getFaq_ExternUrl()) }}
                                {%  endif %}
                            </div>
                        </div>

                    {%  endif %}
                {% endif %}

                {%  if element.getType() == 'folder' %}
                        Wird aktuell nicht unterstützt
                {% endif %}
            {% endfor %}
        </div>
</div>