{% if form.has_background_image and form.has_background_image == 'true' %}
<style>
    :root {
        {% if form.background_image.image_desktop and form.background_image.image_desktop != '' %}
            --survey_bg_d: url({{global.path}}/{{form.background_image.image_desktop}});
        {% endif %}

        {% if form.background_image.image_tablet and form.background_image.image_tablet != '' %}
            --survey_bg_t: url({{global.path}}/{{form.background_image.image_tablet}});
        {% endif %}
        
        {% if form.background_image.image_mobile and form.background_image.image_mobile != '' %}
            --survey_bg_m: url({{global.path}}/{{form.background_image.image_mobile}});
        {% endif %}
    }
</style>
{% endif %}

<section class="survey-wrap">
    <div id="surveyForm" class="survey one {% if form.fourthSection.showQuestion == 'true' %}survey--fourSections{% endif %}">
        {% if form.title and form.title != '' %}
            <h3>{{form.title}}</h3>
        {% endif %}
        
        <ul id="pagination" class="pagination">
            {% if form.firstSection.showQuestion == 'true' %}
                <li class="pagination__item pagination__item--one"></li>
            {% endif %}

            {% if form.secondSection.showQuestion == 'true' %}
                <li class="pagination__item pagination__item--two"></li>
            {% endif %}

            {% if form.thirdSection.showQuestion == 'true' %}
                <li class="pagination__item pagination__item--three"></li>
            {% endif %}

            {% if form.fourthSection.showQuestion == 'true' %}
                <li class="pagination__item pagination__item--four"></li>
            {% endif %}
        </ul>
        <form class="boxes">
            <div class="box one {% if form.firstSection.allowMultiSelection == 'true' %} box--multiple-answer {% endif %}">
                <!-- <div class="pages">1 of 3</div> -->
                <h2 data-title="{{ form.firstSection.subject }}" class="question">
                    {{ form.firstSection.title }}

                    {% if form.firstSection.subtitle and form.firstSection.subtitle != '' %}
                        <small>{{form.firstSection.subtitle}}</small>
                    {% endif %}
                </h2>
                <ul class="answers" {% if form.firstSection.allowMultiSelection == "true" %} data-answer = "checkbox" {% elif form.firstSection.allowMultiSelection == "false" %} data-answer = "radio" {% endif %}>
                    {% for items in form.firstSection.firstSectionItems %}
                    <li class="answers__item {% if form.showItemsIllustration and form.showItemsIllustration == 'true' and  'empty' in items.image %}answers__item--label-over{% endif %}">
                        {% if form.showItemsIcon and form.firstSection.showItemsIcon == 'true' %} 
                        <svg class="icon icon--{{ form.firstSection.subject | lower }}">
                            <use xlink:href="svg/sprite.svg?rel={{timestamp}}#{{ items.value | upper }}" />
                        </svg>
                        {% endif %}

                        <input {% if form.firstSection.allowMultiSelection == "true" %} type="checkbox" {% elif form.firstSection.allowMultiSelection == "false" %} type="radio" {% endif %} value="{{ items.value }}" name="{{ form.firstSection.subject }}"
                            id="{{ form.firstSection.subject | replace(' ', '') }}{{ items.value | replace(' ', '') }}">
                        <label
                            for="{{ form.firstSection.subject | replace(' ', '') }}{{ items.value  | replace(' ', '')}}"
                            class="question-type-radio">

                            {% if form.showItemsIllustration and form.showItemsIllustration == 'true' and items.image != '' %}
                                <div class="label__img {% if 'empty' in items.image %}label__img--label-over{% endif %}">
                                    <picture>
                                        <source type="image/webp" srcset="{{global.path}}/{{items.image}}.webp?format=webp">
                                        <source type="image" srcset="{{global.path}}/{{items.image}}?format=webp">
                                        <img class="lazyload" data-src="{{global.path}}/{{items.image}}?format=webp" alt="">
                                    </picture>
                                    
                                    {% if form.firstSection.showTextOverImage == 'true' %}
                                        <span>{{ items.value }}</span>
                                    {% endif %}
                                </div>
                            {% endif %}

                            {% if form.firstSection.showTextOverImage == 'false' %}
                                <span>{{ items.value }}</span>
                            {% endif %}
                        </label>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="box two {% if form.secondSection.allowMultiSelection == 'true' %} box--multiple-answer {% endif %}">
                <!-- <div class="pages">2 of 3</div> -->
                <h2 data-title="{{ form.secondSection.subject }}" class="question">
                    {{ form.secondSection.title }}

                    {% if form.secondSection.subtitle and form.secondSection.subtitle != '' %}
                        <small>{{form.secondSection.subtitle}}</small>
                    {% endif %}
                </h2>

                <ul class="answers" {% if form.secondSection.allowMultiSelection == "true" %} data-answer = "checkbox" {% elif form.secondSection.allowMultiSelection == "false" %} data-answer = "radio" {% endif %}>
                    {% for items in form.secondSection.secondSectionItems %}
                    <li class="answers__item {% if form.showItemsIllustration and form.showItemsIllustration == 'true' and  'empty' in items.image %}answers__item--label-over{% endif %}">
                        <input {% if form.secondSection.allowMultiSelection == "true" %} type="checkbox" {% elif form.secondSection.allowMultiSelection == "false" %} type="radio" {% endif %} value="{{ items.value }}"
                            name="{{ form.secondSection.subject }}"
                            id="{{ form.secondSection.subject | replace(' ', '') }}{{ items.value | replace(' ', '') }}">

                        <label for="{{ form.secondSection.subject | replace(' ', '') }}{{ items.value | replace(' ', '') }}"
                            class="question-type-radio">

                            {% if form.showItemsIllustration and form.showItemsIllustration == 'true' and items.image != '' %}
                                <div class="label__img {% if 'empty' in items.image %}label__img--label-over{% endif %}">
                                    <picture>
                                        <source type="image/webp" srcset="{{global.path}}/{{items.image}}.webp?format=webp">
                                        <source type="image" srcset="{{global.path}}/{{items.image}}?format=webp">
                                        <img class="lazyload" data-src="{{global.path}}/{{items.image}}?format=webp" alt="">
                                    </picture>

                                    {% if form.secondSection.showTextOverImage == 'true' %}
                                        <span>{{ items.value }}</span>
                                    {% endif %}
                                </div>
                            {% endif %}
                              
                            {% if form.secondSection.showTextOverImage == 'false' %}
                                <span>{{ items.value }}</span>
                            {% endif %}
                        </label>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="box three {% if form.thirdSection.allowMultiSelection == 'true' %} box--multiple-answer {% endif %}">
                <!-- <div class="pages">3 of 3</div> -->
                <h2 data-title="{{ form.thirdSection.subject }}" class="question">
                    {{ form.thirdSection.title }}

                    {% if form.thirdSection.subtitle and form.thirdSection.subtitle != '' %}
                        <small>{{form.thirdSection.subtitle}}</small>
                    {% endif %}
                </h2>
                <ul class="answers" {% if form.thirdSection.allowMultiSelection == "true" %} data-answer = "checkbox" {% elif form.thirdSection.allowMultiSelection == "false" %} data-answer = "radio" {% endif %}>
                    {% for items in form.thirdSection.thirdSectionItems %}
                    <li class="answers__item {% if form.showItemsIllustration and form.showItemsIllustration == 'true' and  'empty' in items.image %}answers__item--label-over{% endif %}">
                        <input {% if form.thirdSection.allowMultiSelection == "true" %} type="checkbox" {% elif form.thirdSection.allowMultiSelection == "false" %} type="radio" {% endif %} value="{{ items.value }}"
                            name="{{ form.thirdSection.subject }}"
                            id="{{ form.thirdSection.subject }}{{loop.index}}">
                        <label for="{{ form.thirdSection.subject }}{{loop.index}}"
                            class="question-type-radio">

                            {% if form.showItemsIllustration and form.showItemsIllustration == 'true' and items.image != '' %}
                                <div class="label__img {% if 'empty' in items.image %}label__img--label-over{% endif %}">
                                    <picture>
                                        <source type="image/webp" srcset="{{global.path}}/{{items.image}}.webp?format=webp">
                                        <source type="image" srcset="{{global.path}}/{{items.image}}?format=webp">
                                        <img class="lazyload" data-src="{{global.path}}/{{items.image}}?format=webp" alt="">
                                    </picture>
                                    
                                    {% if form.thirdSection.showTextOverImage == 'true' %}
                                        <span>{{ items.value }}</span>
                                    {% endif %}
                                </div>
                            {% endif %}
                            
                            {% if form.thirdSection.showTextOverImage == 'false' %}
                                <span>{{ items.value }}</span>
                            {% endif %}
                        </label>
                    </li>
                    {% endfor %}
                </ul>
            </div>

            {% if form.fourthSection and form.fourthSection.allowMultiSelection == 'true' %}
            <div class="box four {% if form.fourthSection.allowMultiSelection == 'true' %} box--multiple-answer {% endif %}">
                <!-- <div class="pages">4 of 4</div> -->
                <h2 data-title="{{ form.fourthSection.subject }}" class="question">
                    {{ form.fourthSection.title }}

                    {% if form.fourthSection.subtitle and form.fourthSection.subtitle != '' %}
                        <small>{{form.fourthSection.subtitle}}</small>
                    {% endif %}
                </h2>

                <ul class="answers" {% if form.fourthSection.allowMultiSelection == "true" %} data-answer = "checkbox" {% elif form.fourthSection.allowMultiSelection == "false" %} data-answer = "radio" {% endif %}>
                    {% for items in form.fourthSection.fourthSectionItems %}
                    <li class="answers__item {% if form.showItemsIllustration and form.showItemsIllustration == 'true' and  'empty' in items.image %}answers__item--label-over{% endif %}">
                        <input {% if form.fourthSection.allowMultiSelection == "true" %} type="checkbox" {% elif form.fourthSection.allowMultiSelection == "false" %} type="radio" {% endif %} value="{{ items.value }}"
                            name="{{ form.fourthSection.subject }}"
                            id="{{ form.fourthSection.subject | replace(' ', '') }}{{ items.value | replace(' ', '') }}">
                        <label for="{{ form.fourthSection.subject | replace(' ', '') }}{{ items.value | replace(' ', '') }}"
                            class="question-type-radio">

                            {% if form.showItemsIllustration and form.showItemsIllustration == 'true' and items.image != '' %}
                                <div class="label__img {% if 'empty' in items.image %}label__img--label-over{% endif %}">
                                    <picture>
                                        <source type="image/webp" srcset="{{global.path}}/{{items.image}}.webp?format=webp">
                                        <source type="image" srcset="{{global.path}}/{{items.image}}?format=webp">
                                        <img class="lazyload" data-src="{{global.path}}/{{items.image}}?format=webp" alt="">
                                    </picture>

                                    {% if form.fourthSection.showTextOverImage == 'true' %}
                                        <span>{{ items.value }}</span>
                                    {% endif %}
                                </div>
                            {% endif %}
                                
                            {% if form.fourthSection.showTextOverImage == 'false' %}
                                <span>{{ items.value }}</span>
                            {% endif %}
                        </label>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
        </form>
    </div>
</section>