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

<section class="survey-wrap">
    <div id="surveyForm" class="survey one">
        {% if global.survey_version_options.selected == 'redesign' %}
        <div id="pagination" class="pagination"></div>
        {% endif %}
        <form class="boxes">
            <div class="box one">
                <div class="pages">1 of 3</div>
                <h2 data-title="{{ form.firstSection.subject | replace(' ', '') }}" class="question">{{ form.firstSection.title }}</h2>
                <ul class="answers">
                    {% for items in form.firstSection.firstSectionItems %}
                    {% if items.setAsUniqueImage and items.setAsUniqueImage == 'true' and keepLooping != 'false' %}
                    <li class="answers__image">
                        <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="Illustration of {{ form.firstSection.subject | replace(' ', '') }} {{ items.value }}">
                        </picture>
                    </li>
                    {% set keepLooping = 'false' %}
                    {% endif %}
                    {% endfor %}
                    {% for items in form.firstSection.firstSectionItems %}
                    <li class="answers__item">
                        {% if form.showItemsIcon and form.firstSection.showItemsIcon == 'true' %} 
                        <svg class="icon icon--{{ form.firstSection.subject | replace(' ', '') | lower }}">
                            <use xlink:href="svg/sprite.svg?rel={{timestamp}}#{{ items.value | upper }}" />
                        </svg>
                        {% endif %}

                        <input type="radio" value="{{ items.value }}" name="{{ form.firstSection.subject | replace(' ', '') }}"
                            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' %}
                                <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="Illustration of {{ form.firstSection.subject | replace(' ', '') }} {{ items.value }}">
                                </picture>
                                <span>
                            {% endif %}
                            {{ items.value }}
                            {% if form.showItemsIllustration and form.showItemsIllustration == 'true' %}
                                </span>
                            {% endif %}
                        </label>
                    </li>
                    {% endfor %}
                </ul>
                {% if global.survey_version_options.selected == 'recode-fnPl01' %}
                    {% 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 skip--box',
                            hasIcon = 'false',
                            hideCta = 'false',
                            bgColor = ''
                        )
                    }}
                {% endif %}
            </div>
            <div class="box two">
                <div class="pages">2 of 3</div>
                <h2 data-title="{{ form.secondSection.subject | replace(' ', '') }}" class="question">{{ form.secondSection.title }}</h2>

                <ul class="answers">
                    {% for items in form.secondSection.secondSectionItems %}
                    {% if items.setAsUniqueImage and items.setAsUniqueImage == 'true' %}
                    <li class="answers__image">
                        <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="Illustration of {{ form.secondSection.subject | replace(' ', '') }} {{ items.value }}">
                        </picture>
                    </li>
                    {% endif %}
                    {% endfor %}
                    {% for items in form.secondSection.secondSectionItems %}
                    <li class="answers__item">
                        <input type="radio" value="{{ items.value }}"
                            name="{{ form.secondSection.subject | replace(' ', '') }}"
                            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' %}
                                <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="Illustration of {{ form.secondSection.subject | replace(' ', '') }} {{ items.value }}">
                                </picture>
                                <span>
                            {% endif %}
                            {{ items.value }}
                            {% if form.showItemsIllustration and form.showItemsIllustration == 'true' %}
                                </span>
                            {% endif %}
                        </label>
                    </li>
                    {% endfor %}
                </ul>

                {% if global.survey_version_options.selected == 'recode-fnPl01' %}
                    {% 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 skip--box',
                            hasIcon = 'false',
                            hideCta = 'false',
                            bgColor = ''
                        )
                    }}
                {% endif %}
            </div>
            <div class="box three">
                <div class="pages">3 of 3</div>
                <h2 data-title="{{ form.thirdSection.title }} {{ form.thirdSection.productName }}" class="question">
                    {{ form.thirdSection.title }} <span>{{ form.thirdSection.productName }}</span>?
                </h2>
                <ul class="answers">
                    {% for items in form.thirdSection.thirdSectionItems %}
                    {% if items.setAsUniqueImage and items.setAsUniqueImage == 'true' %}
                    <li class="answers__image">
                        <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="Illustration of {{ form.thirdSection.subject | replace(' ', '') }} {{ items.value }}">
                        </picture>
                    </li>
                    {% endif %}
                    {% endfor %}
                    {% for items in form.thirdSection.thirdSectionItems %}
                    <li class="answers__item">
                        <input type="checkbox" value="{{ items.value }}"
                            name="{{ form.thirdSection.subject | replace(' ', '') }}"
                            id="{{ form.thirdSection.subject | replace(' ', '') }}{{loop.index}}">
                        <label for="{{ form.thirdSection.subject | replace(' ', '') }}{{loop.index}}"
                            class="question-type-radio">
                            {% if form.showItemsIllustration and form.showItemsIllustration == 'true' %}
                                <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="Illustration of {{ form.thirdSection.subject | replace(' ', '') }} {{ items.value }}">
                                </picture>
                                <span>
                            {% endif %}
                            {{ items.value }}
                            {% if form.showItemsIllustration and form.showItemsIllustration == 'true' %}
                                </span>
                            {% endif %}
                        </label>
                    </li>
                    {% endfor %}
                </ul>

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

                {% if global.survey_version_options.selected == 'recode-fnPl01' %}
                    {% 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 skip--box',
                            hasIcon = 'false',
                            hideCta = 'false',
                            bgColor = ''
                        )
                    }}
                {% endif %}
            </div>
        </form>
    </div>

    {% if global.survey_version_options.selected != 'redesign' %}
        {% 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 skip--section',
                hasIcon = 'false',
                hideCta = 'false',
                bgColor = ''
            )
        }}    
    {% endif %}
</section>

{% if global.survey_version_options.selected == 'redesign' %}
    {% 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 %}