{% 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">
        {% if form.mainTitle and form.mainTitle != '' %}
            <h1>{{form.mainTitle}}</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 %}">
                <div class="pages">{% if form.thirdSection.showQuestion == 'true' %} 1 of 3 {% else %} 1 of 2 {% endif %}</div>
                <h2 data-title="{{ form.firstSection.subject | replace(' ', '') }}" 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">
                        <input {% if form.firstSection.allowMultiSelection == "true" %} type="checkbox" {% elif form.firstSection.allowMultiSelection == "false" %} type="radio" {% endif %} value="{{ items.value }}" name="{{ form.firstSection.subject | replace(' ', '') }}"
                            id="{{ (form.firstSection.subject | replace(' ', '')) + loop.index }}"
                            {% if form.firstSection.addAnswerToUrlParameters == "true" %} data-answer-param="true" {% endif %}
                            >
                        <label
                            for="{{ (form.firstSection.subject | replace(' ', '')) + loop.index }}"
                            class="question-type-radio">                            
                            {{ items.value }}
                        </label>
                    </li>
                    {% endfor %} 
                </ul>

                {% if form.firstSection.showDisclaimer == "true" %}
                    <p class="disclaimer">{{global.disclaimer}}</p>
                {% endif %}
            </div>
            <div class="box two {% if form.secondSection.allowMultiSelection == 'true' %} box--multiple-answer {% endif %}">
                <div class="pages"> {% if form.thirdSection.showQuestion == 'true' %} 2 of 3 {% else %} 2 of 2 {% endif %} </div>
                <h2 data-title="{{ form.secondSection.subject | replace(' ', '') }}" 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">
                        <input {% if form.secondSection.allowMultiSelection == "true" %} type="checkbox" {% elif form.secondSection.allowMultiSelection == "false" %} type="radio" {% endif %} value="{{ items.value }}"
                            name="{{ form.secondSection.subject | replace(' ', '') }}"
                            id="{{ (form.secondSection.subject | replace(' ', '')) + loop.index }}"
                            {% if form.secondSection.addAnswerToUrlParameters == "true" %} data-answer-param="true" {% endif %}
                            >
                        <label for="{{ (form.secondSection.subject | replace(' ', '')) + loop.index }}"
                            class="question-type-radio">
                            {{ items.value }}
                        </label>
                    </li>
                    {% endfor %}
                </ul>

                {% if form.secondSection.showDisclaimer == "true" %}
                  <p class="disclaimer">{{global.disclaimer}}</p>
                {% endif %}
            </div>
            {% if form.thirdSection.showQuestion == 'true' %}
            <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 | replace(' ', '') }}" 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">
                        <input {% if form.thirdSection.allowMultiSelection == "true" %} type="checkbox" {% elif form.thirdSection.allowMultiSelection == "false" %} type="radio" {% endif %} value="{{ items.value }}"
                            name="{{ form.thirdSection.subject | replace(' ', '') }}"
                            id="{{ (form.thirdSection.subject | replace(' ', '')) + loop.index }}"
                            {% if form.thirdSection.addAnswerToUrlParameters == "true" %} data-answer-param="true" {% endif %}
                            >
                        <label for="{{ (form.thirdSection.subject | replace(' ', '')) + loop.index }}"
                            class="question-type-radio">                            
                            {{ items.value }}
                        </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 = "",
                        ctaHref = global.mainBtn_link,
                        ctaTarget = "_self",
                        dataParam = 'true',
                        ctaParam = 'true',
                        ctaText = global.mainBtn,
                        ctaClass = 'nextStep nextStep--gradient',
                        hasIcon = 'false',
                        hideCta = 'false',
                        bgColor = form.cta.ctaBg_options.selected
                    )
                    }}
                {% endif %}
            </div>
            {% endif %}
            
        </form>
    </div>

    {% if form.sticky_cta_and_skip == 'false' %}
        {% if form.firstSection.allowMultiSelection == "true" or form.secondSection.allowMultiSelection == "true" and global.proceedBtn != '' %}
            <div id="proceedStep" class="btn hidden nextStep {% if form.cta.ctaBg_options.selected == 'solid' %}nextStep--solid{% elif form.cta.ctaBg_options.selected == 'gradient' %}nextStep--gradient{% endif %}">{{global.proceedBtn}}</div>
        {% endif %}

        {% 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 nextStep--gradient',
            hasIcon = 'false',
            hideCta = 'false',
            bgColor = ''
        )
        }}

        {% 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>