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

<section class="survey-wrap">
    <div id="surveyForm" class="survey one">
        {% if form.title and form.title != '' %}
            <h3>{{form.title}}</h3>
        {% endif %}

        {% if global.survey_version_options.selected == 'redesign' %}
        <div id="pagination" class="pagination"></div>
        {% endif %}

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

                <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.firstSection.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>

                <div class="footer">
                    {% if form.firstSection.allowMultiSelection == "true" and global.proceedBtn != '' %}
                        <div class="btn hidden" data-proceed-step>{{global.proceedBtn}}</div>
                    {% endif %}
          
                    <!-- <a class="skip" data-param href="{{global.mainBtn_link}}" class="skip">{{form.skip}}</a> -->
                </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>
                    
                    {% if form.secondSection.allowMultiSelection == "true" and global.proceedBtn != '' %}
                        <div class="btn nextStep nextStep--gradient hidden" data-proceed-step>{{global.proceedBtn}}</div>
                    {% endif %}
                {% endif %}

                <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.secondSection.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>
            </div>
            <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>
                    
                    {% from "../_CTABtn/_CTABtn.html" import CTA %}
                    {{ CTA (
                        wrapCTA = false,
                        ctaID = "",
                        ctaHref = global.mainBtn_link,
                        ctaTarget = "_self",
                        dataParam = 'true',
                        ctaParam = 'true',
                        newDataParamValue = '',
                        ctaText = global.mainBtn,
                        ctaClass = 'nextStep',
                        hasIcon = 'false',
                        hideCta = 'false',
                        bgColor = form.cta.ctaBg_options.selected
                        )
                    }}
                {% endif %}

                <h2 data-title="{{ form.thirdSection.title }} {{ form.thirdSection.productName }}" class="question">
                    {{ form.thirdSection.title }} <span>{{ form.thirdSection.productName }}</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.thirdSection.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>
            </div>
        </form>
    </div>
    {% if global.survey_version_options.selected == 'recode' %}
        <div class="skip-wrap container">
            {% 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 = ''
                )
            }}    
        </div>
    {% endif %}
</section>