{% 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 %}
<script>
    const tcr_enable = {{global.tcr.enable}};
    const tcr_src = "{{global.tcr.src}}";
</script>

<section class="survey-wrap">
    <div class="survey {% if global.survey_version_options.selected == 'staggered' %} survey--staggered {% elif global.survey_version_options.selected == 'bordered' %} survey--bordered {% endif %}">
        {% if global.survey_version_options.selected == 'redesign' %}
        <div id="pagination" class="pagination"></div>
        {% endif %}

        {% if global.survey_version_options.selected == 'staggered' %}
            <div class="question-counter">
                <span class="current-question-index">1</span>
                of
                {% if form.thirdSection.showQuestion == "true" %}
                    3
                {% else %}
                    2
                {% endif %}
            </div>
        {% endif %}

        {% if global.survey_version_options.selected == 'bordered' %}
            <div class="survey__pagination {% if form.thirdSection.showQuestion == 'false' %} survey__pagination--2Sections {% endif %}">
                <div class="survey__pagination-wrapper">
                    {% if global.survey_version_options.selected == 'bordered' %}
                        {% from "../_CTABtn/_CTABtn.html" import CTA %}
                        {{ CTA (
                            wrapCTA = false,
                            ctaID = "",
                            ctaHref = global.mainBtn_link,
                            ctaTarget = "_self",
                            dataParam = 'true',
                            ctaParam = 'true',
                            ctaText = form.skip,
                            ctaClass = 'skip',
                            hasIcon = 'false',
                            hideCta = 'false',
                            bgColor = ''
                            )
                        }}
                    {% endif %}
                    <div class="survey__progress"></div>
                </div>
                <div class="question-counter">
                    <span class="current-question-index">1</span>
                    of
                    {% if form.thirdSection.showQuestion == "true" %}
                        3
                    {% else %}
                        2
                    {% endif %}
                </div>
            </div>
        {% endif %}

        {% if form.title and form.title != '' %}
            <h1 class="survey__title">{{form.title}}</h1>
        {% endif %}
        <form class="boxes one {% if form.thirdSection.showQuestion == 'false' %}boxes--2Sections{% endif %}">
            <div class="box one {% if form.firstSection.allowMultiSelection == 'true' %} box--multiple-answer {% endif %} seen-question">
                {% if global.survey_version_options.selected == 'recode' %}
                <div class="pages">1 of 3</div>
                {% endif %}

                <div class="box__inner">
                    <h2 data-title="{{ form.firstSection.subject }}" class="question">{{ form.firstSection.title }}</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.firstSectionItems %}
                        <li class="answers__item">
                            <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 }}{{ loop.index }}">
                            <label
                                for="{{ form.firstSection.subject }}{{ loop.index }}"
                                class="label">
                                {% if form.showItemsIllustration and form.showItemsIllustration == 'true' %}
                                <div class="label__img">
                                    <picture>
                                        <source type="image/webp" srcset="{{global.path}}/{{items.image}}.webp?format=webp">
                                        <source type="image" srcset="{{global.path}}/{{items.image}}?format=webp">
                                        <img src="{{global.path}}/{{items.image}}?format=webp" alt="{{form.firstSection.subject}} {{items.value}} Representation"/>
                                   </picture>
                                </div>
                                <span class="label__value">
                                {% endif %}
                                    {{ items.value }}
                                {% if form.showItemsIllustration and form.showItemsIllustration == 'true' %}
                                </span>
                                {% endif %}
                            </label>
                        </li>
                        {% endfor %}
                    </ul>
    
                    {% if form.firstSection.showDisclaimer == "true" %}
                        <p class="disclaimer">{{global.disclaimer}}</p>
                    {% endif %}
    
                    {% if form.sticky_cta_and_skip == 'false' %}
                        {% if form.firstSection.allowMultiSelection == "true" and global.proceedBtn != '' %}
                            {% from "../_CTABtn/_CTABtn.html" import CTA %}
                            {{ CTA (
                                wrapCTA = false,
                                ctaID = "proceedStep",
                                ctaHref = '',
                                ctaTarget = "",
                                dataParam = 'false',
                                ctaParam = 'false',
                                ctaText = global.proceedBtn,
                                ctaClass = 'nextStep',
                                hasIcon = 'false',
                                hideCta = 'true',
                                bgColor = form.cta.ctaBg_options.selected
                            )
                            }}
                        {% endif %}
                    {% endif %}
                </div>

            </div>
            <div class="box two {% if form.secondSection.allowMultiSelection == 'true' %} box--multiple-answer {% endif %}">
                {% if global.survey_version_options.selected == 'recode' %}
                <div class="pages">2 of 3</div>
                {% endif %}

                <div class="box__inner">
                    <h2 data-title="{{ form.secondSection.subject }}" class="question">{{ form.secondSection.title }}</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.secondSectionItems %}
                        <li class="answers__item {% if form.showItemsIllustration and form.showItemsIllustration == 'true' and 'blank' 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 }}{{ loop.index }}">
                            <label for="{{ form.secondSection.subject }}{{ loop.index }}"
                                class="label">
                                {% if form.showItemsIllustration and form.showItemsIllustration == 'true' %}
                                <div class="label__img">
                                    <picture>
                                        <source type="image/webp" srcset="{{global.path}}/{{items.image}}.webp?format=webp">
                                        <source type="image" srcset="{{global.path}}/{{items.image}}?format=webp">
                                        <img src="{{global.path}}/{{items.image}}?format=webp" alt="{{form.secondSection.subject}} {{items.value}} Representation"/>
                                   </picture>
                                </div>
                                <span class="label__value">
                                {% endif %}
                                    {{ items.value }}
                                {% if form.showItemsIllustration and form.showItemsIllustration == 'true' %}
                                </span>
                                {% endif %}
                            </label>
                        </li>
                        {% endfor %}
                    </ul>
    
                    {% if form.secondSection.showDisclaimer == "true" %}
                        <p class="disclaimer">{{global.disclaimer}}</p>
                    {% endif %}
    
                    {% if form.sticky_cta_and_skip == 'false' %}
                        {% if form.thirdSection.showQuestion == "true" and form.secondSection.allowMultiSelection == "true" and global.proceedBtn != '' %}
                            {% from "../_CTABtn/_CTABtn.html" import CTA %}
                            {{ CTA (
                                wrapCTA = false,
                                ctaID = "proceedStep",
                                ctaHref = '',
                                ctaTarget = "",
                                dataParam = 'false',
                                ctaParam = 'false',
                                ctaText = global.proceedBtn,
                                ctaClass = 'nextStep',
                                hasIcon = 'false',
                                hideCta = 'true',
                                bgColor = form.cta.ctaBg_options.selected
                            )
                            }}
                        {% endif %}
    
                        {% if form.thirdSection.showQuestion != "true" %}
                            {% from "../_CTABtn/_CTABtn.html" import CTA %}
                            {{ CTA (
                                wrapCTA = false,
                                ctaID = "nextStep",
                                ctaHref = global.mainBtn_link,
                                ctaTarget = "_self",
                                dataParam = 'true',
                                ctaParam = 'true',
                                ctaText = global.mainBtn,
                                ctaClass = 'nextStep',
                                hasIcon = 'false',
                                hideCta = 'false',
                                bgColor = form.cta.ctaBg_options.selected
                            )
                            }}
                        {% endif %}
                    {% endif %}
                </div>

            </div>

            {% if form.thirdSection.showQuestion == "true" %}
            <div class="box three {% if form.thirdSection.allowMultiSelection == 'true' %} box--multiple-answer {% endif %}">
                {% if global.survey_version_options.selected == 'recode' %}
                <div class="pages">3 of 3</div>
                {% endif %}

                <div class="box__inner">
                    <h2 data-title="{{ form.thirdSection.title }} {{ form.thirdSection.newLineText }}" class="question">
                        {{ form.thirdSection.title }} <span>{{ form.thirdSection.newLineText }}</span>
                    </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.thirdSectionItems %}
                        <li class="answers__item {% if form.showItemsIllustration and form.showItemsIllustration == 'true' and 'blank' 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="label">
                                {% if form.showItemsIllustration and form.showItemsIllustration == 'true' %}
                                <div class="label__img">
                                    <picture>
                                        <source type="image/webp" srcset="{{global.path}}/{{items.image}}.webp?format=webp">
                                        <source type="image" srcset="{{global.path}}/{{items.image}}?format=webp">
                                        <img src="{{global.path}}/{{items.image}}?format=webp" alt="{{form.thirdSection.subject}} {{items.value}} Representation"/>
                                   </picture>
                                </div>
                                <span class="label__value">
                                {% endif %}
                                    {{ items.value }}
                                {% if form.showItemsIllustration and form.showItemsIllustration == 'true' %}
                                </span>
                                {% endif %}
                            </label>
                        </li>
                        {% endfor %}
                    </ul>
    
                    {% if form.thirdSection.showDisclaimer == "true" %}
                        <p class="disclaimer">{{global.disclaimer}}</p>
                    {% endif %}
    
                    {% if form.sticky_cta_and_skip == 'false' %}
                        {% from "../_CTABtn/_CTABtn.html" import CTA %}
                        {{ CTA (
                            wrapCTA = false,
                            ctaID = "nextStep",
                            ctaHref = global.mainBtn_link,
                            ctaTarget = "_self",
                            dataParam = 'true',
                            ctaParam = 'true',
                            ctaText = global.mainBtn,
                            ctaClass = 'nextStep',
                            hasIcon = 'false',
                            hideCta = 'false',
                            bgColor = form.cta.ctaBg_options.selected
                        )
                        }}
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </form>
    </div>
</section>