<% screen.content.forEach(function(item, contentItemIndex) { %>

    <% if (item.hidden) { return } %>

    <% if (item['show-condition']) {
        let showCondition = evaluateFunction(item['show-condition'], user_properties);
        if (!showCondition) {
            return;
        }
    } %>

    <% if (item['visible'] == 'false' || item['visible'] == 'hide') {
        return;
    } %>

    <% if (item.type=='html' ) { %>
        <div class="<%- item.class %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%- item.style %>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <%- __(item.content) %>
        </div>
    <% } %>
    <% if (item.type=='js-script' ) { %>
        <% if (getParams('edit_mode') == 1) { %>
        <div class="container-type container-type-js-script <%- item.class || '' %>" style="background: #f0f0f0; padding: 10px; border-radius: 4px; border-left: 3px solid #f39c12; <%- item.style || '' %>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div style="display: flex; align-items: center; gap: 8px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f39c12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="16 18 22 12 16 6"></polyline>
                    <polyline points="8 6 2 12 8 18"></polyline>
                </svg>
                <strong style="color: #f39c12;">JS Code</strong>
                <span style="color: #666; font-size: 12px;">(executes after <%- item.timeout || 100 %>ms)</span>
            </div>
            <% if (item.content && item.content.length > 0) { %>
                <pre style="margin: 8px 0 0 0; padding: 8px; background: #fff; border-radius: 3px; font-size: 11px; max-height: 100px; overflow: auto;"><code><%- item.content.substring(0, 200) %><% if (item.content.length > 200) { %>...<% } %></code></pre>
            <% } %>
        </div>
        <% } else { %>
        <script data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
        setTimeout(function(){
            (function(){
                <%- item.content %>
            })();
        }, <%- item.timeout || 100 %>);
        </script>
        <% } %>
    <% } %>
    <% if (item.type=='progress-bar-cards' ) { %>

        <div class="creating__slider swiper container <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-progress-bar-cards style="<%-item.style%>" data-swiper data-slides-per-view="auto" data-on-progress-end="<%- item.on_progress_end || '' %>" data-block-area-index="<%-contentItemIndex%>" data-delay="<%-item['Delay in Miliseconds'] || 3000%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="creating__wrapper swiper-wrapper">
                <% item.options.forEach(function(option, index) { %>
                    <div class="creating__slide_auto swiper-slide">
                            <div class="counter-quiz__round">
                                <svg  xmlns="http://www.w3.org/2000/svg" class="svg1" width="142" height="142" viewBox="0 0 142 142">
                                    <circle data-progress-el="circle" data-progress-percent="<%- option.percent %>" cx="71" cy="71" r="67" fill="none" stroke-width="10" stroke-linecap="round" />
                                </svg>

                                <svg width="16" height="16" class="svg2" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_6999_2365)">
                                    <path d="M2.66663 8.04444L7.72218 12.6667L14.2222 4" stroke="#68D734" stroke-width="2.4"/>
                                    </g>
                                    <defs>
                                    <clipPath id="clip0_6999_2365">
                                    <rect width="16" height="16" rx="8" fill="white"/>
                                    </clipPath>
                                    </defs>
                                </svg>
                            </div>
                            <div class="counter-quiz__title">
                                <%- option.title %>
                            </div>
                            <div class="counter-quiz__number" data-progress-el="number">
                                0%
                            </div>
                            <div class="counter-quiz__text">
                                <%- __(option.text) %>
                            </div>
                    </div>
                <% }) %>
            </div>
        </div>

    <% } %>

    <% if (item.type=='title' ) { %>
        <h4 class="title <%- item.class %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%- item.style %>" data-block-area-index="<%-contentItemIndex%>" <%- item.attrs || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <%- __(item.content) %>
        </h4>
    <% } %>

    <% if (item.type == 'express-checkout') { %>
        <div class="<% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" id="express-checkout-element-container" style="<%- item.style || '' %>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div id="express-checkout-element" class="express-checkout-element <%-(item.class || '')%>" style="<%-(item.style || '')%>"  data-apple-pay-product-info="<%-item['apple_pay_product_info']%>" data-request-shipping="<%-item.request_shipping || ''%>" data-options='<%-JSON.stringify(item.options) || ''%>' data-oncancel="<%-item.oncancel || ''%>" data-oncancel-url="<%-item.oncancel_url || ''%>"
                 data-phone-number-required="<%-item.phoneNumberRequired || ''%>"
                 data-billing-address-required="<%-item.billingAddressRequired || ''%>">
                <%-item.content%>
            </div>

            <% if (item['Fallback Button Text']) {%>
            <%- TemplateManager.renderTemplate('screen-content', {screen: {
                    content: [
                        {
                            "type": "pay-button",
                            "content": item['Fallback Button Text'],
                            "attrs": "data-express-fallback-btn",
                            //"style": "display: none",
                            "pay_button_onclick": item.pay_button_onclick,
                            'icon': " "
                        }
                    ]
                }}) %>
            <%} %>

            <% if (item['Other payment methods Button Text']) {%>
            <%- TemplateManager.renderTemplate('screen-content', {screen: {
                    content: [
                        {
                            "type": "pay-button",
                            "content": item['Other payment methods Button Text'],
                            "attrs": "data-express-other-payments-btn",
                            "class": "button-inverted",
                            "style": "display: none",
                            "pay_button_onclick": item.pay_button_onclick,
                            'icon': " "
                        }
                    ]
                }}) %>
            <%} %>

            <div class="creating__spinner" style="margin: 0; display: none;" id="express-checkout-element-spinner">
                <svg class="creating__spinner-icon " viewBox="25 25 50 50">
                    <circle class="loader-path" cx="52" cy="52" r="20" fill="none" stroke="#70c542" stroke-width="4"></circle>
                </svg>
            </div>
        </div>
    <% } %>
    <% if (item.type == 'paddle-form') { %>
            <div id="payment-form" style="" class="paddle-form <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-form-settings='<%-JSON.stringify(item['paddle-form-settings']) || ''%>' data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> >

            </div>
    <% } %>

    <% if (item.type == 'primer-form') { %>
        <% if (getParams('edit_mode') && ['primer', 'hubx'].indexOf(window?.paywall?.payment_system) == -1) { %>
            <div class="payment-system-error <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>">
                Change 'Main Payment system' in Paywall Settings to Primer to use this block
            </div>
        <% } %>

        <%
            let primerFormOptions = '{}';
            if (item['form-options']) {
                try {
                    primerFormOptions = JSON.stringify(item['form-options']);
                } catch (e) { /* Do nothing, keep default empty JSON */ }
            }
        %>
        <div id="primer-form" class="type-primer-form <%- (item.class || '') %>" style="<%- (item.style || '') %>" data-form-options='<%- JSON.stringify(item["form-options"]) || "" %>'  data-payment-failed-actions='<%- escapeHtmlForAttribute(JSON.stringify(item["payment_failed_actions"]) || "") %>' data-block-area-index="<%-contentItemIndex%>" ></div>
    <% } %>
    <% if (item.type == 'stripe-embedded-form') { %>
    <div id="stripe-embedded-form" style="" class="stripe-form <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> ></div>
    <% } %>

    <% if (item.type == 'hubx-form') { %>
    <div id="hubx-form" class="hubx-form <%-(item.class || '')%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-(item.style || '')%>" data-form-options='<%-JSON.stringify(item['form-options']) || ''%>' data-block-area-index="<%-contentItemIndex%>"  data-payment-failed-actions='<%- escapeHtmlForAttribute(JSON.stringify(item["payment_failed_actions"]) || "") %>' <%- item.attributes || '' %> ></div>
    <% } %>

    <% if (item.type == 'solidgate-form') { %>
    <div id="solidgate-form" class="solidgate-form <%-(item.class || '')%>" style="<%-(item.style || '')%>" data-form-options='<%-JSON.stringify(item['form-options']) || ''%>' data-form-styles='<%- JSON.stringify(item['formStyles'] || '') %>' data-form-params='<%- JSON.stringify(item['formParams'] || '') %>' data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> ></div>
    <% } %>

    <% if (item.type == 'stripe-form') {%>
        <form id="payment-form" style="<%- item.class || '' %>" class="<%- item.class || '' %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-paypal-mode="<%-item.PayPal_Mode%>" data-form-mode="<%-item['form-mode']%>" data-apple-pay-product-info="<%-item['apple_pay_product_info']%>" data-form-options='<%-JSON.stringify(item['form-options']) || ''%>' data-form-appearance='<%-JSON.stringify(item['form-appearance']) || ''%>' data-auto-fill-billing-from-ip="<%- item['auto_fill_billing_from_ip'] || '' %>" data-custom-terms="<%- item['custom_terms'] ? 'true' : '' %>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- item.show_on_answer >= 0 ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="form-loading">
                <h2 class="plan-popup__title">Loading payment methods</h2>
                <div class="creating__spinner">
                    <svg class="creating__spinner-icon " viewBox="25 25 50 50">
                        <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke="#70c542" stroke-width="4" />
                    </svg>
                </div>
            </div>
            <div class="form-loaded">
                  <div id="link-authentication-element" style="padding-bottom: 0.75rem;"></div>

                  <%
                  // Extract form appearance variables for the fields
                  let formAppearance = {};
                  let stripeFormBlock = null;

                  // Find the stripe-form block to get its appearance settings
                  if (screen && screen.content) {
                      stripeFormBlock = screen.content.find(block => block.type === 'stripe-form');
                  }

                  if (stripeFormBlock) {
                      try {
                          formAppearance = typeof stripeFormBlock['form-appearance'] === 'string' ?
                              JSON.parse(stripeFormBlock['form-appearance']) :
                              (stripeFormBlock['form-appearance'] || {});
                      } catch (e) {
                          formAppearance = {};
                      }
                  }

                  const variables = formAppearance.variables || {};

                  // Build inline style string
                  let inlineVarStyles = '';
                  if (variables.colorText) inlineVarStyles += `--stripe-input-text-color: ${variables.colorText}; `;
                  if (variables.colorBackground) inlineVarStyles += `--stripe-input-bg-color: ${variables.colorBackground}; `;
                  if (variables.borderRadius) inlineVarStyles += `--stripe-input-border-radius: ${variables.borderRadius}; `;
                  if (variables.fontFamily) inlineVarStyles += `--stripe-input-font-family: ${variables.fontFamily}; `;
                  if (variables.colorPrimary) inlineVarStyles += `--stripe-input-primary-color: ${variables.colorPrimary}; `;
                  if (variables.spacingUnit) inlineVarStyles += `--stripe-input-spacing-unit: ${variables.spacingUnit}; `;
                  %>

                <% if (item.add_email_field && !window.user_properties.email) { %>
                      <div class="type-stripe-form__email-container" style="<%= inlineVarStyles %>">
                        <label class="type-stripe-form__floating-label">
                            <input
                                    type="email"
                                    required
                                    data-email-field
                                    class="type-stripe-form__email"
                                    name="stripe-form-email"
                                    placeholder=" "
                                    <% if (window.user_properties.email) { %>
                                    value="<%- window.user_properties.email %>" readonly
                                    <% } %>
                                    pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$"
                            >
                            <span class="type-stripe-form__floating-label-text"><%- __('Email') %></span>
                        </label>
                    </div>
                <% } %>

                <% if (item.add_name_field === 'above') { %>
                  <div class="type-stripe-form__name-container" style="<%= inlineVarStyles %>">
                    <label class="type-stripe-form__floating-label">
                        <input type="text" required data-name-field class="type-stripe-form__name" placeholder="<%-__('Full name as on card')%>"
                               autocomplete="cc-name"
                               name="stripe-form-name">
                        <span class="type-stripe-form__floating-label-text"><%-__('Name on card')%></span>
                    </label>
                </div>
                <% } %>

                <div id="payment-element">
                    <img src="/img/paywall/payment-form-placeholder.png" alt="">
                    <!--Stripe.js injects the Payment Element-->
                </div>

                <% if (item.add_name_field === 'below') { %>
                    <div class="type-stripe-form__name-container" style="<%= inlineVarStyles %>">
                        <label class="type-stripe-form__floating-label">
                            <input type="text" required data-name-field class="type-stripe-form__name" placeholder="<%-__('Full name as on card')%>"
                                   autocomplete="cc-name"
                                   name="stripe-form-name">
                            <span class="type-stripe-form__floating-label-text"><%-__('Name on card')%></span>
                        </label>
                    </div>
                <% } %>

                <% if (item.custom_terms && item.custom_terms.trim()) { %>
                    <div class="type-stripe-form__custom-terms">
                        <p><%- __(item.custom_terms) %></p>
                    </div>
                <% } %>

                <div id="payment-message"></div>
                <button class="button-green  main__plan-button btn-confirm-purchase" data-btn-stripe-submit>
                    <div class="btn-spinner"></div>
                    <span class="button-text"><%- item['Submit Button Text'] || 'Confirm purchase' %></span>
                </button>
            </div>
        </form>
    <% } %>

    <% if (item.type == 'stripe-payment-request-button') { %>
        <div style="margin: 10px 0 ;" class="<%- item.class || '' %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-payment-request-container data-block-area-index="<%-contentItemIndex%>">
            <button class="button-green main__plan-button btn-confirm-purchase <%- item.class %>" style="<%- item.style %>" <%- item.attributes || '' %> data-payment-request-button data-wallet-type="applepay" data-wallet-styling="<%-item.addApplePayStyling%>" data-wallet-text="<%-item.addApplePayText%>" data-payment-method-type="stripe-payment-request-button" data-not-available-behavior="<%-item.applePayNotAvailableBehavior || ''%>" data-pay-button-onclick="<%- item.pay_button_onclick || ''%>" data-options='<%-JSON.stringify(item.options) || ''%>'  data-applepay-styling="<%-item.addApplePayStyling%>" data-request-shipping="<%-item.request_shipping || ''%>" data-oncancel="<%-item.oncancel || ''%>"  data-oncancel-url="<%-item.oncancel_url || ''%>"   data-applepay-text="<%-item.addApplePayText%>"
                    data-phone-number-required="<%-item.phoneNumberRequired || ''%>"
            >
                <div class="btn-spinner"></div>
                <span class="button-text"><%- item.content || 'Confirm purchase' %></span>
            </button>
            <div class="type-google-pay-unavailable-placeholder" data-apple-pay-unavailable-placeholder style="display: none;">
                Apple Pay is not available for this browser/device right now. This placeholder is visible only in edit mode.
            </div>

            <% if (item['Other payment methods Button Text']) {%>
                <%- TemplateManager.renderTemplate('screen-content', {screen: {
                        content: [
                            {
                                "type": "pay-button",
                                "content": item['Other payment methods Button Text'],
                                "attrs": "data-payment-request-other-payments-btn",
                                "class": "button-inverted",
                                "style": "display: none",
                                "pay_button_onclick": item.pay_button_onclick,
                                'icon': " "
                            }
                        ]
                    }}) %>
            <%} %>
        </div>
    <% } %>

    <% if (item.type == 'google-pay-button') { %>
        <div style="margin: 10px 0 ;" class="<%- item.class || '' %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-payment-request-container data-block-area-index="<%-contentItemIndex%>">
            <button class="button-green main__plan-button btn-confirm-purchase <%- item.class %>" style="<%- item.style %>" <%- item.attributes || '' %> data-payment-request-button data-wallet-type="googlepay" data-wallet-styling="<%-item.addGooglePayStyling%>" data-wallet-text="<%-item.addGooglePayText%>" data-payment-method-type="google-pay-button" data-not-available-behavior="<%-item.googlePayNotAvailableBehavior || 'hide_button'%>" data-pay-button-onclick="<%- item.pay_button_onclick || ''%>" data-options='<%-JSON.stringify(item.options) || ''%>' data-request-shipping="<%-item.request_shipping || ''%>" data-phone-number-required="<%-item.phoneNumberRequired || ''%>" data-request-payer-email="<%-typeof item.requestPayerEmail !== 'undefined' ? item.requestPayerEmail : 'auto'%>" data-request-payer-name="<%-typeof item.requestPayerName !== 'undefined' ? item.requestPayerName : ''%>" data-oncancel="<%-item.oncancel || ''%>"  data-oncancel-url="<%-item.oncancel_url || ''%>">
                <div class="btn-spinner"></div>
                <span class="button-text"><%- item.content || 'Continue with Google Pay' %></span>
            </button>
            <div class="type-google-pay-unavailable-placeholder" data-google-pay-unavailable-placeholder style="display: none;">
                Google Pay is not available for this browser/device right now. This placeholder is visible only in edit mode.
            </div>

            <% if (item['Other payment methods Button Text']) {%>
                <%- TemplateManager.renderTemplate('screen-content', {screen: {
                        content: [
                            {
                                "type": "pay-button",
                                "content": item['Other payment methods Button Text'],
                                "attrs": "data-payment-request-other-payments-btn",
                                "class": "button-inverted",
                                "style": "display: none",
                                "pay_button_onclick": item.pay_button_onclick,
                                'icon': " "
                            }
                        ]
                    }}) %>
            <%} %>
        </div>
    <% } %>


    <% if (item.type == 'paypal-button') { %>
        <div class="<% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" id="paypal-button-container" style="margin: 10px 0 ;" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> data-options='<%-JSON.stringify(item.options) || ''%>' data-only-paypal='<%-item.onlyPaypal%>'></div>
    <% } %>

    <% if (item.type == 'paypal-card-form') { %>
        <div class="<% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" id="paypal-form-container" style="margin: 10px 0 ;"  data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %>>

            <div id="paypal-checkout-form">
                <!-- Containers for Card Fields hosted by PayPal -->
<!--                <div id="card-name-field-container"></div>-->
                <div id="card-number-field-container"></div>
                <div id="card-expiry-field-container"></div>
                <div id="card-cvv-field-container"></div>

                <div id="paypal-payment-message"></div>

                <button class="button-green  main__plan-button btn-confirm-purchase " id="card-field-submit-button">
                    <div class="btn-spinner"></div>
                    <span class="button-text"><%- item['Submit Button Text'] || 'Confirm purchase' %></span>
                </button>
            </div>
        </div>
    <% } %>


    <% if (item.type=='paragraph' ) { %>
        <div class="quiz__descr <%- item.class %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%- item.style %>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <p><%- __(item.content) %></p>
        </div>
    <% } %>

    <% if (item.type=='time' ) { %>
        <div class="reminder__time <%- __(item.class) %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-timepicker-ui-input style="<%- item.style %>"  data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <input type="time" class="timepicker-ui-input" name="<%- screen.id %>-time" value="<%- item.content || ('09:00 AM') %>" />
        </div>
    <% } %>

    <% if (item.type=='duration' ) { %>
        <div class="reminder__duration <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="reminder__duration-descr">
                <svg class="reminder__duration-descr-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.333008 6.99967C0.333008 3.31778 3.31778 0.333008 6.99967 0.333008C10.6816 0.333008 13.6663 3.31778 13.6663 6.99967C13.6663 10.6816 10.6816 13.6663 6.99967 13.6663C3.31778 13.6663 0.333008 10.6816 0.333008 6.99967ZM5.87079 2.78009C5.45893 4.31717 5.67454 5.9549 6.47019 7.33301C7.26584 8.71111 8.57635 9.7167 10.1134 10.1286L10.4585 8.84066C9.26301 8.52033 8.24373 7.7382 7.62489 6.66634C7.00605 5.59448 6.83835 4.32069 7.15869 3.12519L5.87079 2.78009Z" fill="var(--text-secondary)" />
                </svg>
                <span><%- __('Duration') %></span>
            </div>
            <div class="reminder__duration-dropdown dropdown-duration">
                <div class="dropdown-duration__select">
                    <span data-switch-duration="hidden-<%- screen.id %>" data-options="<%- item.options.join('|') %>"><%- item.options[0] %></span> <!-- Default value -->
                    <input type="hidden" id="hidden-<%- screen.id %>" name="<%- screen.id %>" value="<%- item.options[0] %>" />
                </div>
            </div>
        </div>
    <% } %>

    <% if (item.type=='spinner' ) { %>
        <div class="creating__spinner <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <svg class="creating__spinner-icon " viewBox="25 25 50 50">
                <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke="#70c542" stroke-width="4" />
            </svg>
        </div>
    <% } %>

    <% if (item.type=='auto-swiper' ) { %>
        <div class="creating__slider swiper container <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-swiper data-on-progress-end="<%- item.on_progress_end || '' %>" data-block-area-index="<%-contentItemIndex%>" data-delay="<%-item['Delay in Miliseconds'] || 3000%>" <%- item.attributes || '' %>>
            <div class="creating__wrapper swiper-wrapper">
                <% item.options.forEach(function(option, index) { %>
                    <div class="creating__slide swiper-slide">
                        <div class="creating__slide-image">
                            <img src="<%- __(option.image) %>" alt="">
                        </div>
                        <div class="creating__slide-descr">
                            <p><%- __(option.content) %></p>
                        </div>
                    </div>
                <% }) %>
            </div>
        </div>
    <% } %>
    <% if (item.type=='auto-swiper-reviews' ) { %>
        <div class="creating__slider swiper container <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-swiper data-on-progress-end="<%- item.on_progress_end || '' %>" data-block-area-index="<%-contentItemIndex%>" data-delay="<%-item['Delay in Miliseconds'] || 3000%>" <%- item.attributes || '' %>>
            <div class="creating__wrapper swiper-wrapper">
                <% item.options.forEach(function(option, index) { %>
                    <div class="creating__slide swiper-slide">
                        <div class="complete__evaluation <% if (item.class) {%><%- option.class %><% } %>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>

                            <% if (option.image) {%>
                                <div class="complete__evaluation-img">
                                    <img src="<%- __(option.image) %>" alt="">
                                </div>
                            <% } %>

                            <div class="complete__evaluation-info">
                                <% if (option.title) { %>
                                    <div class="complete__evaluation-title">
                                        <%- __(option.title) %>
                                    </div>
                                <% } %>

                                <ul class="complete__evaluation-stars stars-complete">
                                    <li class="stars-complete__item">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="#EAB734">
                                            <path d="M12 .587l3.668 7.568 8.332 1.204-6 5.845 1.416 8.276L12 18.897l-7.416 3.892L6 15.159l-6-5.845 8.332-1.204z"/>
                                        </svg>
                                    </li>
                                    <li class="stars-complete__item">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="#EAB734">
                                            <path d="M12 .587l3.668 7.568 8.332 1.204-6 5.845 1.416 8.276L12 18.897l-7.416 3.892L6 15.159l-6-5.845 8.332-1.204z"/>
                                        </svg>
                                    </li>
                                    <li class="stars-complete__item">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="#EAB734">
                                            <path d="M12 .587l3.668 7.568 8.332 1.204-6 5.845 1.416 8.276L12 18.897l-7.416 3.892L6 15.159l-6-5.845 8.332-1.204z"/>
                                        </svg>
                                    </li>
                                    <li class="stars-complete__item">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="#EAB734">
                                            <path d="M12 .587l3.668 7.568 8.332 1.204-6 5.845 1.416 8.276L12 18.897l-7.416 3.892L6 15.159l-6-5.845 8.332-1.204z"/>
                                        </svg>
                                    </li>
                                    <li class="stars-complete__item">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="#EAB734">
                                            <path d="M12 .587l3.668 7.568 8.332 1.204-6 5.845 1.416 8.276L12 18.897l-7.416 3.892L6 15.159l-6-5.845 8.332-1.204z"/>
                                        </svg>
                                    </li>
                                </ul>
                                <div class="complete__evaluation-descr">
                                    <%- __(option.content || option.review) %>
                                </div>
                                <div class="complete__evaluation-name">
                                    <%- __(option.name) %>
                                </div>
                            </div>
                        </div>
                    </div>
                <% }) %>
            </div>
        </div>
    <% } %>
    <% if (item.type=='country' ) { %>
        <div class="container-type container-type-select-autocomplete container-type-country <%-__(item.class) || ''%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <%
                let countriesList = [{"code":"AF","name":"Afghanistan","flag":"🇦🇫"},{"code":"AL","name":"Albania","flag":"🇦🇱"},{"code":"DZ","name":"Algeria","flag":"🇩🇿"},{"code":"AS","name":"American Samoa","flag":"🇦🇸"},{"code":"AD","name":"Andorra","flag":"🇦🇩"},{"code":"AO","name":"Angola","flag":"🇦🇴"},{"code":"AI","name":"Anguilla","flag":"🇦🇮"},{"code":"AG","name":"Antigua and Barbuda","flag":"🇦🇬"},{"code":"AR","name":"Argentina","flag":"🇦🇷"},{"code":"AM","name":"Armenia","flag":"🇦🇲"},{"code":"AW","name":"Aruba","flag":"🇦🇼"},{"code":"AU","name":"Australia","flag":"🇦🇺"},{"code":"AT","name":"Austria","flag":"🇦🇹"},{"code":"AZ","name":"Azerbaijan","flag":"🇦🇿"},{"code":"BS","name":"Bahamas","flag":"🇧🇸"},{"code":"BH","name":"Bahrain","flag":"🇧🇭"},{"code":"BD","name":"Bangladesh","flag":"🇧🇩"},{"code":"BB","name":"Barbados","flag":"🇧🇧"},{"code":"BY","name":"Belarus","flag":"🇧🇾"},{"code":"BE","name":"Belgium","flag":"🇧🇪"},{"code":"BZ","name":"Belize","flag":"🇧🇿"},{"code":"BJ","name":"Benin","flag":"🇧🇯"},{"code":"BM","name":"Bermuda Islands","flag":"🇧🇲"},{"code":"BT","name":"Bhutan","flag":"🇧🇹"},{"code":"BO","name":"Bolivia","flag":"🇧🇴"},{"code":"BQ","name":"Bonaire, Sint Eustatius and Saba","flag":"🇧🇶"},{"code":"BA","name":"Bosnia and Herzegovina","flag":"🇧🇦"},{"code":"BW","name":"Botswana","flag":"🇧🇼"},{"code":"BR","name":"Brazil","flag":"🇧🇷"},{"code":"IO","name":"British Indian Ocean Territory","flag":"🇮🇴"},{"code":"VG","name":"British Virgin Islands","flag":"🇻🇬"},{"code":"BN","name":"Brunei","flag":"🇧🇳"},{"code":"BG","name":"Bulgaria","flag":"🇧🇬"},{"code":"BF","name":"Burkina Faso","flag":"🇧🇫"},{"code":"BI","name":"Burundi","flag":"🇧🇮"},{"code":"CV","name":"Cabo Verde","flag":"🇨🇻"},{"code":"KH","name":"Cambodia","flag":"🇰🇭"},{"code":"CM","name":"Cameroon","flag":"🇨🇲"},{"code":"CA","name":"Canada","flag":"🇨🇦"},{"code":"CF","name":"CAR","flag":"🇨🇫"},{"code":"KY","name":"Cayman Islands","flag":"🇰🇾"},{"code":"TD","name":"Chad","flag":"🇹🇩"},{"code":"CL","name":"Chile","flag":"🇨🇱"},{"code":"TW","name":"China","flag":"🇹🇼"},{"code":"CX","name":"Christmas Island","flag":"🇨🇽"},{"code":"CO","name":"Colombia","flag":"🇨🇴"},{"code":"KM","name":"Comoros","flag":"🇰🇲"},{"code":"CK","name":"Cook Islands","flag":"🇨🇰"},{"code":"CR","name":"Costa Rica","flag":"🇨🇷"},{"code":"CI","name":"Côte d'Ivoire","flag":"🇨🇮"},{"code":"HR","name":"Croatia","flag":"🇭🇷"},{"code":"CU","name":"Cuba","flag":"🇨🇺"},{"code":"CW","name":"Curaçao","flag":"🇨🇼"},{"code":"CY","name":"Cyprus","flag":"🇨🇾"},{"code":"CZ","name":"Czech Republic","flag":"🇨🇿"},{"code":"CD","name":"Democratic Republic of the Congo","flag":"🇨🇩"},{"code":"DK","name":"Denmark","flag":"🇩🇰"},{"code":"DJ","name":"Djibouti","flag":"🇩🇯"},{"code":"DM","name":"Dominica","flag":"🇩🇲"},{"code":"DO","name":"Dominican Republic","flag":"🇩🇴"},{"code":"KP","name":"DPRK","flag":"🇰🇵"},{"code":"TL","name":"East Timor","flag":"🇹🇱"},{"code":"EC","name":"Ecuador","flag":"🇪🇨"},{"code":"EG","name":"Egypt","flag":"🇪🇬"},{"code":"SV","name":"El Salvador","flag":"🇸🇻"},{"code":"GQ","name":"Equatorial Guinea","flag":"🇬🇶"},{"code":"ER","name":"Eritrea","flag":"🇪🇷"},{"code":"EE","name":"Estonia","flag":"🇪🇪"},{"code":"SZ","name":"Eswatini","flag":"🇸🇿"},{"code":"ET","name":"Ethiopia","flag":"🇪🇹"},{"code":"FK","name":"Falkland Islands","flag":"🇫🇰"},{"code":"FJ","name":"Fiji","flag":"🇫🇯"},{"code":"FI","name":"Finland","flag":"🇫🇮"},{"code":"FR","name":"France","flag":"🇫🇷"},{"code":"PF","name":"French Polynesia","flag":"🇵🇫"},{"code":"TF","name":"French Southern and Antarctic Lands","flag":"🇹🇫"},{"code":"GA","name":"Gabon","flag":"🇬🇦"},{"code":"GM","name":"Gambia","flag":"🇬🇲"},{"code":"GE","name":"Georgia","flag":"🇬🇪"},{"code":"DE","name":"Germany","flag":"🇩🇪"},{"code":"GH","name":"Ghana","flag":"🇬🇭"},{"code":"GI","name":"Gibraltar","flag":"🇬🇮"},{"code":"GR","name":"Greece","flag":"🇬🇷"},{"code":"GL","name":"Greenland","flag":"🇬🇱"},{"code":"GD","name":"Grenada","flag":"🇬🇩"},{"code":"GP","name":"Guadeloupe","flag":"🇬🇵"},{"code":"GU","name":"Guam","flag":"🇬🇺"},{"code":"GT","name":"Guatemala","flag":"🇬🇹"},{"code":"GG","name":"Guernsey","flag":"🇬🇬"},{"code":"GN","name":"Guinea","flag":"🇬🇳"},{"code":"GW","name":"Guinea-Bissau","flag":"🇬🇼"},{"code":"GF","name":"Guyana","flag":"🇬🇫"},{"code":"GY","name":"Guyana","flag":"🇬🇾"},{"code":"HT","name":"Haiti","flag":"🇭🇹"},{"code":"HN","name":"Honduras","flag":"🇭🇳"},{"code":"HK","name":"Hong Kong","flag":"🇭🇰"},{"code":"HU","name":"Hungary","flag":"🇭🇺"},{"code":"IS","name":"Iceland","flag":"🇮🇸"},{"code":"IN","name":"India","flag":"🇮🇳"},{"code":"ID","name":"Indonesia","flag":"🇮🇩"},{"code":"IR","name":"Iran","flag":"🇮🇷"},{"code":"IQ","name":"Iraq","flag":"🇮🇶"},{"code":"IE","name":"Ireland","flag":"🇮🇪"},{"code":"IL","name":"Israel","flag":"🇮🇱"},{"code":"IT","name":"Italy","flag":"🇮🇹"},{"code":"JM","name":"Jamaica","flag":"🇯🇲"},{"code":"JP","name":"Japan","flag":"🇯🇵"},{"code":"JE","name":"Jersey","flag":"🇯🇪"},{"code":"JO","name":"Jordan","flag":"🇯🇴"},{"code":"KZ","name":"Kazakhstan","flag":"🇰🇿"},{"code":"KE","name":"Kenya","flag":"🇰🇪"},{"code":"KI","name":"Kiribati","flag":"🇰🇮"},{"code":"KW","name":"Kuwait","flag":"🇰🇼"},{"code":"KG","name":"Kyrgyzstan","flag":"🇰🇬"},{"code":"LA","name":"Laos","flag":"🇱🇦"},{"code":"LV","name":"Latvia","flag":"🇱🇻"},{"code":"LB","name":"Lebanon","flag":"🇱🇧"},{"code":"LS","name":"Lesotho","flag":"🇱🇸"},{"code":"LR","name":"Liberia","flag":"🇱🇷"},{"code":"LY","name":"Libya","flag":"🇱🇾"},{"code":"LI","name":"Liechtenstein","flag":"🇱🇮"},{"code":"LT","name":"Lithuania","flag":"🇱🇹"},{"code":"LU","name":"Luxembourg","flag":"🇱🇺"},{"code":"MO","name":"Macau, Aomen","flag":"🇲🇴"},{"code":"MG","name":"Madagascar","flag":"🇲🇬"},{"code":"MW","name":"Malawi","flag":"🇲🇼"},{"code":"MY","name":"Malaysia","flag":"🇲🇾"},{"code":"MV","name":"Maldives","flag":"🇲🇻"},{"code":"ML","name":"Mali","flag":"🇲🇱"},{"code":"MT","name":"Malta","flag":"🇲🇹"},{"code":"MH","name":"Marshall Islands","flag":"🇲🇭"},{"code":"MQ","name":"Martinique","flag":"🇲🇶"},{"code":"MR","name":"Mauritania","flag":"🇲🇷"},{"code":"MU","name":"Mauritius","flag":"🇲🇺"},{"code":"YT","name":"Mayotte","flag":"🇾🇹"},{"code":"MX","name":"Mexico","flag":"🇲🇽"},{"code":"FM","name":"Micronesia","flag":"🇫🇲"},{"code":"MD","name":"Moldova","flag":"🇲🇩"},{"code":"MC","name":"Monaco","flag":"🇲🇨"},{"code":"MN","name":"Mongolia","flag":"🇲🇳"},{"code":"ME","name":"Montenegro","flag":"🇲🇪"},{"code":"MS","name":"Montserrat","flag":"🇲🇸"},{"code":"MA","name":"Morocco","flag":"🇲🇦"},{"code":"MZ","name":"Mozambique","flag":"🇲🇿"},{"code":"MM","name":"Myanmar","flag":"🇲🇲"},{"code":"NA","name":"Namibia","flag":"🇳🇦"},{"code":"NR","name":"Nauru","flag":"🇳🇷"},{"code":"NP","name":"Nepal","flag":"🇳🇵"},{"code":"NL","name":"Netherlands","flag":"🇳🇱"},{"code":"NC","name":"New Caledonia","flag":"🇳🇨"},{"code":"NZ","name":"New Zealand","flag":"🇳🇿"},{"code":"NI","name":"Nicaragua","flag":"🇳🇮"},{"code":"NE","name":"Niger","flag":"🇳🇪"},{"code":"NG","name":"Nigeria","flag":"🇳🇬"},{"code":"NU","name":"Niue","flag":"🇳🇺"},{"code":"NF","name":"Norfolk Island","flag":"🇳🇫"},{"code":"MK","name":"North Macedonia","flag":"🇲🇰"},{"code":"MP","name":"Northern Mariana Islands","flag":"🇲🇵"},{"code":"NO","name":"Norway","flag":"🇳🇴"},{"code":"OM","name":"Oman","flag":"🇴🇲"},{"code":"PK","name":"Pakistan","flag":"🇵🇰"},{"code":"PW","name":"Palau","flag":"🇵🇼"},{"code":"PA","name":"Panama","flag":"🇵🇦"},{"code":"PG","name":"Papua New Guinea","flag":"🇵🇬"},{"code":"PY","name":"Paraguay","flag":"🇵🇾"},{"code":"PE","name":"Peru","flag":"🇵🇪"},{"code":"PH","name":"Philippines","flag":"🇵🇭"},{"code":"PN","name":"Pitcairn Islands","flag":"🇵🇳"},{"code":"PL","name":"Poland","flag":"🇵🇱"},{"code":"PT","name":"Portugal","flag":"🇵🇹"},{"code":"PR","name":"Puerto Rico","flag":"🇵🇷"},{"code":"QA","name":"Qatar","flag":"🇶🇦"},{"code":"CG","name":"Republic of the Congo","flag":"🇨🇬"},{"code":"KR","name":"Republic of Korea","flag":"🇰🇷"},{"code":"RE","name":"Réunion","flag":"🇷🇪"},{"code":"RO","name":"Romania","flag":"🇷🇴"},{"code":"RU","name":"Russia","flag":"🇷🇺"},{"code":"RW","name":"Rwanda","flag":"🇷🇼"},{"code":"BL","name":"Saint Barthélemy","flag":"🇧🇱"},{"code":"SH","name":"Saint Helena, Ascension and Tristan da Cunha","flag":"🇸🇭"},{"code":"KN","name":"Saint Kitts and Nevis","flag":"🇰🇳"},{"code":"LC","name":"Saint Lucia","flag":"🇱🇨"},{"code":"MF","name":"Saint Martin","flag":"🇲🇫"},{"code":"PM","name":"Saint Pierre and Miquelon","flag":"🇵🇲"},{"code":"VC","name":"Saint Vincent and the Grenadines","flag":"🇻🇨"},{"code":"WS","name":"Samoa","flag":"🇼🇸"},{"code":"SM","name":"San Marino","flag":"🇸🇲"},{"code":"ST","name":"São Tomé and Príncipe","flag":"🇸🇹"},{"code":"SA","name":"Saudi Arabia","flag":"🇸🇦"},{"code":"SN","name":"Senegal","flag":"🇸🇳"},{"code":"RS","name":"Serbia","flag":"🇷🇸"},{"code":"SC","name":"Seychelles","flag":"🇸🇨"},{"code":"SL","name":"Sierra Leone","flag":"🇸🇱"},{"code":"SG","name":"Singapore","flag":"🇸🇬"},{"code":"SX","name":"Sint Maarten","flag":"🇸🇽"},{"code":"SK","name":"Slovakia","flag":"🇸🇰"},{"code":"SI","name":"Slovenia","flag":"🇸🇮"},{"code":"SB","name":"Solomon Islands","flag":"🇸🇧"},{"code":"SO","name":"Somalia","flag":"🇸🇴"},{"code":"ZA","name":"South Africa","flag":"🇿🇦"},{"code":"SS","name":"South Sudan","flag":"🇸🇸"},{"code":"ES","name":"Spain","flag":"🇪🇸"},{"code":"LK","name":"Sri Lanka","flag":"🇱🇰"},{"code":"SD","name":"Sudan","flag":"🇸🇩"},{"code":"SR","name":"Suriname","flag":"🇸🇷"},{"code":"SJ","name":"Svalbard","flag":"🇸🇯"},{"code":"SE","name":"Sweden","flag":"🇸🇪"},{"code":"CH","name":"Switzerland","flag":"🇨🇭"},{"code":"SY","name":"Syria","flag":"🇸🇾"},{"code":"TJ","name":"Tajikistan","flag":"🇹🇯"},{"code":"TZ","name":"Tanzania","flag":"🇹🇿"},{"code":"TH","name":"Thailand","flag":"🇹🇭"},{"code":"TG","name":"Togo","flag":"🇹🇬"},{"code":"TK","name":"Tokelau","flag":"🇹🇰"},{"code":"TO","name":"Tonga","flag":"🇹🇴"},{"code":"TT","name":"Trinidad and Tobago","flag":"🇹🇹"},{"code":"TN","name":"Tunisia","flag":"🇹🇳"},{"code":"TR","name":"Turkey","flag":"🇹🇷"},{"code":"TM","name":"Turkmenistan","flag":"🇹🇲"},{"code":"TC","name":"Turks and Caicos","flag":"🇹🇨"},{"code":"TV","name":"Tuvalu","flag":"🇹🇻"},{"code":"AE","name":"UAE","flag":"🇦🇪"},{"code":"UG","name":"Uganda","flag":"🇺🇬"},{"code":"UA","name":"Ukraine","flag":"🇺🇦"},{"code":"GB","name":"United Kingdom","flag":"🇬🇧"},{"code":"US","name":"United States of America","flag":"🇺🇸"},{"code":"UY","name":"Uruguay","flag":"🇺🇾"},{"code":"UZ","name":"Uzbekistan","flag":"🇺🇿"},{"code":"VU","name":"Vanuatu","flag":"🇻🇺"},{"code":"VA","name":"Vatican","flag":"🇻🇦"},{"code":"VE","name":"Venezuela","flag":"🇻🇪"},{"code":"VN","name":"Vietnam","flag":"🇻🇳"},{"code":"VI","name":"Virgin Islands (U.S.)","flag":"🇻🇮"},{"code":"WF","name":"Wallis and Futuna","flag":"🇼🇫"},{"code":"YE","name":"Yemen","flag":"🇾🇪"},{"code":"ZM","name":"Zambia","flag":"🇿🇲"},{"code":"ZW","name":"Zimbabwe","flag":"🇿🇼"}];

                // Get default value from locales.country_code or item.value
                const defaultValue = (typeof locales !== 'undefined' && locales.country_code) ? locales.country_code : (__(item.value || ''));
                let placeholderText = __(item.placeholder || 'Select country');

                // If there's a default value, try to find matching country text
                if (defaultValue) {
                    const matchingCountry = countriesList.find(country =>
                        country.code === defaultValue.toUpperCase() ||
                        country.name.toLowerCase() === defaultValue.toLowerCase()
                    );
                    if (matchingCountry) {
                        placeholderText = `${matchingCountry.flag} ${matchingCountry.name}`;
                    }
                } else {
                    // If no default value, use first country as placeholder
                    const firstCountry = countriesList[0];
                    if (firstCountry) {
                        placeholderText = `${firstCountry.flag} ${firstCountry.name}`;
                    }
                }
            %>
            <input type="text" class="country-field select-autocomplete-field " data-select-autocomplete="true" name="<%- item.name || screen.id %>" placeholder="<%- placeholderText %>" data-default-value="<%- defaultValue %>" autocomplete="off" />
            <input type="hidden" class="select-autocomplete-value" data-select-autocomplete-value="true" value="<%- defaultValue %>" />
            <ul class="country-list" data-select-autocomplete-list>
                <% countriesList.forEach(function(country) { %>
                    <li data-value="<%- country.code %>"><%- country.flag %> <%- country.name %></li>
                <% }) %>
            </ul>
        </div>
    <% } %>

    <% if (item.type=='options' ) { %>
        <div class="quiz__body <%-__(item.class)%> <% if (item.columns) {%>columns-<%-item.columns%><% }%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-question-type="<%- item.type %>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="quiz__radios radios-quiz">
                <% item.options.forEach(function(option, index) { %>
                    <div class="radios-quiz__line">
                        <label class="radios-quiz__label <% if (option.selected || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && window.user_properties[item.name || screen.id] == (option.value || option.content || (typeof option == 'object' ? index : option)))) { %>selected<% }%>">
                            <input class="radios-quiz__input" data-index="<%- index %>" type="radio" name="<%- item.name || screen.id %>" id="<%- item.name || screen.id %>-<%- index %>" value="<%- escapeHtmlForAttribute(option.value || option.content || (typeof option == 'object' ? index : option)) %>" <%- option.onclick ? 'data-next-screen="' + option.onclick + '"' : '' %> <% if (option.selected || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && window.user_properties[item.name || screen.id] == (option.value || option.content || (typeof option == 'object' ? index : option)))) { %>checked="checked"<% }%>>
                            <span class="radios-quiz__descr" style="<% item.style %>">
                                <% if (option.image) { %>
                                    <span class="option-image">
                                        <img src="<%- __(option.image) %>" alt="">
                                    </span>
                                <% } %>
                                <%- replaceStartingEmojiWithSpan(__(typeof option === 'string' ? option : (option && typeof option.content === 'string' ? option.content : ''))) %>
                                <% var iconType = item.icon_type || 'arrow'; %>
                                <% if (iconType === 'none') { %>
                                <% } else if (iconType === 'radio') { %>
                                <svg class="radios-quiz__icon radios-quiz__icon--radio" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="10" cy="10" r="8.5" stroke="currentColor" stroke-width="2" fill="none"/>
                                    <circle class="radios-quiz__icon-circle-filled" cx="10" cy="10" r="5" fill="currentColor" opacity="0"/>
                                </svg>
                                <% } else if (iconType === 'checkbox') { %>
                                <svg class="radios-quiz__icon radios-quiz__icon--checkbox" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect class="radios-quiz__icon-rect" x="1.5" y="1.5" width="17" height="17" rx="2.5" stroke="currentColor" stroke-width="2" fill="none"/>
                                    <path class="radios-quiz__icon-checkmark" d="M5 10L8 13L15 6" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0"/>
                                </svg>
                                <% } else { %>
                                <svg class="radios-quiz__icon radios-quiz__icon--arrow" width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1.5 13L7.5 7L1.5 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                <% } %>
                            </span>


                        </label>
                    </div>
                <% }) %>
            </div>
        </div>
    <% } %>

    <% if (item.type=='options-multiple' ) { %>
        <div class="quiz__body <%-__(item.class)%> <% if (item.columns) {%>columns-<%-item.columns%><% }%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-question-type="<%- item.type %>" data-required-answer="<%-item.required_answer%>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="quiz__checkboxs checkboxs-quiz">
                <% item.options.forEach(function(option, index){ %>
                    <div class="checkboxs-quiz__line">
                        <label class="checkboxs-quiz__label <% if (option.checked || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && (function() { var saved = window.user_properties[item.name || screen.id]; var val = String(option.value || option.content || (typeof option == 'object' ? index : option)); return Array.isArray(saved) ? saved.includes(val) : (typeof saved === 'string' ? saved.split('||').includes(val) : false); })())) { %>selected<% }%>">
                            <input class="checkboxs-quiz__input" type="checkbox" data-index="<%- index %>" name="<%- item.name || screen.id %>" id="<%- screen.id %>-<%- index %>" value="<%- escapeHtmlForAttribute(option.value || option.content || (typeof option == 'object' ? index : option)) %>" <% if (option.checked || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && (function() { var saved = window.user_properties[item.name || screen.id]; var val = String(option.value || option.content || (typeof option == 'object' ? index : option)); return Array.isArray(saved) ? saved.includes(val) : (typeof saved === 'string' ? saved.split('||').includes(val) : false); })())) { %>checked="checked"<% }%><% if (option.uncheck_all === true || option.uncheck_all === 'true') { %> data-uncheck-all="true"<% }%> >
                            <span class="checkboxs-quiz__inner">
                              <span class="checkboxs-quiz__descr">
                                  <% if (option.image) { %>
                                      <span class="option-image">
                                        <img src="<%- __(option.image) %>" alt="">
                                    </span>
                                  <% } %>
                                  <%- replaceStartingEmojiWithSpan(__(option.content || option)) %>
                              </span>
                               <!--<span class="checkboxs-quiz__round"></span>-->
                               <span class="checkboxs-quiz__square">
                                <svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.9746 0.884033C14.2872 1.1963 14.2874 1.70283 13.9752 2.0154L4.88426 11.1154C4.73425 11.2656 4.53073 11.3499 4.31849 11.35C4.10625 11.3501 3.90268 11.2658 3.7526 11.1157L1.02533 8.38841C0.712911 8.07599 0.712911 7.56946 1.02533 7.25704C1.33775 6.94462 1.84428 6.94462 2.1567 7.25704L4.31801 9.41835L12.8432 0.884599C13.1555 0.572023 13.662 0.57177 13.9746 0.884033Z" fill="#fff"/>
                                    <defs>
                                    <linearGradient id="paint0_linear_3199_4783" x1="0.791016" y1="6" x2="13.4469" y2="2.89388" gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#fff"/>
                                    <stop offset="1" stop-color="#fff"/>
                                    </linearGradient>
                                    </defs>
                                    </svg>
                               </span>

                            </span>
                        </label>
                    </div>
                <% }) %>
            </div>
        </div>
    <% } %>

    <% if (item.type=='list' ) { %>
        <ul class="quiz__list <%- __(item.class) %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%- item.style %>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <% item.content.forEach(function(item) { %>
                <li class="quiz__list-item">
                    <%- __(item) %>
                </li>
            <% }) %>
        </ul>
        <%
            if (item.duration) {
				setTimeout(function(){
                    let els = $('[data-block-area-index=' + contentItemIndex + '] li.quiz__list-item');
                    els.css('opacity', '0');

                    els.each(function (index, el) {
                        setTimeout(function(){
                            $(el).animate({opacity: 1}, item.duration)
                        }, item.duration * index)
                    })
                }, 200)
            }
        %>
    <% } %>


    <% if (item.type=='review' ) { %>
        <div class="complete__evaluation <% if (item.class) {%><%- __(item.class) %><% } %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>

            <% if (item.title) {%>
                <div class="complete__evaluation-title">
                    <% if (item.image) {%>
                        <div class="complete__evaluation-image">
                            <img src="<%- __(item.image) %>" alt="">
                        </div>
                    <% } %>
                    <%- __(item.title) %>
                </div>
            <% } %>
            <% var rating = parseFloat(item.star_rating) || 5; var fullStars = Math.floor(rating); var hasHalfStar = (rating % 1) >= 0.5; var emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0); %>
            <ul class="complete__evaluation-stars stars-complete">
                <% for(var i = 0; i < fullStars; i++) { %>
                    <li class="stars-complete__item">
                        <svg class="stars-complete__item-icon" viewBox="0 0 16 16">
                            <path d="M15.9583 6.04621C15.8535 5.70813 15.5662 5.46802 15.2262 5.43605L10.6082 4.99849L8.78207 0.538446C8.64742 0.211582 8.34077 0 8.00006 0C7.65936 0 7.35271 0.211582 7.21806 0.53921L5.39197 4.99849L0.77321 5.43605C0.433846 5.46878 0.147218 5.70813 0.0418691 6.04621C-0.0634801 6.38428 0.0338122 6.75509 0.290532 6.98884L3.78121 10.1833L2.75189 14.9147C2.67657 15.2626 2.80597 15.6222 3.08259 15.8308C3.23128 15.9429 3.40523 16 3.58065 16C3.7319 16 3.88193 15.9575 4.01657 15.8734L8.00006 13.389L11.9821 15.8734C12.2735 16.0563 12.6408 16.0396 12.9168 15.8308C13.1935 15.6215 13.3228 15.2618 13.2475 14.9147L12.2182 10.1833L15.7089 6.98947C15.9656 6.75509 16.0636 6.38492 15.9583 6.04621Z"></path>
                        </svg>
                    </li>
                <% } %>
                <% if(hasHalfStar) { %>
                    <li class="stars-complete__item">
                        <svg class="stars-complete__item-icon" viewBox="0 0 16 16">
                            <path d="M8 0V13.389L4.01657 15.8734C3.7319 16 3.40523 16 3.23128 15.9429C2.80597 15.6222 2.67657 15.2626 2.75189 14.9147L3.78121 10.1833L0.290532 6.98884C0.0338122 6.75509 -0.0634801 6.38428 0.0418691 6.04621C0.147218 5.70813 0.433846 5.46878 0.77321 5.43605L5.39197 4.99849L7.21806 0.53921C7.35271 0.211582 7.65936 0 8 0Z"/>
                            <path d="M15.9583 6.04621C15.8535 5.70813 15.5662 5.46802 15.2262 5.43605L10.6082 4.99849L8.78207 0.538446C8.64742 0.211582 8.34077 0 8.00006 0V13.389L11.9821 15.8734C12.2735 16.0563 12.6408 16.0396 12.9168 15.8308C13.1935 15.6215 13.3228 15.2618 13.2475 14.9147L12.2182 10.1833L15.7089 6.98947C15.9656 6.75509 16.0636 6.38492 15.9583 6.04621Z" fill="none" stroke-width="0.5"/>
                        </svg>
                    </li>
                <% } %>
                <% for(var i = 0; i < emptyStars; i++) { %>
                    <li class="stars-complete__item">
                        <svg class="stars-complete__item-icon" viewBox="0 0 16 16">
                            <path d="M15.9583 6.04621C15.8535 5.70813 15.5662 5.46802 15.2262 5.43605L10.6082 4.99849L8.78207 0.538446C8.64742 0.211582 8.34077 0 8.00006 0C7.65936 0 7.35271 0.211582 7.21806 0.53921L5.39197 4.99849L0.77321 5.43605C0.433846 5.46878 0.147218 5.70813 0.0418691 6.04621C-0.0634801 6.38428 0.0338122 6.75509 0.290532 6.98884L3.78121 10.1833L2.75189 14.9147C2.67657 15.2626 2.80597 15.6222 3.08259 15.8308C3.23128 15.9429 3.40523 16 3.58065 16C3.7319 16 3.88193 15.9575 4.01657 15.8734L8.00006 13.389L11.9821 15.8734C12.2735 16.0563 12.6408 16.0396 12.9168 15.8308C13.1935 15.6215 13.3228 15.2618 13.2475 14.9147L12.2182 10.1833L15.7089 6.98947C15.9656 6.75509 16.0636 6.38492 15.9583 6.04621Z" fill="none" stroke-width="0.5"/>
                        </svg>
                    </li>
                <% } %>
            </ul>
            <div class="complete__evaluation-descr">
                <%- __(item.content || item.review) %>
            </div>
            <div class="complete__evaluation-name">
                <%- __(item.name) %>
            </div>
        </div>




    <!--        {#    <div class="perfect__descr">#}-->
    <!--        {#        <p>#}-->
    <!--        {#            < % - item.content|raw % >#}-->
    <!--        {#        </p>#}-->
    <!--        {#    </div>#}-->

<% } %>

    <% if (item.type=='review-fb' ) { %>
        <div class="reviews-quiz__item <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="reviews-quiz__review review-quiz">
                <div class="review-quiz__head">
                    <div class="review-quiz__avatar">
                        <img src="<%-  __(item.image) || 'https://randomuser.me/api/portraits/women/' + Math.round(Math.random() * 100) + '.jpg' %>" alt="">
                    </div>
                    <div class="review-quiz__inner">
                        <div class="review-quiz__top">
                            <div class="review-quiz__name">
                                <%-__(item.name)%>
                            </div>
                            <div class="review-quiz__recommend">
                                <img src="/img/quiz/reviews/recommendIcon.png" alt="">
                                <span>recommends</span>
                            </div>
                            <svg class="review-quiz__dots" width="16" height="4" viewBox="0 0 16 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2 4C1.45 4 0.979333 3.804 0.588 3.412C0.196 3.02067 0 2.55 0 2C0 1.45 0.196 0.979 0.588 0.587C0.979333 0.195667 1.45 0 2 0C2.55 0 3.02067 0.195667 3.412 0.587C3.804 0.979 4 1.45 4 2C4 2.55 3.804 3.02067 3.412 3.412C3.02067 3.804 2.55 4 2 4ZM8 4C7.45 4 6.97933 3.804 6.588 3.412C6.196 3.02067 6 2.55 6 2C6 1.45 6.196 0.979 6.588 0.587C6.97933 0.195667 7.45 0 8 0C8.55 0 9.021 0.195667 9.413 0.587C9.80433 0.979 10 1.45 10 2C10 2.55 9.80433 3.02067 9.413 3.412C9.021 3.804 8.55 4 8 4ZM14 4C13.45 4 12.979 3.804 12.587 3.412C12.1957 3.02067 12 2.55 12 2C12 1.45 12.1957 0.979 12.587 0.587C12.979 0.195667 13.45 0 14 0C14.55 0 15.021 0.195667 15.413 0.587C15.8043 0.979 16 1.45 16 2C16 2.55 15.8043 3.02067 15.413 3.412C15.021 3.804 14.55 4 14 4Z" fill="#A7A8A8" />
                            </svg>
                        </div>
                        <div class="review-quiz__bottom">
                            <div class="review-quiz__role">
                                <%- __(item.app_name || window.app_name) %>
                            </div>
                            <div class="review-quiz__data">
                                <span><%- __(item.date) %></span>
                                <svg class="review-quiz__data-icon" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5 10C4.30833 10 3.65833 9.86867 3.05 9.606C2.44167 9.34367 1.9125 8.9875 1.4625 8.5375C1.0125 8.0875 0.656333 7.55833 0.394 6.95C0.131333 6.34167 0 5.69167 0 5C0 4.30833 0.131333 3.65833 0.394 3.05C0.656333 2.44167 1.0125 1.9125 1.4625 1.4625C1.9125 1.0125 2.44167 0.656167 3.05 0.3935C3.65833 0.131167 4.30833 0 5 0C5.69167 0 6.34167 0.131167 6.95 0.3935C7.55833 0.656167 8.0875 1.0125 8.5375 1.4625C8.9875 1.9125 9.34367 2.44167 9.606 3.05C9.86867 3.65833 10 4.30833 10 5C10 5.69167 9.86867 6.34167 9.606 6.95C9.34367 7.55833 8.9875 8.0875 8.5375 8.5375C8.0875 8.9875 7.55833 9.34367 6.95 9.606C6.34167 9.86867 5.69167 10 5 10ZM4.5 8.975V8C4.225 8 3.98967 7.90217 3.794 7.7065C3.598 7.5105 3.5 7.275 3.5 7V6.5L1.1 4.1C1.075 4.25 1.052 4.4 1.031 4.55C1.01033 4.7 1 4.85 1 5C1 6.00833 1.33133 6.89167 1.994 7.65C2.65633 8.40833 3.49167 8.85 4.5 8.975ZM7.95 7.7C8.11667 7.51667 8.26667 7.31867 8.4 7.106C8.53333 6.89367 8.64383 6.67283 8.7315 6.4435C8.81883 6.2145 8.8855 5.97917 8.9315 5.7375C8.97717 5.49583 9 5.25 9 5C9 4.18333 8.773 3.4375 8.319 2.7625C7.86467 2.0875 7.25833 1.6 6.5 1.3V1.5C6.5 1.775 6.40217 2.01033 6.2065 2.206C6.0105 2.402 5.775 2.5 5.5 2.5H4.5V3.5C4.5 3.64167 4.45217 3.76033 4.3565 3.856C4.2605 3.952 4.14167 4 4 4H3V5H6C6.14167 5 6.2605 5.04783 6.3565 5.1435C6.45217 5.2395 6.5 5.35833 6.5 5.5V7H7C7.21667 7 7.4125 7.0645 7.5875 7.1935C7.7625 7.32283 7.88333 7.49167 7.95 7.7Z" fill="#1E1E1E" fill-opacity="0.38" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="review-quiz__body">
                    <p><%- __(item.comment) %></p>
                </div>
            </div>
        </div>
    <% } %>

    <% if (item.type=='review-card') { %>
        <div class="experts__cards <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="experts__card">
                <% if (item.image) { %>
                <div class="experts__card-avatar">
                    <img src="<%- __(item.image)%>" alt="<%- item.name %>">
                </div>
                <% } %>
                <div class="experts__card-body">
                    <h3 class="experts__card-title">
                        <%- __(item.name) %>
                    </h3>
                    <div class="experts__card-descr">
                        <%- __(item.content) %>
                    </div>
                </div>
            </div>
        </div>
    <% } %>

    <% if (item.type=='image') { %>
        <div class="quiz__body <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <% if (item.image_prompt) { %>
            <div class="quiz__descr">[image: <%-item.image_prompt%>]</div>
            <% } else { %>
                <img  class="quiz__image" src="<%- __(item.src) %>" alt="<%- item.alt %>" style="max-width: 350px; <%- item.style %>">
            <% } %>
        </div>
    <% } %>

    <% if (item.type=='button' ) { %>
        <button class="quiz__step-button button <%- item.class %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%- item.style %>" <%- item.attrs %> type="<%- item.button_type || 'button' %>" data-screen-next="<%- item['data-screen-next'] %>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <span><%- __(item.content) %></span>
            <%- item.icon || '<svg class="button__icon" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.5 12H5.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12.5 19L5.5 12L12.5 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg>' %>
        </button>
    <% } %>

    <% if (item.type=='button-link' || item.type=='button-after-pay' ) { %>
        <a href="<%- __(item.url) %>" class="button <%- item.class %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%- item.style %>" <%- item.attributes || '' %> data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <span><%- __(item.content) %></span>
        </a>
    <% } %>


    <% if (item.type=='button-inline' ) { %>
        <button class="main__long-paywall-button <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%- item.style %>" <%- item.attrs %> type="<%- item.button_type || 'button' %>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <span><%- __(item.content) %></span>
            <%- __(item.icon) %>
        </button>
    <% } %>

    <% if (item.type=='sub-title' ) { %>
        <h3 class="sub-title <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <%- __(item.content) %>
        </h3>
    <% } %>

    <% if (item.type=='sub-title-gray' ) { %>
        <div class="evaluation-quiz__descr <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <%- __(item.content) %>
        </div>
    <% } %>

    <% if (item.type=='preview-steps') { %>
        <div class="preview__steps <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-image-steps-slider data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <% item.steps.forEach(function(step, index) { %>
                <div class="preview__step">
                    <div class="preview__step-top preview__step-top--<%- index %>">
                        <div class="preview__step-image">
                            <% if (step.image_prompt) { %>
                            <div style="text-align: center">
                                [image: <%-step.image_prompt%>]
                            </div>
                            <% } else { %>
                                <img src="<%- step.top_image %>" alt="">
                            <% } %>
                        </div>
                    </div>
                    <div class="preview__step-bottom">
                        <div class="preview__step-progress progress">
                            <div class="progress__bar">
                            </div>
                        </div>
                        <h2 class="preview__step-title title" style="<%- item.style %>">
                            <%- __(step.title) %>
                        </h2>
                        <button class="preview__step-button button" type="button" style="<%- item.style %>">
                            <span><%- __(step.button) %></span>
                            <svg class="button__icon" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.5 12H5.5" stroke="#4F3422" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12.5 19L5.5 12L12.5 5" stroke="#4F3422" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg>
                        </button>
                    </div>
                </div>
            <% }) %>
        </div>
    <% }
    %>
    <% if (item.type=='sale-timer' ) { %>
    <div class="sale-timer <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-timer-end-action="<%-item.on_timer_end_action || ''%>" data-timer-end-popup-id="<%-item.on_timer_end_popup_id || ''%>" data-timer-end-js-callback="<%-item.on_timer_end_js_callback || ''%>" data-timer-end-redirect-url="<%-item.on_timer_end_redirect_url || ''%>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
        <div class="sale-timer-container" >
            <div class="sale-timer-text"><%-__('Applied limited discount')%></div>
            <div class="sale-timer-bg">
                <div class="sale-timer-blue">
                    <span><span class="sale-timer-blue-old"><%- item.sale_old %></span></span><strong class="sale-timer-blue-percent"><%- item.sale %></strong></div>
                    <div  class="sale-timer-blue-old"><%- item.user_old %></div>
                    <div class="sale-timer-blue-account"><%- __(item.user) %></div>
            </div>
        </div>
        <div class="sale-timer-right column right">
            <div class="sale-timer-right-text"><%-__('Applicable for')%></div>
            <div style="display: flex">
                <div class="sale-timer-right-black"> <span data-text-counter="<%- item.time %>" data-text-counter-minutes="true"></span>
                    <%-__('minutes')%></div>
                <div class="sale-timer-right-black"> <span data-text-counter="<%- item.time %>" data-text-counter-seconds="true"></span>
                    <%-__('seconds')%></div>
            </div>
        </div>

    </div>
    <% }
    %>


    <% if (item.type=='options-multiple-images' ) { %>
        <div class="quiz__body <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-question-type="options-multiple" data-required-answer="<%-item.required_answer%>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="quiz__eyes eyes-quiz">
                <% item.options.forEach(function(option, index) { %>
                    <label class="eyes-quiz__label <% if (option.checked || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && (function() { var saved = window.user_properties[item.name || screen.id]; var val = String(option.value || option.content || (typeof option == 'object' ? index : option)); return Array.isArray(saved) ? saved.includes(val) : (typeof saved === 'string' ? saved.split('||').includes(val) : false); })())) { %>selected<% }%>">
                        <input class="eyes-quiz__input" type="checkbox" data-index="<%- index %>" name="<%- item.name || screen.id %>" id="<%- screen.id %>-<%- index %>" value="<%- escapeHtmlForAttribute(option.value || option.content || (typeof option == 'object' ? index : option)) %>" <% if (option.checked || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && (function() { var saved = window.user_properties[item.name || screen.id]; var val = String(option.value || option.content || (typeof option == 'object' ? index : option)); return Array.isArray(saved) ? saved.includes(val) : (typeof saved === 'string' ? saved.split('||').includes(val) : false); })())) { %>checked="checked"<% }%> >
                        <span class="eyes-quiz__inner">
        <span class="eyes-quiz__top">
          <span class="eyes-quiz__image">
              <% if (option.image) { %>
                  <img src="<%- __(option.image) %>" alt="">
              <% } %>
          </span>
          <span class="eyes-quiz__round"></span>
        </span>
        <span class="eyes-quiz__descr"><%- __(option.content || option) %></span>
      </span>
                    </label>
                <% }) %>
            </div>
        </div>
    <% } %>

    <% if (item.type=='options-image-horizontal' ) { %>
        <div class="quiz__body <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-question-type="options" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="quiz__gender gender-quiz">
                <% item.options.forEach(function(option, index) { %>
                    <div class="gender-quiz__line">
                        <label class="gender-quiz__label <% if (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && window.user_properties[item.name || screen.id] == (option.value || option.content || (typeof option == 'object' ? index : option))) { %>selected<% }%>">
                            <input class="gender-quiz__input" type="radio" name="<%- item.name || screen.id %>" id="<%- screen.id %>-<%- index %>" value="<%- escapeHtmlForAttribute(option.value || option.content || (typeof option == 'object' ? index : option)) %>" <%- option.onclick ? 'data-next-screen="' + option.onclick + '"' : '' %> <% if (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && window.user_properties[item.name || screen.id] == (option.value || option.content || (typeof option == 'object' ? index : option))) { %>checked="checked"<% }%>>
                            <span class="gender-quiz__body">
          <span class="gender-quiz__inner">
            <span class="gender-quiz__descr">
              <%- __(option.content) %>
            </span>
            <%- __(option.icon) %>
          </span>
          <span class="gender-quiz__image">
            <img src="<%- __(option.image) %>" alt="<%- option.value %>">
          </span>
        </span>
                        </label>
                    </div>
                <% }) %>
            </div>
        </div>
    <% } %>

    <% if (item.type=='options-vertical' ) { %>
        <div class="quiz__body <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-question-type="options" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="quiz__choice choice-quiz">
                <% item.options.forEach(function(option, index) { %>
                    <label class="choice-quiz__label">
                        <input class="choice-quiz__input" type="radio" name="<%- item.name || screen.id %>" id="<%- item.id %>-<%- index %>" value="<%- option.value || option.content || (typeof option == 'object' ? index : option) %>" <%- option.onclick ? 'data-next-screen="' + option.onclick + '"' : '' %>>
                        <span class="choice-quiz__body">
          <span class="choice-quiz__descr">
            <%- __(option.content)     %>
          </span>
        </span>
                    </label>
                <% }) %>
            </div>
        </div>
    <% } %>

    <% if (item.type=='options-images-small' ) { %>
        <div class="quiz__body <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-item.style%>" data-question-type="options" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="quiz__shape shape-quiz">
                <% item.options.forEach(function(option, index) { %>
                    <label class="shape-quiz__label <% if (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && window.user_properties[item.name || screen.id] == (option.value || option.content || (typeof option == 'object' ? index : option))) { %>selected<% }%>">
                        <input class="shape-quiz__input" type="radio" name="<%- item.name || screen.id %>" id="<%- screen.id %>-<%- index %>" value="<%- escapeHtmlForAttribute(option.value || option.content || (typeof option == 'object' ? index : option)) %>" <%- option.onclick ? 'data-next-screen="' + option.onclick + '"' : '' %> <% if (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && window.user_properties[item.name || screen.id] == (option.value || option.content || (typeof option == 'object' ? index : option))) { %>checked="checked"<% }%>>
                        <span class="shape-quiz__inner">
        <span class="shape-quiz__image">
          <img src="<%- __(option.image) %>" alt="<%- option.content %>">
        </span>
        <span class="shape-quiz__descr">
          <%- __(option.content)     %>
        </span>
      </span>
                    </label>
                <% })     %>
            </div>
        </div>
    <% } %>

    <% if (item.type=='options-evaluation' ) { %>
        <div class="quiz__body <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="flex-direction: column;  <%-item.style%>" data-question-type="options-evaluation" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="evaluation-quiz__value" <%- item.hide_number ? 'style="display: none"' : '' %>>
                <% if (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id]) {
                    var savedValue = window.user_properties[item.name || screen.id];
                    var displayValue = savedValue;
                    for (var i = 0; i < item.options.length; i++) {
                        var opt = item.options[i];
                        var optValue = opt.value || opt.content || (typeof opt == 'object' ? i : opt);
                        if (String(optValue) === String(savedValue)) {
                            displayValue = opt.content || opt.value || savedValue;
                            break;
                        }
                    }
                %><%- displayValue %><% } else { %>·<% } %>
            </div>
            <ul class="evaluation-quiz__list">
                <% item.options.forEach(function(option, index) { %>
                    <li class="evaluation-quiz__item">
                        <label class="evaluation-quiz__count <% if (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && window.user_properties[item.name || screen.id] == (option.value || option.content || (typeof option == 'object' ? index : option))) { %>selected<% }%>">
                            <input class="evaluation-quiz__count-input" type="radio" data-index="<%- index %>" name="<%- item.name || screen.id %>" id="<%- screen.id %>-<%- index %>" value="<%- escapeHtmlForAttribute(option.value || option.content || (typeof option == 'object' ? index : option)) %>" <%- option.onclick ? 'data-next-screen="' + option.onclick + '"' : '' %> <% if (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && window.user_properties[item.name || screen.id] == (option.value || option.content || (typeof option == 'object' ? index : option))) { %>checked="checked"<% }%>>
                            <span class="evaluation-quiz__count-num">
                                <%- __(replaceStartingEmojiWithSpan(option.content || option))%>
                            </span>
                        </label>
                    </li>
                <% })%>
            </ul>
            <div class="evaluation-quiz__bottom">
                <span><%- __(item.text_left) %></span>
                <span><%- __(item.text_right) %></span>
            </div>
        </div>
    <% }%>

    <% if (item.type=='progress-circle' ) { %>
        <div class="personalizing-quiz__counter counter-quiz <%-item.class || ''%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-progress-type="circle" data-progress-time="<%- item.time || '5000' %>" data-on-progress-end="<%- item.on_progress_end || '' %>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <svg class="counter-quiz__round" xmlns="http://www.w3.org/2000/svg" width="<% if (item.width ) { %><%- item.width %><% } else { %>142<% } %>" height="<% if (item.width ) { %><%- item.width %><% } else { %>142<% } %>" viewBox="0 0 <% if (item.width ) { %><%- item.width %><% } else { %>142<% } %> <% if (item.width ) { %><%- item.width %><% } else { %>142<% } %>">
                <defs>
                    <linearGradient id="spinner-secondHalf-<%- contentItemIndex %>">
                        <stop offset="0%" stop-color="#b2b2b269" stop-opacity="0.1" />
                        <stop offset="100%" stop-color="#b2b2b269" stop-opacity="0.6" />
                    </linearGradient>
                    <linearGradient id="spinner-gradient-<%- contentItemIndex %>">
                        <stop offset="0%" stop-opacity="1" stop-color="<% if (item.gradient_color1 ) { %><%- item.gradient_color1 %><% } else { %>var(--button-background)<% } %>" />
                        <stop offset="100%" stop-opacity="1" stop-color="<% if (item.gradient_color2 ) { %><%- item.gradient_color2 %><% } else { %>var(--button-background)<% } %>" />
                    </linearGradient>
                </defs>
                <circle fill="none"
                        stroke="url(#spinner-secondHalf-<%- contentItemIndex %>)"
                        cx="<% if (item.width ) { %><%- parseInt(item.width)/2 %><% } else { %>71<% } %>"
                        cy="<% if (item.width ) { %><%- parseInt(item.width)/2 %><% } else { %>71<% } %>"
                        r="<% if (item.width ) { %><%- (parseInt(item.width)/2 - parseInt(item.stroke)) %><% } else { %>67<% } %>"
                        stroke-width="<% if (item.stroke ) { %><%- parseInt(item.stroke) + 4 %><% } else { %>9<% } %>"
                        stroke-linecap="round" />
                <circle fill="none"
                        stroke="url(#spinner-gradient-<%- contentItemIndex %>)"
                            data-progress-el="circle"
                            data-progress-percent="<% if (item.percent ) { %><%- __(item.percent) %><% } else { %>100<% } %>"
                            cx="<% if (item.width ) { %><%- parseInt(item.width)/2 %><% } else { %>71<% } %>"
                            cy="<% if (item.width ) { %><%- parseInt(item.width)/2 %><% } else { %>71<% } %>"
                            r="<% if (item.width ) { %><%- (parseInt(item.width)/2 - parseInt(item.stroke)) %><% } else { %>67<% } %>"
                            stroke-width="<% if (item.stroke ) { %><%- item.stroke %><% } else { %>5<% } %>"
                            stroke-linecap="round" />
            </svg>
            <% if (item.text) { %>
                <div class="counter-quiz__number" >
                    <%- __(item.text) %>
                </div>
            <% } %>
            <div class="counter-quiz__number" data-progress-el="number" <% if (item.text) { %>style="display: none" <% } %>>
                0%
            </div>
        </div>

        <% if (item.questions_popups ) { %>
        <% item.questions_popups.forEach(function(option) { %>
            <div class="progress-bars-popup-block" data-progress-bars-popup>
                <div class="progress-bars-popup">
                    <div class="progress-bars-popup-title"><%- __(option.title) %></div>
                    <% if (option.image ) { %>
                        <img src="<%- option.image %>" alt="" />

                    <% } %>
                    <div class="progress-bars-popup-btns">
                        <% (option.options || []).forEach(function(option1) { %>
                            <button type="button"><%- __(option1) %></button>
                        <% }) %>
                    </div>
                </div>
                <div class="progress-bars-bg"></div>
            </div>
        <% }) %>
        <% } %>
    <% } %>

    <% if (item.type=='progress-bars' ) { %>

      <div data-progress-type="progress-bars" class="<%-item.class || ''%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-progress-duration="<% if (item.duration ) { %><%- item.duration%><% } else { %>5000<% } %>"  data-on-progress-end="<%- item.on_progress_end || '' %>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-progress-complete-content="<%-item.progress_complete_content || ''%>">
            <% if (item.checkmark_content) { %>
                <div style="display: none;" data-checkmark-content><%- item.checkmark_content %></div>
            <% } %>
            <% item.options.forEach(function(option, index) { %>
                <div class="complete__item complete__progress" style="opacity: 0" <% if (option.percent ) { %>data-percent="<%- option.percent%>"<% } %>>
                    <div class="complete__progress-descr">
                        <% if (item.list_icon && item.list_icon[index]) { %>
                        <img src="<%- item.list_icon[index] %>" alt="" />
                        <% } %>
                        <%- __(option.content || option) %>
                    </div>
                    <div class="complete__progress-bar" <% if (item.show_progress == "false") {%>style="display: none"<%}%>>
                        <div class="complete__progress-bar-line">
                            <div class="complete__progress-bar-track" style="background: linear-gradient(90deg, <%-item.color_gradient%>)">
                            </div>
                        </div>
                        <div class="complete__progress-bar-percent">
                            0%
                        </div>
                    </div>
                </div>
            <% }) %>
        </div>
        <% if (item.questions_popups ) { %>
            <input type="hidden" value="<%=item.popups_delay_time%>" data-popups-delay-time>
            <% item.questions_popups.forEach(function(option) { %>
                <div class="progress-bars-popup-block" data-progress-bars-popup>
                    <div class="progress-bars-popup">
                        <div class="progress-bars-popup-title"><%- __(option.title) %></div>
                        <% if (option.image ) { %>
                            <img src="<%- option.image %>" alt="" />

                        <% } %>
                        <div class="progress-bars-popup-btns">
                        <% (option.options || []).forEach(function(option1) { %>
                            <button type="button"><%- __(option1) %></button>
                        <% }) %>
                        </div>
                    </div>
                    <div class="progress-bars-bg"></div>
                </div>
            <% }) %>
        <% } %>
    <% }
    %>

    <% if (item.type=='email' ) { %>
        <div class="email__form-line <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" data-email-container <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <label class="email__form-label" for="<%- item.name || screen.id %>-el"><%- __(item.label) %></label>
            <input class="email__form-input" id="<%- item.name || screen.id %>-el" type="email" name="<%- item.name || screen.id %>" placeholder="<%- __(item.placeholder) %>" value="<%- __((window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id]) ? window.user_properties[item.name || screen.id] : (item.value || '')) %>" required <%= item.isAutofocus === "false" ? '' : 'data-autofocus' %> <%- item.attributes || '' %> data-email-input  data-domains='<%= JSON.stringify(item.domains || []) %>'
                   data-callback="<%- JSON.stringify({callback: item.callback || ''}).replace(/"/g, '&quot;') %>">
            <div class="input-error-message" style="display: none; padding: 5px 0; color: red;" data-email-error><%-__('Please enter a valid email address to continue')%></div>
            <div class="options" style="display: none;" data-email-options></div>
        </div>
    <% } %>

    <% if (item.type=='popup-email' ) { %>
        <div class="popup-email <%- item.class %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%- item.style %>" data-block-area-index="<%-contentItemIndex%>">
            <div id="popup-plan" aria-hidden="true" class="popup popup_show">
                <div class="popup__wrapper">
                    <div class="popup__content plan-popup">
                        <h4 class="title">
                            <%- __(item.title) %>
                        </h4>
                        <div class="email__form-line" data-email-container>
                            <label class="email__form-label" for="<%- screen.id %>-el"><%- item.label %></label>
                            <input class="email__form-input" id="<%- screen.id %>-el" type="email" name="<%- screen.id %>" placeholder="<%- item.placeholder %>" required value="<%- __((window.quiz.custom_json?.prefill_answers && window.user_properties[screen.id]) ? window.user_properties[screen.id] : '')%>" <%= item.isAutofocus === "false" ? '' : 'data-autofocus' %> data-domains='<%= JSON.stringify(item.domains || []) %>' data-email-input>
                            <div class="input-error-message" style="display: none; padding: 5px 0; color: red;" data-email-error><%- __(item.error_message)%></div>
                            <div class="options" style="display: none;" data-email-options>
                            </div>
                        </div>
                        <div class="quiz__descr">
                            <p><%- __(item.paragraph) %></p>
                        </div>
                        <button class="quiz__step-button button" type="button" data-screen-next data-email-button>
                            <span><%- __(item.continue_button_text) %></span>
                            <svg class="button__icon" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.5 12H5.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12.5 19L5.5 12L12.5 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    <% } %>

    <% if (item.type=='text' ) { %>
        <div class="email__form-line text <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <label class="email__form-label" for="<%- item.name || screen.id %>-el"><%- item.label %></label>
            <% if (item.isTextarea) { %>
                <textarea class="email__form-input" id="<%- item.name || screen.id %>-el" name="<%- item.name || screen.id %>" placeholder="<%- item.placeholder || '' %>" <% if(item.required == 'true') {%>required<% } %> <%= item.isAutofocus === "false" ? '' : 'data-autofocus' %>
                data-callback="<%- JSON.stringify({callback: item.callback || ''}).replace(/"/g, '&quot;') %>"
                ><%- __(item.value || ((window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id]) ? window.user_properties[item.name || screen.id] : '')) %></textarea>
            <% } else { %>
                <input class="email__form-input" id="<%- item.name || screen.id %>-el" type="text" name="<%- item.name || screen.id %>" placeholder="<%- item.placeholder || '' %>" <% if(item.required == 'true') {%>required<% } %> value="<%-__(item.value || ((window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id]) ? window.user_properties[item.name || screen.id] : ''))%>" <%= item.isAutofocus === "false" ? '' : 'data-autofocus' %>
                       data-callback="<%- JSON.stringify({callback: item.callback || ''}).replace(/"/g, '&quot;') %>"
                >
            <% } %>
            <div class="input-error-message" style="display: none; padding: 5px 0; color: red;"><%-__('Please type the answer')%></div>
        </div>

        <script>
            var textInput = document.getElementById('<%- item.name || screen.id %>-el');

            textInput.addEventListener('keydown', function(event) {
                if (event.key === 'Enter') {
                    event.preventDefault();
                }
            });
        </script>
    <% } %>

    <% if (item.type=='city' ) { %>
        <div class="email__form-line text <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <label class="email__form-label" for="<%- item.name || screen.id %>-el"><%- item.label %></label>

            <input class="type-input__form-input" data-select-autocomplete="true" id="<%- item.name || screen.id %>-el" type="text" name="<%- item.name || screen.id %>" placeholder="<%- item.placeholder || '' %>" <% if(item.required == 'true') {%>required<% } %> value="<%-__(item.value || ((window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id]) ? window.user_properties[item.name || screen.id] : ''))%>" autocomplete="off" <%= item.isAutofocus === "false" ? '' : 'data-autofocus' %>>

        </div>
        <script defer async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAS5pjJEZxPLa-C_CTKmXWThqJYp7TrJ3Q&libraries=places&callback=mapReady"></script>
        <script>
            function mapReady(){
                var textInput = document.getElementById('<%- item.name || screen.id %>-el');
                new google.maps.places.Autocomplete(textInput, {
                types: ["(cities)"], // You can remove this line to allow all types
                fields: ["address_components", "geometry", "name"],
                });
            }

        </script>
    <% } %>

        <% if (item.type=='password' ) { %>
            <div class="email__form-line password <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
                <label class="email__form-label" for="<%- item.name || screen.id + '-password' %>"><%- item.label %></label>
                <input class="email__form-input" id="<%- item.name || screen.id + '-password' %>" type="password" name="<%- item.name || screen.id + '-password' %>" placeholder="<%- item.placeholder || '' %>" <% if(item.required == 'true') {%>required<% } %> value="" <%= item.isAutofocus === "false" ? '' : 'data-autofocus' %> minlength="<%- item.minLength || '' %>">
                <div class="input-error-message" style="display: none; padding: 5px 0; color: red;"><%-__('Please type your password')%></div>
            </div>

            <script>
				var textInput = document.getElementById('<%- item.name || screen.id + '-password' %>');

				textInput.addEventListener('keydown', function(event) {
					if (event.key === 'Enter') {
						event.preventDefault();
					}
				});
            </script>
        <% } %>

    <% if (item.type=='time-input' ) { %>
        <div class="time__form-line <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <label class="time__form-label" for="<%- item.name || screen.id %>-el"><%- item.label %></label>
            <input class="time__form-input" id="<%- item.name || screen.id %>-el" type="time" maxlength="5" name="<%- item.name || screen.id %>" placeholder="<%- item.placeholder || '' %>" <%- item.step ? `step="${item.step}"` : '' %> <% if(item.required == 'true') {%>required<% } %> value="<%- __(item.value || ((window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id]) ? window.user_properties[item.name || screen.id] : '')) %>" autofocus>
            <div class="input-error-message" style="display: none; padding: 5px 0; color: red;"><%-__('Please type the answer')%></div>
        </div>

        <script>
            var timeInput = document.getElementById('<%- item.name || screen.id %>-el');

			timeInput.addEventListener('keydown', function(event) {
                if (event.key === 'Enter') {
                    event.preventDefault();
                }
            });
        </script>
    <% } %>

    <% if (item.type=='time-select' ) { %>
        <div class="time__form-line <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-question-type="time-select" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <label class="time__form-label" for="<%- screen.id %>-el"><%- item.label %></label>
            <div class="time__form-inputs">
                <%
                    const timeValue = __(item.value);
                    const [hours, minutes] = timeValue ? timeValue.split(':').map(Number) : [0, 0];

                    const roundedMinutes = Math.round(minutes / 5) * 5;

                    let adjustedHours = hours;
                    let adjustedMinutes = roundedMinutes;

                    if (roundedMinutes === 60) {
                        adjustedHours = (hours + 1) % 24;
                        adjustedMinutes = 0;
                    }
                %>

                <select id="<%- screen.id %>-el-h" name="<%- item.name || screen.id %>-time-hours" <% if(item.required == 'true') {%>required<% } %>>
                    <% for (let i = 0; i <= 23; i++) { %>
                        <option value="<%= i %>" <%= (i === adjustedHours) ? 'selected' : '' %>><%= String(i).padStart(2, '0') %></option>
                    <% } %>
                </select>
                <div>:</div>
                <select id="<%- screen.id %>-el-min" name="<%- item.name || screen.id %>-time-minutes" <% if(item.required == 'true') {%>required<% } %>>
                    <% for (let j = 0; j < 60; j += 5) { %>
                        <option value="<%= j %>" <%= (j === adjustedMinutes) ? 'selected' : '' %>><%= String(j).padStart(2, '0') %></option>
                    <% } %>
                </select>
            </div>
            <div class="input-error-message" style="display: none; padding: 5px 0; color: red;"><%-__('Please type the answer')%></div>
        </div>
    <% } %>

    <% if (item.type=='number' ) { %>
    <div class="number__form-line <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
        <label class="number__form-label" for="<%- item.name || screen.id %>-el"><%- item.label %></label>
        <input class="number__form-input" id="<%- item.name || screen.id %>-el" type="number" pattern="[0-9]*" name="<%- item.name || screen.id %>" placeholder="<%- item.placeholder %>" <% if(item.required == 'true') {%>required<% } %> value="<%-__(item.value || ((window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id]) ? window.user_properties[item.name || screen.id] : ''))%>" <%= item.isAutofocus === "false" ? '' : 'data-autofocus' %>
               data-callback="<%- JSON.stringify({callback: item.callback || ''}).replace(/"/g, '&quot;') %>"
        >
        <div class="input-error-message" style="display: none; padding: 5px 0; color: red;"><%-__('Please type the answer')%></div>
    </div>

    <script>
		var numberInput = document.getElementById('<%- item.name || screen.id %>-el');

		numberInput.addEventListener('keydown', function(event) {
			if (event.key === 'Enter') {
				event.preventDefault();
			}
		});
    </script>
    <% } %>

    <% if (item.type=='date' ) { %>
        <div class="date__form-line <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <label class="date__form-label" for="<%- item.name || screen.id %>-el-date"><%- item.label %></label>
            <input class="date__form-input" id="<%- item.name || screen.id %>-el-date" type="date" name="<%- item.name || screen.id %>" placeholder="<%- item.placeholder %>" <% if(item.required == 'true') {%>required<% } %> value="<%- __(item.value || ((window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id]) ? window.user_properties[item.name || screen.id] : ''))%>" autofocus>
            <div class="input-error-message" style="display: none; padding: 5px 0; color: red;"><%-__('Please type the answer')%></div>
        </div>

        <script>
            var textInput = document.getElementById('<%- item.name || screen.id %>-el-date');

            function decodeHtml(html) {
                var txt = document.createElement("textarea");
                txt.innerHTML = html;
                return txt.value;
            }

            window.how_much_add_month = JSON.parse(decodeHtml('<%= JSON.stringify(item.how_much_add_month) || '{}' %>'));
            function setDefaultDate() {
                var today = new Date();

                today.setMonth(today.getMonth() + Number(window.how_much_add_month));
                var year = today.getFullYear();
                var month = String(today.getMonth() + 1).padStart(2, '0');
                var day = String(today.getDate()).padStart(2, '0');
                var defaultDate = `${year}-${month}-${day}`;
                textInput.value = defaultDate;
            }

            if (!textInput.value) {
                setDefaultDate();
            }
            textInput.addEventListener('keydown', function(event) {
                if (event.key === 'Enter') {
                    event.preventDefault();
                }
            });
        </script>
    <% } %>

    <% if (item.type=='date-format' ) { %>
        <%
            var dateFormat = item.date_format || 'DD-MM-YYYY';
            var dateOrder = [];

            if (dateFormat.toUpperCase().indexOf('DD') < dateFormat.toUpperCase().indexOf('MM') &&
                    dateFormat.toUpperCase().indexOf('MM') < dateFormat.toUpperCase().indexOf('YYYY')) {
                dateOrder = ['day', 'month', 'year']; // DD-MM-YYYY
            } else if (dateFormat.toUpperCase().indexOf('MM') < dateFormat.toUpperCase().indexOf('DD') &&
                    dateFormat.toUpperCase().indexOf('DD') < dateFormat.toUpperCase().indexOf('YYYY')) {
                dateOrder = ['month', 'day', 'year']; // MM-DD-YYYY
            } else if (dateFormat.toUpperCase().indexOf('YYYY') < dateFormat.toUpperCase().indexOf('MM') &&
                    dateFormat.toUpperCase().indexOf('MM') < dateFormat.toUpperCase().indexOf('DD')) {
                dateOrder = ['year', 'month', 'day']; // YYYY-MM-DD
            } else {
                dateOrder = ['day', 'month', 'year']; // default
            }

            var defaultDay = null;
            var defaultMonth = null;
            var defaultYear = null;

            if (item.value) {
                // Try to parse the value as a date
                var parsedDate = null;

                // Try different separators and formats
                var separators = ['-', '.', '/', ' '];
                var parts = null;

                for (var i = 0; i < separators.length; i++) {
                    if (item.value.indexOf(separators[i]) > -1) {
                        parts = item.value.split(separators[i]);
                        break;
                    }
                }

                if (parts && parts.length === 3) {
                    var p1 = parseInt(parts[0]);
                    var p2 = parseInt(parts[1]);
                    var p3 = parseInt(parts[2]);

                    if (!isNaN(p1) && !isNaN(p2) && !isNaN(p3)) {
                        // Determine format based on values and current format
                        if (p3 > 31 || p3.toString().length === 4) {
                            // Year is last
                            if (p1 > 12) {
                                defaultYear = p3; defaultMonth = p2; defaultDay = p1; // DD-MM-YYYY
                            } else if (p2 > 12) {
                                defaultYear = p3; defaultMonth = p1; defaultDay = p2; // MM-DD-YYYY
                            } else {
                                // Use current format preference
                                if (dateFormat === 'MM-DD-YYYY') {
                                    defaultYear = p3; defaultMonth = p1; defaultDay = p2;
                                } else {
                                    defaultYear = p3; defaultMonth = p2; defaultDay = p1; // default DD-MM-YYYY
                                }
                            }
                        } else {
                            // All values are ambiguous (≤31), use current format
                            if (dateFormat === 'MM-DD-YYYY') {
                                defaultYear = p3; defaultMonth = p1; defaultDay = p2;
                            } else if (dateFormat === 'YYYY-MM-DD') {
                                defaultYear = p1; defaultMonth = p2; defaultDay = p3;
                            } else {
                                defaultYear = p3; defaultMonth = p2; defaultDay = p1; // default DD-MM-YYYY
                            }
                        }
                    }
                }

                // If parsing failed, try as ISO date
                if (defaultDay === null) {
                    var isoDate = new Date(item.value);
                    if (!isNaN(isoDate.getTime())) {
                        defaultDay = isoDate.getDate();
                        defaultMonth = isoDate.getMonth() + 1;
                        defaultYear = isoDate.getFullYear();
                    }
                }
            }

            var minDate = null;
            var maxDate = null;
            if (item.min_date) {
                minDate = new Date(item.min_date);
            }
            if (item.max_date) {
                maxDate = new Date(item.max_date);
            }

            var minYear = minDate ? minDate.getFullYear() : 1900;
            var maxYear = maxDate ? maxDate.getFullYear() : 2100;
        %>
        <div class="container-type container-type-<%- item.type %> <%- item.container_class || '' %>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
            <div class="type-date-format <%- item.class || '' %>" data-date-format
                 data-question-type="<%- item.type %>"
                 data-min-date="<%- item.min_date || '' %>"
                 data-max-date="<%- item.max_date || '' %>">
                <% if (item.label) { %>
                    <label class="type-date-format__form-label"><%- item.label %></label>
                <% } %>


                <!-- Date Format Container -->
                <div class="date-format-container active" data-content="<%= dateFormat %>">
                    <div class="date-format-wrapper">
                        <% if (dateFormat === 'DD-MM-YYYY') { %>
                            <div class="date-format-group">
                                <select name="<%- item.name || screen.id %>_day" class="date-format-select" data-date-format-select <% if(item.required == 'true') {%>required<% } %>>
                                    <option value=""><%- item.placeholder_day || 'DD' %></option>
                                    <% for(var d = 1; d <= 31; d++) { %>
                                        <option value="<%- d %>" <% if (d === defaultDay || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && (function() { var parts = window.user_properties[item.name || screen.id].split(/[-.\/ ]/); return parts.length === 3 && parseInt(parts[0]) === d; })())) { %>selected<% } %>><%- String(d).padStart(2, '0') %></option>
                                    <% } %>
                                </select>
                            </div>
                            <div class="date-format-group">
                                <select name="<%- item.name || screen.id %>_month" class="date-format-select" data-date-format-select <% if(item.required == 'true') {%>required<% } %>>
                                    <option value=""><%- item.placeholder_month || 'MM' %></option>
                                    <% for(var m = 1; m <= 12; m++) { %>
                                        <option value="<%- m %>" <% if (m === defaultMonth || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && (function() { var parts = window.user_properties[item.name || screen.id].split(/[-.\/ ]/); return parts.length === 3 && parseInt(parts[1]) === m; })())) { %>selected<% } %>><%- String(m).padStart(2, '0') %></option>
                                    <% } %>
                                </select>
                            </div>
                            <div class="date-format-group">
                                <select name="<%- item.name || screen.id %>_year" class="date-format-select" data-date-format-select <% if(item.required == 'true') {%>required<% } %>>
                                    <option value=""><%- item.placeholder_year || 'YYYY' %></option>
                                    <% for(var y = maxYear; y >= minYear; y--) { %>
                                        <option value="<%- y %>" <% if (y === defaultYear || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && (function() { var parts = window.user_properties[item.name || screen.id].split(/[-.\/ ]/); return parts.length === 3 && parseInt(parts[2]) === y; })())) { %>selected<% } %>><%- y %></option>
                                    <% } %>
                                </select>
                            </div>
                        <% } else if (dateFormat === 'MM-DD-YYYY') { %>
                            <div class="date-format-group">
                                <select name="<%- item.name || screen.id %>_month" class="date-format-select" data-date-format-select <% if(item.required == 'true') {%>required<% } %>>
                                    <option value=""><%- item.placeholder_month || 'MM' %></option>
                                    <% for(var m = 1; m <= 12; m++) { %>
                                        <option value="<%- m %>" <% if (m === defaultMonth || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && (function() { var parts = window.user_properties[item.name || screen.id].split(/[-.\/ ]/); return parts.length === 3 && parseInt(parts[0]) === m; })())) { %>selected<% } %>><%- String(m).padStart(2, '0') %></option>
                                    <% } %>
                                </select>
                            </div>
                            <div class="date-format-group">
                                <select name="<%- item.name || screen.id %>_day" class="date-format-select" data-date-format-select <% if(item.required == 'true') {%>required<% } %>>
                                    <option value=""><%- item.placeholder_day || 'DD' %></option>
                                    <% for(var d = 1; d <= 31; d++) { %>
                                        <option value="<%- d %>" <% if (d === defaultDay || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && (function() { var parts = window.user_properties[item.name || screen.id].split(/[-.\/ ]/); return parts.length === 3 && parseInt(parts[1]) === d; })())) { %>selected<% } %>><%- String(d).padStart(2, '0') %></option>
                                    <% } %>
                                </select>
                            </div>
                            <div class="date-format-group">
                                <select name="<%- item.name || screen.id %>_year" class="date-format-select" data-date-format-select <% if(item.required == 'true') {%>required<% } %>>
                                    <option value=""><%- item.placeholder_year || 'YYYY' %></option>
                                    <% for(var y = maxYear; y >= minYear; y--) { %>
                                        <option value="<%- y %>" <% if (y === defaultYear || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && (function() { var parts = window.user_properties[item.name || screen.id].split(/[-.\/ ]/); return parts.length === 3 && parseInt(parts[2]) === y; })())) { %>selected<% } %>><%- y %></option>
                                    <% } %>
                                </select>
                            </div>
                        <% } %>
                    </div>
                </div>

                <input type="hidden" name="<%- item.name || screen.id %>_format" value="<%= dateFormat %>">
                <input type="hidden" name="<%- item.name || screen.id %>" class="final-date-value" data-final-date-value value="<%- item.value || '' %>">

                <div class="date-format__error-message input-error-message" data-format-error style="display: none; padding: 5px 0; color: red;">Please enter a valid date</div>
            </div>
        </div>
    <% } %>

    <% if (item.type=='time-format' ) { %>
        <%
            // Parse item.value if provided (expects format like "02:30 PM")
            var defaultHour = null;
            var defaultMinute = null;
            var defaultPeriod = null;

            if (item.value) {
                var timeParts = item.value.trim().split(/[\s:]+/);

                if (timeParts.length >= 2) {
                    var h = parseInt(timeParts[0]);
                    var m = parseInt(timeParts[1]);

                    if (!isNaN(h) && !isNaN(m)) {
                        // Check if 12-hour format with AM/PM
                        if (timeParts.length >= 3 && (timeParts[2].toUpperCase() === 'AM' || timeParts[2].toUpperCase() === 'PM')) {
                            defaultHour = h;
                            defaultMinute = m;
                            defaultPeriod = timeParts[2].toUpperCase();
                        } else {
                            // Convert 24h to 12h if no AM/PM provided
                            if (h >= 12) {
                                defaultPeriod = 'PM';
                                defaultHour = h > 12 ? h - 12 : 12;
                            } else {
                                defaultPeriod = 'AM';
                                defaultHour = h === 0 ? 12 : h;
                            }
                            defaultMinute = m;
                        }
                    }
                }
            }
        %>
        <div class="container-type container-type-<%- item.type %> <%- item.container_class || '' %>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
            <div class="type-time-format <%- item.class || '' %>" data-time-format
                 data-question-type="<%- item.type %>"
                 data-time-format-type="12">
                <% if (item.label) { %>
                    <label class="type-time-format__form-label"><%- item.label %></label>
                <% } %>

                <!-- Time Format Container -->
                <div class="time-format-container active" data-content="12">
                    <div class="time-format-wrapper">
                        <!-- Hour -->
                        <div class="time-format-group">
                            <select name="<%- item.name || screen.id %>_hour" class="time-format-select" data-time-format-select <% if(item.required == 'true') {%>required<% } %>>
                                <option value=""><%- item.placeholder_hour || 'HH' %></option>
                                <% for(var h = 1; h <= 12; h++) { %>
                                    <option value="<%- h %>" <% if (h === defaultHour || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && (function() { var timeParts = window.user_properties[item.name || screen.id].trim().split(/[\s:]+/); if (timeParts.length >= 2) { var savedH = parseInt(timeParts[0]); if (!isNaN(savedH)) { if (timeParts.length >= 3 && (timeParts[2].toUpperCase() === 'AM' || timeParts[2].toUpperCase() === 'PM')) { return savedH === h; } else { var convertedH = savedH >= 12 ? (savedH > 12 ? savedH - 12 : 12) : (savedH === 0 ? 12 : savedH); return convertedH === h; } } } return false; })())) { %>selected<% } %>><%- String(h).padStart(2, '0') %></option>
                                <% } %>
                            </select>
                        </div>

                        <!-- Minute -->
                        <div class="time-format-group">
                            <select name="<%- item.name || screen.id %>_minute" class="time-format-select" data-time-format-select <% if(item.required == 'true') {%>required<% } %>>
                                <option value=""><%- item.placeholder_minute || 'MM' %></option>
                                <% for(var m = 0; m <= 59; m++) { %>
                                    <option value="<%- m %>" <% if (m === defaultMinute || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && (function() { var timeParts = window.user_properties[item.name || screen.id].trim().split(/[\s:]+/); if (timeParts.length >= 2) { var savedM = parseInt(timeParts[1]); return !isNaN(savedM) && savedM === m; } return false; })())) { %>selected<% } %>><%- String(m).padStart(2, '0') %></option>
                                <% } %>
                            </select>
                        </div>

                        <!-- AM/PM -->
                        <div class="time-format-group">
                            <select name="<%- item.name || screen.id %>_period" class="time-format-select" data-time-format-select <% if(item.required == 'true') {%>required<% } %>>
                                <option value="">AM/PM</option>
                                <option value="AM" <% if (defaultPeriod === 'AM' || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && (function() { var timeParts = window.user_properties[item.name || screen.id].trim().split(/[\s:]+/); if (timeParts.length >= 3) { return timeParts[2].toUpperCase() === 'AM'; } else if (timeParts.length >= 2) { var savedH = parseInt(timeParts[0]); return !isNaN(savedH) && savedH < 12; } return false; })())) { %>selected<% } %>>AM</option>
                                <option value="PM" <% if (defaultPeriod === 'PM' || (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && (function() { var timeParts = window.user_properties[item.name || screen.id].trim().split(/[\s:]+/); if (timeParts.length >= 3) { return timeParts[2].toUpperCase() === 'PM'; } else if (timeParts.length >= 2) { var savedH = parseInt(timeParts[0]); return !isNaN(savedH) && savedH >= 12; } return false; })())) { %>selected<% } %>>PM</option>
                            </select>
                        </div>
                    </div>
                </div>

                <input type="hidden" name="<%- item.name || screen.id %>_format" value="12">
                <input type="hidden" name="<%- item.name || screen.id %>" class="final-time-value" data-final-time-value value="<%- item.value || '' %>">

                <div class="time-format__error-message input-error-message" data-format-error style="display: none; padding: 5px 0; color: red; font-size: 13px;">Please enter a valid time</div>
            </div>
        </div>
    <% } %>

    <% if (item.type=='video' ) { %>
        <div class="main__ready-video <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <video <%- item.attrs %>>
                <source src="<%- __(item.src) %>" type="video/mp4">
            </video>
        </div>
    <% } %>

    <% if (item.type=='audio' ) { %>
        <div class="container-type container-type-audio <%-__(item.container_class) || ''%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
            <div class="type-audio <%-__(item.class)%>" style="<%-__(item.style)%>" data-audio-block data-audio-src="<%- __(item.src) %>" <%- item.attributes || '' %>>
                <button type="button" class="type-audio__play-btn" data-audio-play aria-label="Play / Pause">
                    <span class="type-audio__play-icon-wrap">
                        <span class="type-audio__play-icon type-audio__play-icon--play"></span>
                    </span>
                    <span class="type-audio__play-label"><%- __(item.content) %></span>
                </button>
                <% if (item.show_time === true || item.show_time === 'true') { %>
                <div class="type-audio__time" data-audio-time>
                    <span class="type-audio__time-elapsed" data-audio-time-elapsed>0:00</span>
                    <span class="type-audio__time-remaining" data-audio-time-remaining>0:00</span>
                </div>
                <% } %>
                <div class="type-audio__timeline" data-audio-timeline role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" tabindex="0">
                    <div class="type-audio__track">
                        <div class="type-audio__progress" data-audio-progress></div>
                        <div class="type-audio__scrubber" data-audio-scrubber></div>
                    </div>
                </div>
                <audio preload="metadata" data-audio-el style="display: none;"></audio>
            </div>
        </div>
    <% } %>

    <% if (item.type=='sort-select' ) { %>
        <div class="select__form-line <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-options='<%= typeof item.options === "string" ? JSON.stringify(item.options.split(",").map(i => i.trim())) : JSON.stringify(item.options || []) %>'>
            <div data-is-valid="true" data-validation-text="" data-hint-text="" class="select__form-inner">
                <input type="text" id="<%- screen.id %>-el" name="<%- screen.id %>" placeholder="<%- item.placeholder %>" autocomplete="off" data-select="input" class="select__form-input" <% if(item.required == 'true') {%>required<% } %> value="<%- (window.quiz.custom_json?.prefill_answers && window.user_properties[screen.id]) ? window.user_properties[screen.id] : '' %>">
                <button type="button" data-select="button" class="select__form-button">
                    <svg class="select__form-button-icon" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.5 19L5.5 12L12.5 5" stroke="#4F3422" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
            <div class="select__form-options" data-select="options"></div>
        </div>
    <% } %>

    <% if (item.type=='block-back-time-counter') { %>
        <div class="main__plan-info <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-timer-end-action="<%-item.on_timer_end_action || ''%>" data-timer-end-popup-id="<%-item.on_timer_end_popup_id || ''%>" data-timer-end-js-callback="<%-item.on_timer_end_js_callback || ''%>" data-timer-end-redirect-url="<%-item.on_timer_end_redirect_url || ''%>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <svg class="main__plan-info-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_1025_13267)">
                    <path d="M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433286 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34872 18.9426 4.80684 17.0679 2.9321C15.1932 1.05736 12.6513 0.00286757 10 0V0ZM10 17.5C8.51664 17.5 7.0666 17.0601 5.83323 16.236C4.59986 15.4119 3.63857 14.2406 3.07091 12.8701C2.50325 11.4997 2.35473 9.99168 2.64411 8.53682C2.9335 7.08197 3.64781 5.74559 4.6967 4.6967C5.7456 3.64781 7.08197 2.9335 8.53683 2.64411C9.99168 2.35472 11.4997 2.50325 12.8701 3.0709C14.2406 3.63856 15.4119 4.59985 16.236 5.83322C17.0601 7.06659 17.5 8.51664 17.5 10C17.4978 11.9884 16.7069 13.8948 15.3009 15.3009C13.8948 16.7069 11.9885 17.4978 10 17.5Z" fill="white"></path>
                    <path d="M8.75 9.21252L6.75 10.4625C6.61082 10.5497 6.49017 10.6634 6.39495 10.7971C6.29973 10.9309 6.2318 11.0821 6.19504 11.2422C6.15828 11.4022 6.15341 11.5679 6.18072 11.7298C6.20802 11.8918 6.26696 12.0467 6.35416 12.1859C6.4413 12.325 6.555 12.4457 6.68878 12.5409C6.82256 12.6361 6.97378 12.704 7.13382 12.7408C7.29386 12.7776 7.45957 12.7824 7.62149 12.7551C7.78341 12.7278 7.93836 12.6689 8.0775 12.5817L10.4683 11.0817C10.7082 10.9314 10.9058 10.7224 11.0426 10.4746C11.1794 10.2267 11.2507 9.9481 11.25 9.66502V6.47668C11.25 6.14516 11.1183 5.82722 10.8839 5.5928C10.6495 5.35838 10.3315 5.22668 10 5.22668C9.66847 5.22668 9.35053 5.35838 9.11611 5.5928C8.88169 5.82722 8.75 6.14516 8.75 6.47668V9.21252Z" fill="white"></path>
                </g>
                <defs>
                    <clipPath id="clip0_1025_13267">
                        <rect width="20" height="20" fill="white"></rect>
                    </clipPath>
                </defs>
            </svg>
            <p><%- item.content %> <span data-text-counter="<%- item.time %>"></span></p>
        </div>
    <% } %>

    <% if (item.type=='prices-list' ) { %>
        <ul class=" main__plan-list <%-__(item.class)%> <%-item.list_position%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-prices-list data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
        <% prices.forEach(function(price, index) {
            let comparisonPeriod = item['comparison-period'] || window.paywall_products.product_info.comparison_period;

            let priceInfo = getPriceInfo(price, comparisonPeriod);

			let priceOverride = item.prices_override && item.prices_override[index] ? item.prices_override[index] : {};

			let priceCurrent = priceInfo.priceCurrent;
			let priceOldNum = priceInfo.priceOldNum;
            let priceOld = priceOverride.price_old || priceInfo.priceOld;
            let priceCurrentSplit = priceInfo.priceCurrentSplit;
            let priceCurrentComparison = priceInfo.priceCurrentComparison;
            let priceCurrentComparisonSplit = priceInfo.priceCurrentComparisonSplit;

			if (priceOverride.price_comparison_amount && priceOverride.price_comparison_amount != ' ') {
                priceCurrentComparison = priceOverride.price_comparison_amount;
                priceCurrentComparisonSplit = parseFloat(priceCurrentComparison).toFixed(2).toString().split('.')
            }

			let specialOfferText = priceOverride.special_offer;


			let priceTitle = item["period-interval"] == 'week' ? price.period_name_weeks + ' plan' : priceInfo.period_name;

			if (priceOverride.title) {
                priceTitle = priceOverride.title;
            }

			let priceImage;

			if (priceOverride.image) {
                priceImage = priceOverride.image;
            }

			let priceContent;

			if (priceOverride.content) {
                priceContent = priceOverride.content;
            }

            let pricePeriodDescr = priceOverride.price_with_period || priceInfo.pricePeriodDescr;

			let priceComparisonDescr = priceOverride.price_comparison_period || __('per '+comparisonPeriod);

			let currency = window.paywall_products.used_currencies[price.currency];

            let bottomLabel = priceInfo.freePeriodDescr
			if (priceOverride.bottom_label == ' ') {
                bottomLabel = null;
            } else if (priceOverride.bottom_label) {
				bottomLabel = priceOverride.bottom_label;
            }
            %>
            <li class="main__plan-item" style="margin-bottom: 10px">
                <label class="main__plan-card card-plan">
                    <input
                            class="card-plan__input"
                            type="radio"
                            name="plan_card_<%= contentItemIndex%>"
                            data-price-id="<%= price.id %>"
                    <% if (index == (item.selected_price || 0)) { %> checked <% } %>
                    <% if (priceOverride.price_url) { %> data-price-url="<%-priceOverride.price_url%>" <% } %>
                    >

                    <span class="card-plan__inner">
                        <% if (specialOfferText) { %>
                            <span class="card-plan__inner-header">
                                <span><%= specialOfferText %></span>
                            </span>
                        <% } %>
                        <span class="card-plan__inner-body">
                            <svg width="108" height="80" class="svg-bg" viewBox="0 0 108 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path class="svg-bg-path" d="M1.17374 42.0141C0.448346 40.7693 0.448344 39.2307 1.17374 37.986L22.1537 1.98595C22.8703 0.75627 24.1864 0 25.6097 0H104C106.209 0 108 1.79086 108 4V76C108 78.2091 106.209 80 104 80H25.6097C24.1864 80 22.8703 79.2437 22.1537 78.014L1.17374 42.0141Z" fill="#DCE7FF" fill-opacity="0.4"/>
                            </svg>
                             <svg class="svg-active" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.5 12C0.5 5.64873 5.64873 0.5 12 0.5C18.3513 0.5 23.5 5.64873 23.5 12C23.5 18.3513 18.3513 23.5 12 23.5C5.64873 23.5 0.5 18.3513 0.5 12Z" fill="black"/>
                                <path class="svg-active-stroke" d="M0.5 12C0.5 5.64873 5.64873 0.5 12 0.5C18.3513 0.5 23.5 5.64873 23.5 12C23.5 18.3513 18.3513 23.5 12 23.5C5.64873 23.5 0.5 18.3513 0.5 12Z" stroke="#E539AA"/>
                                <path class="svg-active-bg" d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" fill="#E539AA"/>
                            </svg>
                            <svg class="svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z" fill="black"/>
                                <path d="M0.5 12C0.5 5.64873 5.64873 0.5 12 0.5C18.3513 0.5 23.5 5.64873 23.5 12C23.5 18.3513 18.3513 23.5 12 23.5C5.64873 23.5 0.5 18.3513 0.5 12Z" stroke="#DCE7FF" stroke-opacity="0.64"/>
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg" style="display: none;" viewBox="0 0 50 50" width="50px" height="50px"><path d="M25,2C12.318,2,2,12.318,2,25c0,12.683,10.318,23,23,23c12.683,0,23-10.317,23-23C48,12.318,37.683,2,25,2z M35.827,16.562	L24.316,33.525l-8.997-8.349c-0.405-0.375-0.429-1.008-0.053-1.413c0.375-0.406,1.009-0.428,1.413-0.053l7.29,6.764l10.203-15.036	c0.311-0.457,0.933-0.575,1.389-0.266C36.019,15.482,36.138,16.104,35.827,16.562z" fill="var(--primary-color)"/></svg>
                            <% if (priceOverride.top_label) { %>
                                <span class="card-plan__inner-label"><%-priceOverride.top_label%></span>
                            <% } %>
                            <% if (priceImage) { %>
                                <img class="card-plan__image" src="<%- __(priceImage) %>" alt="" />
                            <% } %>
                            <span class="card-plan__inner-left">
                                <span class="card-plan__data">
                                    <%- priceTitle %>
                                </span>
                                <span class="card-plan__data-cost">
                                    <% if ( (priceOldNum && priceOldNum > priceCurrent) || priceOverride.price_old) { %>
                                        <span><%- priceOld %></span>
                                    <% } %>
                                    <%- pricePeriodDescr %>
                                </span>

                                <!--
                                <% if (price.is_special_offer) { %>
                                    <span class="card-plan__data-discount">
                                        <span>-<%= product_info.price_group_config.special_offer.discount %>%</span>
                                    </span>
                                <% } %>


                                <% if (price.trial_period_length_in_days > 0) { %>
                                    <span class="card-plan__data-discount">
                                        <span><%= 'discount ' + currency.symbol + price.period_discount_price_amount + ' per ' + price.period_interval + ' ' + price.period %> </span>
                                    </span>
                                <% } %>

                                -->

                                <% if (bottomLabel) { %>
                                    <span class="card-plan__data-discount">
                                        <span><%= bottomLabel %></span>
                                    </span>
                                <% } %>
                            </span>

                            <%  if (priceOverride.price_comparison_amount != ' ') {%>
                            <span class="card-plan__inner-right">
                                <span class="card-plan__price">
                                    <% if (priceOverride.old_daily_price) { %>
                                    <span class="card-plan__price-top"><%-priceOverride.old_daily_price%></span>
                                    <% } %>


                                    <span class="card-plan__price-body">
                                        <span class="card-plan__price-left">
                                            <span><%= currency.symbol %></span>

                                            <% if (priceCurrentComparisonSplit) { %>
                                                <span><%= priceCurrentComparisonSplit[0] %></span>
                                            <% } else { %>
                                                <span><%= priceCurrent.toString().split('.')[0] %></span>
                                            <% } %>
                                        </span>
                                        <span class="card-plan__price-right">
                                            <% if (priceCurrentComparisonSplit) { %>
                                                <span><%= priceCurrentComparisonSplit[1] ?? "00" %></span>

                                                <span class="card-plan__price-descr"><%= priceComparisonDescr %></span>
                                            <% } else { %>
                                                <span><%= priceCurrent.toString().split('.')[1] %></span>
                                            <% } %>
                                        </span>
                                    </span>
                                </span>
                            </span>
                            <% } %>
                        </span>
                        <% if (priceContent) { %>
                            <span class="card-plan__inner-bottom">
                                <%- __(priceContent) %>
                            </span>
                        <% } %>
                        <% if (item.list_position != 'vertical') { %>
                            <span class="card-plan__more">
                                <% if (item.more_button_text)  { %>
                                    <span class="card-plan__more-text">
                                        <span><%- __(item.more_button_text) %></span>
                                        <span>
                                            <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="subscription-plan-card_collapseIcon__KDDZT"><path d="M3.33301 7.16683L9.99967 13.8335L16.6663 7.16683" stroke="currentColor" stroke-width="2.33" stroke-linecap="square"></path></svg>
                                        </span>
                                    </span>
                                <% } %>

                                <% if (item.price_content?.length || item.button_text?.length) { %>
                                <span class="card-plan__more-content">
                                    <% if (item.price_content?.length) { %>
                                        <% item.price_content.forEach(function(option) { %>
                                            <div class="card-plan__more-line">
                                                <span class="card-plan__more-descr">
                                                    <span class="option-text">
                                                        <%- __(option.content || option) %>
                                                    </span>
                                               </span>
                                            </div>
                                        <% }) %>
                                    <% } %>
                                    <% if (item.button_text?.length) { %>
                                        <button class="main__plan-button button-green"
                                            data-price-id="<%= price.id %>"
                                            <% if (!item.pay_button_onclick) { %>
                                                data-popup="#popup-plan"
                                            <% } else if (item.pay_button_onclick == 'payment-form') { %>
                                                data-scroll-to="#payment-form"
                                            <% } else if (item.pay_button_onclick == 'redirect_price_url') { %>
                                                data-redirect-price-url
                                            <% } else if (item.pay_button_onclick == 'buy_1_click') { %>
                                                data-one-click-price-id="selected"
                                            <% } else if (item.pay_button_onclick.startsWith('scroll-to-index|')) { %>
                                                data-scroll-to="[data-block-area-index='<%-item.pay_button_onclick.split('|')[1]%>']"
                                            <% } else {  %>
                                                data-popup="#<%-item.pay_button_onclick%>"
                                            <% } %> type="button">
                                                <%- __(item.button_text) %>
                                        </button>
                                    <% } %>
                                </span>
                                <% } %>
                            </span>
                        <% } %>
                    </span>
                </label>
            </li>
        <% }); %>
        </ul>
    <% } %>

    <% if (item.type == 'safe-checkout-banners') { %>
        <div class="main__plan-guarantee <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <h4 class="main__plan-guarantee-title">
                 <%- __('Guaranteed safe checkout') %>
            </h4>
            <div class="main__plan-guarantee-logos">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.80107 15.4484L10.0782 13.6881L9.46088 13.6738H6.51311L8.56166 0.684674C8.56802 0.645462 8.58868 0.6089 8.61889 0.582935C8.64909 0.556971 8.68777 0.542664 8.72804 0.542664H13.6984C15.3485 0.542664 16.4872 0.886031 17.0817 1.56376C17.3605 1.88169 17.538 2.21393 17.6238 2.57956C17.7139 2.9632 17.7155 3.42155 17.6275 3.98058L17.6212 4.02138V4.37959L17.8999 4.5375C18.1346 4.66202 18.3211 4.80456 18.4642 4.96776C18.7027 5.2396 18.8569 5.58509 18.922 5.99469C18.9893 6.41595 18.9671 6.91723 18.8569 7.48474C18.7297 8.13756 18.5241 8.70613 18.2464 9.17137C17.991 9.60005 17.6657 9.95561 17.2794 10.2312C16.9106 10.4929 16.4724 10.6916 15.9769 10.8188C15.4968 10.9439 14.9495 11.0069 14.3491 11.0069H13.9623C13.6857 11.0069 13.417 11.1065 13.2061 11.2851C12.9947 11.4674 12.8548 11.7164 12.8119 11.9888L12.7828 12.1472L12.2931 15.2497L12.2709 15.3637C12.265 15.3997 12.255 15.4177 12.2401 15.4299C12.2269 15.441 12.2078 15.4484 12.1893 15.4484H9.80107Z" fill="#253B80"></path>
                    <path d="M18.1655 4.06281C18.1507 4.15766 18.1338 4.25463 18.1147 4.35424C17.4592 7.71957 15.2167 8.88214 12.3527 8.88214H10.8944C10.5442 8.88214 10.249 9.13649 10.1944 9.48198L9.44782 14.2171L9.23639 15.5593C9.20089 15.7861 9.37575 15.9906 9.60467 15.9906H12.1911C12.4973 15.9906 12.7575 15.768 12.8057 15.466L12.8312 15.3346L13.3181 12.2443L13.3494 12.0747C13.3971 11.7716 13.6578 11.5491 13.9641 11.5491H14.3509C16.8567 11.5491 18.8184 10.5317 19.3917 7.58763C19.6312 6.35775 19.5072 5.33083 18.8735 4.60859C18.6817 4.39081 18.4437 4.21011 18.1655 4.06281Z" fill="#179BD7"></path>
                    <path d="M17.4791 3.78916C17.3789 3.76002 17.2756 3.73353 17.1696 3.70968C17.0631 3.68637 16.9539 3.6657 16.8416 3.64768C16.4484 3.5841 16.0176 3.55389 15.5561 3.55389H11.6604C11.5644 3.55389 11.4733 3.57562 11.3917 3.61483C11.2121 3.7012 11.0785 3.8713 11.0462 4.07954L10.2175 9.32862L10.1936 9.48176C10.2482 9.13627 10.5433 8.88193 10.8936 8.88193H12.3519C15.2159 8.88193 17.4584 7.71882 18.1139 4.35403C18.1335 4.25441 18.1499 4.15744 18.1647 4.06259C17.9989 3.97463 17.8193 3.89938 17.6258 3.83527C17.5782 3.81937 17.5289 3.804 17.4791 3.78916Z" fill="#222D65"></path>
                    <path d="M11.0462 4.07961C11.0786 3.87137 11.2121 3.70127 11.3917 3.61543C11.4739 3.57622 11.5645 3.55449 11.6604 3.55449H15.5561C16.0177 3.55449 16.4485 3.5847 16.8416 3.64828C16.954 3.6663 17.0631 3.68697 17.1696 3.71028C17.2756 3.73413 17.3789 3.76062 17.4791 3.78976C17.5289 3.8046 17.5782 3.81997 17.6264 3.83533C17.8198 3.89945 17.9994 3.97523 18.1653 4.06266C18.3603 2.81901 18.1637 1.97225 17.4913 1.2055C16.75 0.361384 15.412 0 13.6999 0H8.72957C8.37984 0 8.08151 0.254347 8.02747 0.600364L5.95719 13.7231C5.91639 13.9827 6.11669 14.2169 6.37845 14.2169H9.44704L10.2175 9.32869L11.0462 4.07961Z" fill="#253B80"></path>
                    <path d="M3.36046 17.7435H1.53409C1.40911 17.7435 1.30282 17.8343 1.28333 17.9576L0.544657 22.641C0.529969 22.7334 0.601539 22.8167 0.695275 22.8167H1.5672C1.69218 22.8167 1.79847 22.7259 1.81797 22.6022L2.01719 21.3391C2.03642 21.2154 2.14297 21.1246 2.26768 21.1246H2.84585C4.04893 21.1246 4.74327 20.5425 4.9246 19.3888C5.00631 18.8841 4.92807 18.4875 4.69172 18.2097C4.43215 17.9048 3.97175 17.7435 3.36046 17.7435ZM3.57117 19.4539C3.47129 20.1093 2.97057 20.1093 2.4864 20.1093H2.2108L2.40415 18.8854C2.41563 18.8114 2.47972 18.7569 2.5545 18.7569H2.68081C3.01063 18.7569 3.32174 18.7569 3.48251 18.9449C3.57838 19.0571 3.60776 19.2237 3.57117 19.4539Z" fill="#253B80"></path>
                    <path d="M8.81875 19.4328H7.94416C7.86965 19.4328 7.80529 19.4873 7.79381 19.5612L7.75508 19.8059L7.69393 19.7172C7.50459 19.4424 7.08238 19.3505 6.66097 19.3505C5.6945 19.3505 4.86904 20.0825 4.70827 21.1093C4.62469 21.6215 4.74352 22.1113 5.03408 22.4529C5.3006 22.7669 5.68195 22.8978 6.13567 22.8978C6.9144 22.8978 7.34622 22.3971 7.34622 22.3971L7.30723 22.6401C7.29255 22.733 7.36412 22.8163 7.45732 22.8163H8.24512C8.37037 22.8163 8.47613 22.7255 8.49589 22.6019L8.96857 19.6085C8.98353 19.5164 8.91222 19.4328 8.81875 19.4328ZM7.59966 21.135C7.51527 21.6346 7.11869 21.97 6.6129 21.97C6.35893 21.97 6.15597 21.8886 6.02565 21.7342C5.89639 21.581 5.84725 21.3628 5.88838 21.1198C5.96716 20.6244 6.37041 20.278 6.86847 20.278C7.11683 20.278 7.31872 20.3605 7.45171 20.5162C7.58497 20.6735 7.63785 20.893 7.59966 21.135Z" fill="#253B80"></path>
                    <path d="M13.477 19.4326H12.5981C12.5142 19.4326 12.4355 19.4742 12.3879 19.5439L11.1758 21.3294L10.662 19.6136C10.6297 19.5063 10.5306 19.4326 10.4184 19.4326H9.55476C9.44981 19.4326 9.3769 19.5351 9.41028 19.6339L10.3784 22.4748L9.46824 23.7596C9.39667 23.8608 9.46877 24 9.59242 24H10.4702C10.5535 24 10.6315 23.9594 10.6788 23.891L13.602 19.6716C13.6719 19.5706 13.6001 19.4326 13.477 19.4326Z" fill="#253B80"></path>
                    <path d="M16.3866 17.7435H14.5599C14.4352 17.7435 14.3289 17.8343 14.3094 17.9576L13.5708 22.641C13.5561 22.7334 13.6276 22.8167 13.7208 22.8167H14.6582C14.7452 22.8167 14.8198 22.7531 14.8334 22.6666L15.043 21.3391C15.0622 21.2154 15.1688 21.1246 15.2935 21.1246H15.8714C17.0748 21.1246 17.7688 20.5425 17.9504 19.3888C18.0324 18.8841 17.9536 18.4875 17.7173 18.2097C17.458 17.9048 16.9978 17.7435 16.3866 17.7435ZM16.5973 19.4539C16.4977 20.1093 15.9969 20.1093 15.5125 20.1093H15.2372L15.4308 18.8854C15.4423 18.8114 15.5058 18.7569 15.5809 18.7569H15.7072C16.0367 18.7569 16.3481 18.7569 16.5089 18.9449C16.6047 19.0571 16.6338 19.2237 16.5973 19.4539Z" fill="#179BD7"></path>
                    <path d="M21.8472 19.4328H20.9732C20.8981 19.4328 20.8343 19.4873 20.8231 19.5612L20.7844 19.8059L20.7229 19.7172C20.5336 19.4424 20.1117 19.3505 19.6903 19.3505C18.7238 19.3505 17.8986 20.0825 17.7378 21.1093C17.6545 21.6215 17.7728 22.1113 18.0634 22.4529C18.3304 22.7669 18.7112 22.8978 19.165 22.8978C19.9437 22.8978 20.3755 22.3971 20.3755 22.3971L20.3365 22.6401C20.3218 22.733 20.3934 22.8163 20.4871 22.8163H21.2747C21.3994 22.8163 21.5057 22.7255 21.5252 22.6019L21.9981 19.6085C22.0125 19.5164 21.941 19.4328 21.8472 19.4328ZM20.6281 21.135C20.5443 21.6346 20.1472 21.97 19.6414 21.97C19.3879 21.97 19.1845 21.8886 19.0541 21.7342C18.9249 21.581 18.8763 21.3628 18.9169 21.1198C18.9962 20.6244 19.3989 20.278 19.8969 20.278C20.1453 20.278 20.3472 20.3605 20.4802 20.5162C20.614 20.6735 20.6669 20.893 20.6281 21.135Z" fill="#179BD7"></path>
                    <path d="M22.8771 17.8717L22.1275 22.6407C22.1128 22.7331 22.1843 22.8165 22.2775 22.8165H23.0312C23.1564 22.8165 23.2627 22.7257 23.2819 22.602L24.0211 17.919C24.0358 17.8266 23.9642 17.743 23.871 17.743H23.0272C22.9526 17.7432 22.8886 17.7977 22.8771 17.8717Z" fill="#179BD7"></path>
                </svg>
                <svg width="50" height="16" viewBox="0 0 50 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4789 15.8754H8.23826L5.0583 3.46306C4.90736 2.8921 4.58689 2.38733 4.11548 2.14943C2.93901 1.55156 1.64263 1.07576 0.228394 0.835785V0.35791H7.05973C8.00256 0.35791 8.70968 1.07576 8.82753 1.90945L10.4775 10.8629L14.716 0.35791H18.8388L12.4789 15.8754ZM21.1959 15.8754H17.191L20.4888 0.35791H24.4937L21.1959 15.8754ZM29.6751 4.6567C29.793 3.82093 30.5001 3.34306 31.3251 3.34306C32.6214 3.22307 34.0336 3.46304 35.2121 4.05884L35.9193 0.717847C34.7407 0.239972 33.4443 0 32.2679 0C28.3808 0 25.5523 2.1494 25.5523 5.1325C25.5523 7.40189 27.5558 8.59348 28.9701 9.31133C30.5001 10.0271 31.0894 10.505 30.9715 11.2208C30.9715 12.2944 29.793 12.7723 28.6165 12.7723C27.2023 12.7723 25.788 12.4144 24.4937 11.8166L23.7866 15.1596C25.2008 15.7554 26.7309 15.9954 28.1451 15.9954C32.5036 16.1133 35.2121 13.966 35.2121 10.7429C35.2121 6.68405 29.6751 6.44614 29.6751 4.6567ZM49.2284 15.8754L46.0484 0.35791H42.6328C41.9256 0.35791 41.2185 0.835785 40.9828 1.55156L35.0943 15.8754H39.2171L40.04 13.6081H45.1056L45.577 15.8754H49.2284ZM43.222 4.53677L44.3985 10.3851H41.1007L43.222 4.53677Z" fill="#172B85"></path>
                </svg>
                <svg width="27" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.573 17.83v2.117h-.464v-.257c-.147.19-.37.31-.674.31-.598 0-1.067-.465-1.067-1.111 0-.646.47-1.111 1.067-1.111.304 0 .527.12.674.31v-.257h.464Zm-1.08.381c-.402 0-.647.306-.647.678 0 .372.245.677.647.677.384 0 .643-.292.643-.677 0-.385-.26-.678-.643-.678Zm16.755.678c0-.372.246-.678.647-.678.384 0 .643.293.643.678 0 .385-.259.677-.643.677-.401 0-.647-.305-.647-.677Zm1.728-1.908v2.966h-.465v-.257c-.147.19-.37.31-.673.31-.599 0-1.068-.465-1.068-1.111 0-.646.47-1.111 1.068-1.111.303 0 .526.12.673.31V16.98h.465ZM13.33 18.19c.299 0 .49.185.54.513h-1.107c.05-.306.236-.513.567-.513Zm-1.054.699c0-.66.438-1.111 1.063-1.111.598 0 1.008.451 1.013 1.11 0 .063-.005.12-.01.178H12.76c.067.38.339.518.638.518.214 0 .442-.08.62-.221l.228.34c-.26.217-.553.297-.875.297-.638 0-1.094-.438-1.094-1.111Zm6.664 0c0-.372.246-.678.647-.678.384 0 .643.293.643.678 0 .385-.259.677-.643.677-.401 0-.647-.305-.647-.677Zm1.727-1.058v2.116h-.464v-.257c-.147.19-.37.31-.673.31-.599 0-1.068-.465-1.068-1.111 0-.646.47-1.111 1.068-1.111.303 0 .526.12.673.31v-.257h.464Zm-4.347 1.058c0 .642.45 1.111 1.138 1.111.322 0 .536-.07.768-.252l-.223-.372a.943.943 0 0 1-.558.19c-.37-.004-.643-.27-.643-.677 0-.408.272-.673.643-.678.201 0 .384.067.558.19l.223-.371c-.232-.181-.446-.252-.768-.252-.687 0-1.138.469-1.138 1.11Zm5.418-.801a.63.63 0 0 1 .563-.31c.094 0 .228.017.33.057l-.143.434a.758.758 0 0 0-.29-.053c-.303 0-.455.194-.455.545v1.186h-.464V17.83h.46v.257Zm-11.872-.089c-.223-.146-.53-.221-.87-.221-.54 0-.888.257-.888.677 0 .345.259.558.736.624l.22.031c.254.036.374.102.374.222 0 .163-.17.257-.487.257-.321 0-.553-.102-.71-.222l-.218.358c.254.186.576.275.924.275.616 0 .973-.288.973-.69 0-.372-.281-.567-.746-.633l-.218-.032c-.2-.026-.362-.066-.362-.208 0-.155.152-.247.406-.247.273 0 .536.101.665.181l.201-.372Zm5.423.089a.63.63 0 0 1 .562-.31c.094 0 .228.017.33.057l-.142.434a.758.758 0 0 0-.29-.053c-.304 0-.456.194-.456.545v1.186h-.463V17.83h.46v.257Zm-3.396-.257h-.759v-.642h-.469v.642h-.433v.42h.433v.966c0 .49.192.783.74.783.202 0 .434-.062.581-.164l-.134-.394a.863.863 0 0 1-.41.12c-.232 0-.308-.142-.308-.355v-.956h.759v-.42Zm-6.936.788v1.328h-.47v-1.178c0-.358-.15-.558-.468-.558-.308 0-.522.195-.522.563v1.173H3.03v-1.178c0-.358-.155-.558-.463-.558-.318 0-.523.195-.523.563v1.173h-.469V17.83h.465v.26a.707.707 0 0 1 .625-.313c.326 0 .557.142.705.376.196-.297.477-.38.75-.376.518.004.839.34.839.84Z" fill="#231F20"></path>
                    <path d="M16.744 14.235h-7.03V1.704h7.03v12.531Z" fill="#FF5F00"></path>
                    <path d="M10.16 7.97c0-2.542 1.2-4.807 3.068-6.266A8.041 8.041 0 0 0 8.263 0C3.825 0 .228 3.568.228 7.97c0 4.401 3.597 7.97 8.035 7.97a8.041 8.041 0 0 0 4.965-1.704A7.933 7.933 0 0 1 10.16 7.97Z" fill="#EB001B"></path>
                    <path d="M26.228 7.97c0 4.401-3.597 7.97-8.034 7.97a8.044 8.044 0 0 1-4.966-1.704 7.932 7.932 0 0 0 3.07-6.266c0-2.542-1.2-4.807-3.07-6.266A8.044 8.044 0 0 1 18.194 0c4.438 0 8.034 3.568 8.034 7.97Z" fill="#F79E1B"></path>
                </svg>
                <svg width="29" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.728" y="0.5" width="27" height="19" rx="3.5" fill="#006FCF" stroke="#F3F3F3"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.955 14.447V10.33h4.502l.482.61.5-.61h16.337v3.833s-.427.28-.921.284h-9.047l-.544-.65v.65H15.48v-1.108s-.244.155-.771.155h-.607v.953H11.4l-.482-.623-.49.623H5.955ZM.711 7.227l1.013-2.292h1.751l.575 1.283V4.935h2.177l.342.927.332-.927h9.773V5.4s.514-.466 1.358-.466l3.171.01.565 1.267V4.935h1.822l.501.727v-.727h1.839v4.117H24.09l-.48-.73v.73h-2.677l-.27-.65h-.719l-.265.65h-1.815c-.727 0-1.191-.457-1.191-.457v.457h-2.737l-.543-.65v.65H3.216l-.27-.65H2.23l-.267.65H.712V7.226Zm.005 1.298 1.366-3.083h1.036l1.364 3.083h-.908l-.251-.617H1.858l-.252.617h-.89Zm2.318-1.287L2.588 6.16 2.14 7.238h.894Zm1.542 1.286V5.442l1.264.004.735 1.988.718-1.992h1.253v3.082h-.794V6.253l-.841 2.271h-.697L5.37 6.253v2.271h-.794Zm4.514 0V5.442h2.59v.69H9.892v.527h1.747v.649H9.892v.547h1.788v.67H9.09Zm3.05.001V5.442h1.767c.585 0 1.11.351 1.11 1a.95.95 0 0 1-.871.947l1.044 1.136h-.97l-.952-1.095h-.334v1.095h-.794Zm1.701-2.393h-.907v.649h.92c.158 0 .364-.12.364-.325 0-.159-.159-.324-.377-.324Zm2.31 2.392h-.81V5.442h.81v3.082Zm1.923 0h-.175c-.847 0-1.36-.647-1.36-1.528 0-.903.507-1.554 1.576-1.554h.878v.73h-.91c-.434 0-.74.329-.74.831 0 .597.35.848.856.848h.209l-.334.673Zm.361.001 1.367-3.083h1.035l1.365 3.083h-.91l-.25-.617h-1.465l-.252.617h-.89Zm2.319-1.287-.447-1.078-.448 1.078h.894Zm1.54 1.286V5.442h1.01l1.289 1.937V5.442h.794v3.082h-.977l-1.322-1.987v1.987h-.794ZM6.5 13.92v-3.083h2.59v.69H7.301v.527h1.747v.649H7.3v.547h1.788v.67H6.5Zm12.695 0v-3.083h2.59v.69h-1.788v.527h1.738v.649h-1.738v.547h1.789v.67h-2.591Zm-10.004 0 1.261-1.523-1.291-1.56h1l.77.964.771-.964h.961l-1.274 1.541 1.264 1.541h-1l-.747-.949-.73.95H9.19Zm3.556 0v-3.083H14.5c.72 0 1.14.45 1.14 1.037 0 .708-.536 1.072-1.244 1.072h-.835v.974h-.815Zm1.695-2.386h-.88v.71h.877c.232 0 .395-.149.395-.355 0-.219-.164-.355-.392-.355Zm1.543 2.385v-3.082h1.767c.586 0 1.11.351 1.11 1a.95.95 0 0 1-.87.947l1.044 1.135h-.97l-.952-1.095h-.335v1.095h-.793Zm1.702-2.393h-.907v.65h.919c.159 0 .364-.12.364-.325 0-.16-.158-.325-.376-.325Zm4.466 2.393v-.669h1.59c.234 0 .336-.123.336-.258 0-.13-.101-.261-.337-.261h-.718c-.624 0-.972-.37-.972-.923 0-.495.319-.971 1.246-.971h1.546l-.334.693h-1.337c-.256 0-.335.13-.335.255 0 .128.098.269.293.269h.752c.696 0 .998.383.998.884 0 .54-.337.981-1.036.981h-1.692Zm2.798 0v-.669h1.589c.235 0 .337-.123.337-.258 0-.13-.102-.261-.337-.261h-.718c-.624 0-.972-.37-.972-.923 0-.495.318-.971 1.246-.971h1.546l-.334.693H25.97c-.256 0-.335.13-.335.255 0 .128.098.269.293.269h.752c.696 0 .998.383.998.884 0 .54-.337.981-1.036.981H24.95Z" fill="#fff"></path>
                </svg>
                <svg width="32" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.3.001h7.737c1.08 0 1.752.908 1.5 2.026l-3.603 15.95C11.68 19.092 10.6 20 9.518 20H1.781c-1.078 0-1.752-.909-1.5-2.022L3.885 2.027C4.137.909 5.218 0 6.3 0Z" fill="#E21836"></path>
                    <path d="M13.393 0h8.898c1.08 0 .593.908.338 2.026l-3.601 15.95C18.775 19.09 18.854 20 17.772 20H8.874c-1.083 0-1.752-.909-1.498-2.023l3.602-15.95C11.233.908 12.312 0 13.393 0Z" fill="#00447C"></path>
                    <path d="M21.938 0h7.737c1.082 0 1.754.908 1.5 2.026l-3.602 15.95C27.319 19.09 26.236 20 25.155 20h-7.734c-1.082 0-1.753-.909-1.5-2.023l3.603-15.95C19.776.908 20.856 0 21.938 0Z" fill="#007B84"></path>
                    <path d="M8.32 5.112c-.796.008-1.031 0-1.106-.019l-.567 2.698c-.116.517-.2.886-.486 1.123a.849.849 0 0 1-.57.205c-.354 0-.56-.18-.594-.523l-.006-.118.107-.696s.564-2.328.664-2.635a.23.23 0 0 0 .009-.035c-1.097.01-1.292 0-1.305-.019-.007.026-.035.17-.035.17l-.575 2.624-.05.222-.095.728c0 .216.041.392.123.541.262.472 1.01.543 1.433.543.545 0 1.056-.12 1.402-.337.6-.366.756-.937.896-1.445l.065-.26s.58-2.418.68-2.732c.003-.018.005-.027.01-.035Zm1.975 1.95c-.14 0-.396.035-.626.151-.083.044-.162.095-.245.146l.075-.28-.041-.046c-.487.101-.596.115-1.046.18l-.038.026c-.052.447-.099.783-.292 1.661-.074.324-.15.65-.227.973l.02.041c.462-.025.602-.025 1-.018l.033-.036c.05-.27.057-.332.17-.877.053-.258.164-.826.218-1.028.1-.048.199-.095.293-.095.225 0 .198.202.189.283-.01.135-.092.576-.175.955l-.056.245c-.04.18-.082.356-.121.536l.017.035c.454-.025.593-.025.98-.018l.046-.036c.07-.42.091-.533.216-1.145l.062-.28c.122-.55.183-.83.091-1.057-.097-.254-.33-.316-.545-.316Zm2.206.576c-.241.048-.396.08-.549.1-.151.025-.3.048-.533.082l-.018.017-.017.014c-.025.18-.042.334-.074.516-.027.189-.07.403-.138.71a2.87 2.87 0 0 1-.11.401c-.03.083-.062.164-.122.395l.014.022.012.02c.218-.011.36-.019.508-.02.146-.006.298 0 .533.001l.02-.017.023-.02c.034-.208.039-.264.06-.366.02-.11.055-.261.142-.665.041-.19.087-.38.13-.573.044-.193.09-.383.135-.573l-.007-.023-.009-.021Zm.005-.777c-.22-.133-.604-.09-.864.094-.258.18-.288.437-.069.573.216.13.603.091.86-.095.258-.185.29-.44.073-.572Zm1.328 3.095c.444 0 .9-.126 1.242-.5.264-.305.385-.757.426-.943.137-.617.03-.905-.103-1.08-.202-.268-.56-.353-.931-.353-.224 0-.756.022-1.171.417-.299.285-.436.672-.52 1.043-.083.377-.18 1.057.426 1.31.187.083.457.106.631.106Zm-.035-1.388c.103-.467.224-.86.532-.86.242 0 .26.292.152.761-.02.104-.107.491-.227.656-.083.121-.182.195-.29.195-.033 0-.226 0-.23-.295a2.07 2.07 0 0 1 .063-.457Zm2.814 1.328.035-.036c.049-.27.057-.333.166-.877.054-.258.167-.826.22-1.028.1-.048.198-.095.295-.095.223 0 .196.202.187.282-.008.136-.09.577-.175.956l-.053.245c-.041.18-.085.356-.124.536l.017.035c.456-.025.59-.025.98-.018l.047-.036c.068-.42.087-.533.215-1.145l.061-.28c.122-.55.184-.83.094-1.057-.1-.254-.336-.316-.547-.316-.14 0-.397.035-.626.151a4.139 4.139 0 0 0-.243.146l.07-.28-.038-.047c-.487.102-.598.116-1.048.181l-.034.026c-.055.447-.099.783-.293 1.661-.073.324-.15.65-.227.973l.021.041c.462-.025.6-.025 1-.018Zm3.35.018.2-1s.146-.627.155-.65c0 0 .045-.065.09-.091h.068c.634 0 1.349 0 1.91-.426.381-.291.642-.722.758-1.246.03-.128.053-.28.053-.433 0-.201-.04-.4-.152-.554-.286-.413-.855-.42-1.513-.424l-.324.003c-.84.011-1.178.008-1.317-.01l-.034.176-.301 1.443-.755 3.207c.734-.01 1.036-.01 1.162.005Zm.559-2.559.319-1.432.01-.073.005-.057.128.014.676.06c.26.104.368.372.293.722-.068.32-.27.59-.528.72-.213.11-.474.119-.743.119h-.173l.013-.073Zm1.995 1.24c-.085.372-.182 1.052.421 1.294.193.085.365.11.54.1.185-.01.356-.105.515-.243l-.043.17.028.036c.434-.019.568-.019 1.038-.015l.043-.033c.069-.417.133-.82.312-1.617.087-.382.174-.76.263-1.14l-.014-.04c-.486.092-.616.112-1.082.18l-.036.03-.014.113a.673.673 0 0 0-.34-.289c-.208-.084-.696.024-1.115.418-.294.281-.436.666-.516 1.036Zm1.02.022c.103-.458.223-.847.532-.847.196 0 .299.186.277.504l-.055.257c-.031.136-.065.271-.097.407a1 1 0 0 1-.115.238c-.08.116-.269.188-.378.188-.03 0-.221 0-.228-.29a2.048 2.048 0 0 1 .063-.457Zm5.323-1.515-.037-.044c-.48.1-.567.117-1.009.178l-.032.033-.005.022-.002-.008c-.328.782-.319.613-.586 1.229l-.003-.076-.067-1.334-.042-.044c-.503.1-.515.117-.98.178l-.036.033c-.005.016-.005.034-.008.053l.003.007c.058.306.044.238.102.72.027.238.064.476.09.71.047.392.072.585.128 1.183-.314.535-.388.737-.69 1.205l.002.005-.213.347c-.024.037-.046.062-.077.072a.313.313 0 0 1-.14.02h-.117l-.175.602.6.01c.354-.001.575-.171.695-.4l.378-.668h-.006l.04-.047c.254-.564 2.188-3.986 2.188-3.986Zm-6.343 7.894h-.255l.944-3.22h.313l.099-.331.01.369c-.012.228.162.43.619.396h.528l.182-.62h-.2c-.113 0-.166-.03-.16-.093l-.01-.375h-.978v.002c-.316.006-1.26.03-1.452.083a1.692 1.692 0 0 0-.475.243l.096-.332h-.915l-.19.659-.957 3.268h-.186l-.182.615h1.823l-.061.206h.898l.06-.206h.251l.198-.664Zm-.748-2.565c-.147.042-.42.168-.42.168l.243-.822h.727l-.175.599s-.225.014-.375.055Zm.014 1.175s-.229.03-.379.065c-.148.046-.425.192-.425.192l.25-.856h.73l-.176.6Zm-.407 1.397h-.73l.212-.722h.727l-.21.722Zm1.756-1.996h1.051l-.151.504h-1.065l-.16.552h.932l-.706 1.025a.292.292 0 0 1-.143.123.41.41 0 0 1-.19.056h-.258l-.177.604h.676c.352 0 .56-.165.713-.381l.483-.684.104.694c.023.13.113.206.174.236.068.035.138.095.237.104.106.004.182.008.233.008h.333l.2-.676h-.132c-.075 0-.205-.013-.227-.037-.022-.03-.022-.075-.034-.145l-.105-.695h-.432l.19-.232h1.063l.163-.552h-.984l.153-.504h.981l.182-.623h-2.925l-.18.623Zm-8.879 2.137.245-.842h1.009l.184-.626h-1.01l.155-.518h.986l.183-.606h-2.468l-.179.606h.56l-.149.518h-.562l-.186.637h.56l-.327 1.114c-.044.147.02.203.062.272a.27.27 0 0 0 .18.136c.1.022.167.036.259.036h1.137l.202-.694-.503.072c-.098 0-.367-.012-.338-.105Zm.116-4.03-.256.476a.55.55 0 0 1-.148.199c-.04.025-.116.035-.228.035h-.134l-.178.61h.443a.98.98 0 0 0 .454-.121c.084-.046.106-.02.171-.085l.15-.133h1.383l.183-.635h-1.012l.177-.346h-1.005Zm2.041 4.042c-.023-.035-.006-.097.03-.225l.378-1.29h1.344c.196-.003.338-.005.43-.012a.86.86 0 0 0 .323-.113.613.613 0 0 0 .235-.223c.058-.083.152-.264.232-.542l.475-1.633-1.395.008s-.43.066-.619.138c-.19.08-.463.305-.463.305l.126-.448h-.862l-1.207 4.128c-.043.16-.071.276-.078.346-.002.075.092.15.153.206.072.056.18.047.281.056.108.009.261.014.473.014h.662l.203-.708-.593.058a.154.154 0 0 1-.128-.065Zm.651-2.386h1.413l-.09.29c-.013.006-.043-.015-.187.003h-1.223l.087-.293Zm.283-.974h1.424l-.102.35s-.671-.007-.779.013a1.57 1.57 0 0 0-.749.345l.206-.708Zm1.072 2.236a.156.156 0 0 1-.056.09c-.03.018-.076.025-.145.025h-.201l.012-.353h-.837l-.034 1.727c-.001.125.01.197.099.255.088.072.36.081.727.081h.525l.19-.646-.457.025-.152.01c-.02-.01-.04-.018-.063-.04-.019-.02-.051-.008-.046-.133l.003-.443.48-.02a.61.61 0 0 0 .463-.17c.09-.079.12-.17.153-.293l.08-.392H18.5l-.083.276Z" fill="#FEFEFE"></path>
                </svg>
            </div>
            <div class="main__plan-guarantee-transactions">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" class="guarantee-block_lockIcon__fgQPO">
                    <path d="M12.2371 6.69644H11.8343L11.8327 4.78156C11.831 2.69556 10.0519 0.998446 7.86504 1C5.6782 1.00156 3.89905 2.69867 3.90068 4.78467L3.90395 6.69956H3.76044C3.00866 6.70111 2.39876 7.28289 2.40039 8V13.7011C2.40039 14.4182 3.01193 15 3.7637 15L12.2403 14.9953C12.9921 14.9953 13.602 14.4136 13.6004 13.6964V7.99378C13.6004 7.27667 12.9889 6.69644 12.2371 6.69644ZM5.3651 6.69956L5.36184 4.78467C5.36184 3.46711 6.48379 2.39533 7.86504 2.39378C9.24628 2.39378 10.3699 3.46556 10.3699 4.78156L10.3731 6.69644L5.3651 6.69956Z" fill="#817B6F"></path>
                </svg>
                <p><%- __('All transactions are secure and encrypted') %></p>
            </div>
        </div>
    <% } %>

    <% if (item.type == 'tos-check') { %>
        <div class="main__plan-agreement <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <input class="main__plan-agreement-input" type="checkbox" id="subscription-agreement" checked>
            <label class="main__plan-agreement-label" for="subscription-agreement">
                <%- __(item.content || 'By purchasing, you agree to our <a class="main__policy-link" href="/privacy-policy" target="_blank" rel="noreferrer">Privacy policy</a>, <a class="main__policy-link" href="/terms-of-use" target="_blank" rel="noreferrer">Terms of policy</a>, <a class="main__policy-link" href="/refund-policy" target="_blank" rel="noreferrer">Refund policy</a>.') %>
            </label>
        </div>
    <% } %>

    <% if (item.type == 'range-4-variants') { %>
        <div class="s_range <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>"
             data-variant-color-background="<%- __(item.variantColorBackground) %>"
             data-variant-color-text="<%- __(item.variantColorText) %>">
            <div class="s_range-top">
                <div class="s_range-text-left">
                    <span><%- __(item.textLeft) %></span>
                </div>
                <div class="s_range-line"></div>
                <div class="s_range-or">or</div>
                <div class="s_range-text-right">
                    <span><%- __(item.textRight) %></span>
                </div>
            </div>

            <div class="s_range-bottom">
                <div class="s_range-scale" style="position: relative;">
                    <div class="track left-track" style="position: absolute; left: 0px; right: 90px;"></div>
                    <div class="track right-track" style="position: absolute; left: 270px; right: 0px;"></div>
                    <div class="thumb initial-thumb" style="position: absolute; touch-action: none; z-index: 1; left: 50% !important; margin-left: -20px;">
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <span class="mark mark1" data-value="1"></span>
                    <span class="mark mark2" data-value="2"></span>
                    <span class="mark mark3" data-value="3"></span>
                    <span class="mark mark4" data-value="4"></span>
                </div>
                <img src="/img/r-arrows.png" class="s_range-arrows">
                <div class="s_range-variants">
                    <div class="s_range-variant s_range-variant1" data-value="1"><%- __(item.variant1) %></div>
                    <div class="s_range-variant s_range-variant2" data-value="2"><%- __(item.variant2) %></div>
                    <div class="s_range-variant s_range-variant3" data-value="3"><%- __(item.variant3) %></div>
                    <div class="s_range-variant s_range-variant4" data-value="4"><%- __(item.variant4) %></div>
                </div>
            </div>
        </div>
    <% } %>

    <% if (item.type == 'slider-results') { %>
        <div class="main__results-slider swiper <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-swiper style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="main__results-wrapper swiper-wrapper">
                <% item.content.forEach(function(option, index) { %>
                <div class="main__results-slide swiper-slide">
                    <div class="main__results-card card-results">
                        <% if (!item.hide_header) { %>
                        <div class="card-results__header">
                            <div class="card-results__header-item"><%- __('Before') %></div>
                            <div class="card-results__header-item"><%- __('After') %></div>
                        </div>
                        <% } %>
                        <div class="card-results__image">
                            <img src="<%- __(option.image)%>" alt="">
                        </div>
                        <% if (option.name || option.text || option.title) { %>
                            <div class="card-results__content">
                                <% if (option.name || option.title) { %>
                                    <h4 class="card-results__title">
                                        <%- __(option.title || option.name)%>
                                    </h4>
                                <% } %>
                                <% if (option.text) { %>
                                    <div class="card-results__descr">
                                        <p><%- __(option.text)%></p>
                                    </div>
                                <% } %>
                            </div>
                        <% } %>
                    </div>
                </div>
                <% }) %>
            </div>
            <div class="main__results-pagination"></div>
        </div>
    <% } %>

    <% if (item.type == 'border-block') { %>
        <section class="main__community <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <%- TemplateManager.renderTemplate('screen-content', {
				screen: item,
                prices: window?.paywall_products?.product_info?.product_data?.prices,
                product_info: window?.paywall_products?.product_info
            }) %>
        </section>
    <% } %>

    <% if (item.type == 'columns') { %>
        <section class="main__press-subsection <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <%- TemplateManager.renderTemplate('screen-content', {screen: item}) %>
        </section>
    <% } %>

    <% if (item.type == 'container') { %>
        Container is not supported in this version of the template.
    <% } %>


    <% if (item.type == 'faq-question') { %>
        <div data-spollers class="main__faq-spollers <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="main__faq-spollers-item">
                <button type="button" data-spoller class="main__faq-spollers-title">
                    <span><%-__(item.title)%></span>
                    <svg class="main__faq-spollers-icon" width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7 0L13.5 6.5L12.5 7.5L7 2L1.5 7.5L0.5 6.5L7 0Z" fill="#000"></path>
                    </svg>
                </button>
                <div class="main__faq-spollers-body">
                    <p><%-__(item.content)%></p>
                </div>
            </div>
        </div>
    <% } %>

    <% if (item.type == 'pay-button') { %>
        <button class="main__plan-button button-green <%- item.class %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>
                <% if (!item.pay_button_onclick) { %>
                    data-popup="#popup-plan"
                <% } else if (item.pay_button_onclick == 'payment-form') { %>
                    data-scroll-to="#payment-form"
                <% } else if (item.pay_button_onclick == 'redirect_price_url') { %>
                    data-redirect-price-url
                <% } else if (item.pay_button_onclick.startsWith('scroll-to-index|')) { %>
                    data-scroll-to="[data-block-area-index='<%-item.pay_button_onclick.split('|')[1]%>']"
                <% } else {  %>
                    data-popup="#<%-item.pay_button_onclick%>"
                <% } %>
                type="button" <%- item.attrs %> style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>">
            <%- __(item.content) %>
            <%- item.icon || '' %>
        </button>
    <% } %>


    <% if (item.type == 'weight') { %>
        <%
            // Determine default unit system - imperial if not specified
            var isMetric = false;
            if (window.user_properties && window.user_properties.user_units_system) {
                isMetric = window.user_properties .user_units_system === 'metric';
            } else {
                isMetric = item.default_user_units_system === 'metric';
            }
            // Default to imperial (ft) if no system specified
            var showImperial = !isMetric;

            // Determine tab text style
            var tabTextStyle = item.tab_text_style || 'short';
            var imperialTabText = tabTextStyle === 'full' ? 'Imperial' : 'lbs';
            var metricTabText = tabTextStyle === 'full' ? 'Metric' : 'kg';
        %>

        <div class="main__dimension <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-question-type="<%- item.type %>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <% if (item.second == 'true') { %>
            <ul class="main__dimension-tabs">
                <li class="<%= showImperial ? 'active' : '' %>" data-content-type="lbs"><%-__(imperialTabText)%></li>
                <li class="<%= !showImperial ? 'active' : '' %>" data-content-type="kg"><%-__(metricTabText)%></li>
            </ul>
            <% } %>
            <div class="main__dimension-content <% if (item.second !== 'true' || !showImperial) { %>active<% } %>" data-content="<%-__('kg')%>">
                <div><input type="number" pattern="[0-9]*" name="<%- item.name || screen.id %>_kg" <%= item.isAutofocus === "false" ? '' : 'data-autofocus' %> <% if (item.default) {%> value="<%- item.default %>" <% } %> <% if (item.min_kg) { %>min="<%- __(item.min_kg) %>"<% } %> <% if (item.max_kg) { %>max="<%- __(item.max_kg) %>"<% } %> <% if (item.placeholder_kg) { %>placeholder="<%- __(item.placeholder_kg) %>"<% } %> <% if(item.required == 'true') {%>required<% } %>  data-callback="<%- JSON.stringify({callback: item.callback || ''}).replace(/"/g, '&quot;') %>"/><span><%-__('kg')%></span></div>
            </div>
            <% if (item.second == 'true') {
                AnalyticsManager.setUserProperty("weight_selected_measure", "lbs");
            %>
            <div class="main__dimension-content <% if (showImperial) { %>active<% } %>" data-content="<%-__('lbs')%>">
                <div><input type="number" pattern="[0-9]*" name="<%- item.name || screen.id %>_lbs%>" <%= item.isAutofocus === "false" ? '' : 'data-autofocus' %> <% if (item.default) {%> value="<%- Math.round(item.default * 2.20462) %>" <% } %> <% if (item.min_lbs) { %>min="<%- __(item.min_lbs) %>"<% } %> <% if (item.max_lbs) { %>max="<%- __(item.max_lbs) %>"<% } %> <% if (item.placeholder_lbs) { %>placeholder="<%- __(item.placeholder_lbs) %>"<% } %>  <% if(item.required == 'true') {%>required<% } %>  data-callback="<%- JSON.stringify({callback: item.callback || ''}).replace(/"/g, '&quot;') %>"/><span><%-__('lbs')%></span></div>
            </div>
            <% } %>
            <input type="hidden" name="selected-dimension" value="<%= showImperial ? 'lbs' : 'kg' %>">
        </div>
     <% } %>

    <% if (item.type == 'weight-scroller') { %>
        <%
            var defaultUnitSystem = (item.default_user_units_system === 'imperial') ? 'imperial' : 'metric';
            var unitLabelKg = (item.unit_label_metric != null && item.unit_label_metric !== '') ? item.unit_label_metric : __('kg');
            var unitLabelLbs = (item.unit_label_imperial != null && item.unit_label_imperial !== '') ? item.unit_label_imperial : __('lbs');
        %>
        <div class="container-type container-type-<%-__(item.type)%> <%-__(item.container_class) || ''%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
            <div class="weight type-weight-scroller <%-__(item.class)%>" style="display:flex; flex-direction:column; align-items:center; <%-__(item.style || '')%>" <%- item.attributes || '' %> data-min-kg="<%- item.min_kg != null && item.min_kg !== '' ? item.min_kg : 30 %>" data-max-kg="<%- item.max_kg != null && item.max_kg !== '' ? item.max_kg : 200 %>" data-min-lbs="<%- item.min_lbs != null && item.min_lbs !== '' ? item.min_lbs : 66 %>" data-max-lbs="<%- item.max_lbs != null && item.max_lbs !== '' ? item.max_lbs : 441 %>" data-default-kg="<%- item.default != null && item.default !== '' ? item.default : 70 %>" data-default-lbs="<%- item.default_lbs != null && item.default_lbs !== '' ? item.default_lbs : 154 %>" data-name="<%- (item.name && String(item.name).trim() !== '' && item.name !== 'weight') ? item.name : 'weight_scroller' %>" data-block-index="<%- screen.id %>-<%- contentItemIndex %>" data-default-unit-system="<%- defaultUnitSystem %>" data-unit-label-kg="<%- unitLabelKg %>" data-unit-label-lbs="<%- unitLabelLbs %>" data-callback="<%- JSON.stringify({callback: item.callback || ''}).replace(/"/g, '&quot;') %>">
                <div class="weight__row">
                    <div class="weight__roller-wrapper">
                        <div class="weight__roller">
                            <ul class="weight__list"></ul>
                        </div>
                    </div>
                    <div class="weight__unit-roller-wrapper">
                        <div class="weight__unit-roller">
                            <ul class="weight__unit-list"></ul>
                        </div>
                    </div>
                </div>
                <input type="hidden" class="weight__input" id="weight-scroller-<%- screen.id %>-<%- contentItemIndex %>" value="" name="<%- (item.name && String(item.name).trim() !== '' && item.name !== 'weight') ? item.name : 'weight_scroller' %>">
            </div>
        </div>
    <% } %>

    <% if (item.type == 'height-scroller') { %>
        <%
            var defaultUnitSystemHeight = (item.default_user_units_system === 'imperial') ? 'imperial' : 'metric';
            var unitLabelCm = (item.unit_label_metric != null && item.unit_label_metric !== '') ? item.unit_label_metric : __('cm');
            var unitLabelFt = (item.unit_label_imperial != null && item.unit_label_imperial !== '') ? item.unit_label_imperial : __('ft');
        %>
        <div class="container-type container-type-<%-__(item.type)%> <%-__(item.container_class) || ''%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
            <div class="height type-height-scroller <%-__(item.class)%>" style="display:flex; flex-direction:column; align-items:center; <%-__(item.style || '')%>" <%- item.attributes || '' %> data-min-cm="<%- item.min_cm != null && item.min_cm !== '' ? item.min_cm : 90 %>" data-max-cm="<%- item.max_cm != null && item.max_cm !== '' ? item.max_cm : 240 %>" data-min-ft="<%- item.min_ft != null && item.min_ft !== '' ? item.min_ft : 3 %>" data-min-in="<%- item.min_in != null && item.min_in !== '' ? item.min_in : 0 %>" data-max-ft="<%- item.max_ft != null && item.max_ft !== '' ? item.max_ft : 7 %>" data-max-in="<%- item.max_in != null && item.max_in !== '' ? item.max_in : 11 %>" data-default-cm="<%- item.default != null && item.default !== '' ? item.default : 170 %>" data-default-ft="<%- item.default_ft != null && item.default_ft !== '' ? item.default_ft : 5 %>" data-default-in="<%- item.default_in != null && item.default_in !== '' ? item.default_in : 7 %>" data-name="<%- (item.name && String(item.name).trim() !== '' && item.name !== 'height') ? item.name : 'height_scroller' %>" data-block-index="<%- screen.id %>-<%- contentItemIndex %>" data-default-unit-system="<%- defaultUnitSystemHeight %>" data-unit-label-cm="<%- unitLabelCm %>" data-unit-label-ft="<%- unitLabelFt %>" data-callback="<%- JSON.stringify({callback: item.callback || ''}).replace(/"/g, '&quot;') %>">
                <div class="height__row">
                    <div class="height__roller-wrapper">
                        <div class="height__roller">
                            <ul class="height__list"></ul>
                        </div>
                    </div>
                    <div class="height__unit-roller-wrapper">
                        <div class="height__unit-roller">
                            <ul class="height__unit-list"></ul>
                        </div>
                    </div>
                </div>
                <input type="hidden" class="height__input" id="height-scroller-<%- screen.id %>-<%- contentItemIndex %>" value="" name="<%- (item.name && String(item.name).trim() !== '' && item.name !== 'height') ? item.name : 'height_scroller' %>">
            </div>
        </div>
    <% } %>

    <% if (item.type == 'number-scroller') { %>
        <%
            var numberLabelText = (item.label_text != null && item.label_text !== '') ? item.label_text : '';
        %>
        <div class="container-type container-type-<%-__(item.type)%> <%-__(item.container_class) || ''%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
            <div class="number type-number-scroller <%-__(item.class)%>" style="display:flex; flex-direction:column; align-items:center; <%-__(item.style || '')%>" <%- item.attributes || '' %> data-min="<%- item.min != null && item.min !== '' ? item.min : 1 %>" data-max="<%- item.max != null && item.max !== '' ? item.max : 100 %>" data-default="<%- item.default != null && item.default !== '' ? item.default : 50 %>" data-name="<%- (item.name && String(item.name).trim() !== '') ? item.name : 'number_scroller' %>" data-block-index="<%- screen.id %>-<%- contentItemIndex %>" data-label-text="<%- numberLabelText.replace(/"/g, '&quot;') %>" data-callback="<%- JSON.stringify({callback: item.callback || ''}).replace(/"/g, '&quot;') %>">
                <div class="number__row">
                    <div class="number__roller-wrapper">
                        <div class="number__roller">
                            <ul class="number__list"></ul>
                        </div>
                    </div>
                    <% if (numberLabelText) { %>
                    <div class="number__unit-roller-wrapper">
                        <div class="number__unit-roller">
                            <ul class="number__unit-list"></ul>
                        </div>
                    </div>
                    <% } %>
                </div>
                <input type="hidden" class="number__input" id="number-scroller-<%- screen.id %>-<%- contentItemIndex %>" value="" name="<%- (item.name && String(item.name).trim() !== '') ? item.name : 'number_scroller' %>">
            </div>
        </div>
    <% } %>

     <% if (item.type == 'height') { %>
            <%
                // Determine default unit system - imperial if not specified
                var isMetric = false;
                if (window.user_properties && window.user_properties.user_units_system) {
                    isMetric = window.user_properties.user_units_system === 'metric';
                } else {
                    isMetric = item.default_user_units_system === 'metric';
                }
                // Default to imperial (ft) if no system specified
                var showImperial = !isMetric;

                // Determine tab text style
                var tabTextStyle = item.tab_text_style || 'short';
                var imperialTabText = tabTextStyle === 'full' ? 'Imperial' : 'ft';
                var metricTabText = tabTextStyle === 'full' ? 'Metric' : 'cm';
            %>

            <div class="main__dimension <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-question-type="<%- item.type %>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <% if (item.second == 'true') { %>
            <ul class="main__dimension-tabs">
                <li class="<%= showImperial ? 'active' : '' %>" data-content-type="ft"><%-__(imperialTabText)%></li>
                <li class="<%= !showImperial ? 'active' : '' %>" data-content-type="cm"><%-__(metricTabText)%></li>
            </ul>
            <% } %>
            <div class="main__dimension-content <% if (item.second !== 'true' || !showImperial) { %>active<% } %>" data-content="<%-__('cm')%>">
                <div><input type="number" pattern="[0-9]*" <%= item.isAutofocus === "false" ? '' : 'data-autofocus' %> name="<%- item.name || screen.id %>_cm" <% if (item.min_cm) { %>min="<%- __(item.min_cm) %>"<% } %> <% if (item.max_cm) { %>max="<%- __(item.max_cm) %>"<% } %> <% if (item.default) {%> value="<%- item.default %>" <% } %>  <% if(item.required == 'true') {%>required<% } %> <% if (item.placeholder_cm) { %>placeholder="<%- __(item.placeholder_cm) %>"<% } %>  data-callback="<%- JSON.stringify({callback: item.callback || ''}).replace(/"/g, '&quot;') %>" /><span><%-__('cm')%></span></div>
            </div>
            <% if (item.second == 'true') { %>
                <%
                    AnalyticsManager.setUserProperty("height_selected_measure", "ft");
                    let d_in_total = item.default / 2.54;
                    let d_ft = Math.floor(d_in_total / 12) || '';
                    d_in_total = Math.round(d_in_total - 12 * d_ft) || '';
                %>
                <div class="main__dimension-content <% if (showImperial) { %>active<% } %>" data-content="<%-__('ft')%>">
                <div><input type="number" pattern="[0-9]*" name="<%- item.name || screen.id %>_ft" <%= item.isAutofocus === "false" ? '' : 'data-autofocus' %> <% if (item.min_ft) { %>min="<%- __(item.min_ft) %>"<% } %> <% if (item.max_ft) { %>max="<%- __(item.max_ft) %>"<% } %>  value="<%- d_ft %>" <% if (item.placeholder_ft) { %>placeholder="<%- __(item.placeholder_ft) %>"<% } %>  <% if(item.required == 'true') {%>required<% } %>  data-callback="<%- JSON.stringify({callback: item.callback || ''}).replace(/"/g, '&quot;') %>" /><span><%-__('ft')%></span></div>
                <div><input type="number" pattern="[0-9]*" name="<%- item.name || screen.id %>_in" <% if (item.min_in) { %>min="<%- __(item.min_in) %>"<% } %> <% if(item.max_in) { %>max="<%- __(item.max_in) %>"<% } %>  value="<%- d_in_total %>" <% if (item.placeholder_in) { %>placeholder="<%- __(item.placeholder_in) %>"<% } %> /><span><%-__('in')%></span></div>
            </div>
            <% } %>
            <input type="hidden" name="selected-dimension" value="<%= showImperial ? 'ft' : 'cm' %>">
        </div>

     <% } %>
     <% if (item.type == 'options-images') { %>
        <div class="quiz__body <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-question-type="options" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="quiz__radios radios-quiz radios-quiz__options-images">
                <% item.options.forEach(function(option, index) { %>
                        <label class="radios-quiz__label radios-quiz__options-images-label <% if (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && window.user_properties[item.name || screen.id] == (option.value || option.content || (typeof option == 'object' ? index : option))) { %>selected<% }%>">
                            <input class="radios-quiz__input" type="radio" name="<%- item.name || screen.id %>" id="<%- item.name || screen.id %>-<%- index %>" value="<%- escapeHtmlForAttribute(option.value || option.content || (typeof option == 'object' ? index : option)) %>" <%- option.onclick ? 'data-next-screen="' + option.onclick + '"' : '' %> <% if (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && window.user_properties[item.name || screen.id] == (option.value || option.content || (typeof option == 'object' ? index : option))) { %>checked="checked"<% }%>>
                            <span class="radios-quiz__options-images-c"><img src="<%- __(option.image || item.images[index]) %>" alt="" /></span>
                            <% if (option.content || (typeof option == 'object' ? false : option)) { %>
                            <span class="radios-quiz__options-images-name" style="<% item.style %>"><span><%- __(option.content || (typeof option == 'object' ? index : option)) %></span> <svg data-v-53297a73="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M8.75 5.625L13.125 10L8.75 14.375" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>
                            <% } %>
                        </label>
                <% }) %>
            </div>
        </div>
    <% } %>
    <% if (item.type == 'options-audio') { %>
        <div class="quiz__body <%-__(item.class)%> <% if (item.columns) {%>columns-<%-item.columns%><% }%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-question-type="options" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="type-options-audio <% if (item.columns) { %>columns-<%-item.columns%><% } %>">
                <% item.options.forEach(function(option, index) { %>
                    <label class="type-options-audio__label <% if (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && window.user_properties[item.name || screen.id] == (option.value || option.content || (typeof option == 'object' ? index : option))) { %>selected<% }%>">
                        <input class="type-options-audio__input" type="radio" data-index="<%- index %>" name="<%- item.name || screen.id %>" id="<%- item.name || screen.id %>-<%- index %>" value="<%- escapeHtmlForAttribute(option.value || option.content || (typeof option == 'object' ? index : option)) %>" <%- option.onclick ? 'data-next-screen="' + option.onclick + '"' : '' %> <% if (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id] && window.user_properties[item.name || screen.id] == (option.value || option.content || (typeof option == 'object' ? index : option))) { %>checked="checked"<% }%>>
                        <% if (option.audio || option.audio_url) { %>
                        <audio class="type-options-audio__player" data-option-index="<%- index %>" preload="metadata" src="<%- __(option.audio || option.audio_url) %>"></audio>
                        <% } %>
                        <button type="button" class="type-options-audio__play-btn" data-option-index="<%- index %>" aria-label="Play">
                            <span class="type-options-audio__play-icon type-options-audio__play-icon--play">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                            </span>
                            <span class="type-options-audio__play-icon type-options-audio__play-icon--pause">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
                            </span>
                        </button>
                        <span class="type-options-audio__progress" data-option-index="<%- index %>" aria-hidden="true"></span>
                        <% if (option.image) { %><span class="type-options-audio__image"><img src="<%- __(option.image) %>" alt="" /></span><% } %>
                        <span class="type-options-audio__name"><%- __(option.content || (typeof option == 'object' ? index : option)) %></span>
                        <% var iconType = item.icon_type || 'arrow'; if (iconType !== 'none') { %>
                        <span class="type-options-audio__icon type-options-audio__icon--<%- iconType %>" aria-hidden="true">
                            <% if (iconType === 'radio') { %><svg class="type-options-audio__icon-svg type-options-audio__icon-svg--radio" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="type-options-audio__icon-ring" cx="10" cy="10" r="8.5" stroke="currentColor" stroke-width="2" fill="none"/><circle class="type-options-audio__icon-dot" cx="10" cy="10" r="5" fill="currentColor" opacity="0"/></svg><% } else if (iconType === 'checkbox') { %><svg class="type-options-audio__icon-svg type-options-audio__icon-svg--checkbox" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect class="type-options-audio__icon-rect" x="1.5" y="1.5" width="17" height="17" rx="2.5" stroke="currentColor" stroke-width="2" fill="none"/><path class="type-options-audio__icon-checkmark" d="M5 10L8 13L15 6" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0"/></svg><% } else { %><svg class="type-options-audio__icon-svg type-options-audio__icon-svg--arrow" width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 13L7.5 7L1.5 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><% } %>
                        </span>
                        <% } %>
                    </label>
                <% }) %>
            </div>
        </div>
    <% } %>
    <% if (item.type == 'before-after-animated') { %>
        <div class="before-after <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="before-after-labels">
                <div class="inside">
                    <div class="before-after-label_before"><%- __(item.content.before_text) %></div>
                </div>
                <hr>
                <div class="inside">
                    <div class="before-after-label_after"><%- __(item.content.after_text) %></div>
                </div>
            </div>
            <div class="before-after-body">
                <img src="<%- __(item.content.before_image) %>" alt="" />
                <img src="<%- __(item.content.after_image) %>" alt="" />
                <div class="before-after-arrows">
                    <img src="<%- __(item.content.arrow_image) %>" alt="" />
                    <img src="<%- __(item.content.arrow_image) %>" alt="" />
                    <img src="<%- __(item.content.arrow_image) %>" alt="" />
                </div>
            </div>
        </div>
    <% } %>
    <% if (item.type == 'personalization-block') { %>
        <div class="personalization-block <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <% item.blocks.forEach(function(option) { %>
                <div class="inside">
                    <img src="<%- __(option.icon) %>" alt="" />
                    <div class=""><%- __(option.text) %>
                        <b>
                            <%- __(option.option) %>
                        </b>
                    </div>
                </div>
            <% }) %>
        </div>
    <% } %>
    <% if (item.type == 'twitter-review') { %>
        <div class="twitter-review <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="twitter-review-user">
                <div class="twitter-review-avatar" style="background-image: url(<%- item.image %>)"></div>
                <div>
                    <div><%- item.name %></div>
                    <div class="twitter-review-username">
                        <svg viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg" class="sc-fXoxOd a-DJRs"><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="black"></path></svg>
                        <div>@<%- item.username %></div>
                    </div>
                </div>
            </div>
            <div class="twitter-review-content">
                <% function replaceContent(text) {
                        return text.replace(/([@#]\w+)/g, '<span>$1</span>');
                    }
                %>
                <%- replaceContent(item.comment) %>
            </div>
            <div class="twitter-review-count">
                <div>
                    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.36377 7.01184C0.36377 3.46895 3.23656 0.599365 6.78025 0.599365H10.2799C13.8789 0.599365 16.7957 3.51704 16.7957 7.11604C16.7957 9.48865 15.5076 11.6689 13.4324 12.8151L6.97663 16.3901V13.4323H6.92293C3.32393 13.5125 0.36377 10.6189 0.36377 7.01184ZM6.78025 2.20248C4.12148 2.20248 1.96689 4.35868 1.96689 7.01184C1.96689 9.71309 4.18721 11.8853 6.88686 11.8292L7.1682 11.8212H8.57975V13.6648L12.6573 11.4124C14.2211 10.5467 15.1926 8.90352 15.1926 7.11604C15.1926 4.39875 12.9931 2.20248 10.2799 2.20248H6.78025Z" fill="#6D6D6D"></path></svg>
                    <div>
                        <%- item.comment_count %>
                    </div>
                </div>
                <div>
                    <svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.08571 0.106445L7.63822 3.4249L6.5449 4.59518L4.88727 3.04817V9.82134C4.88727 10.7031 5.60547 11.4245 6.49039 11.4245H10.899V13.0276H6.49039C4.71975 13.0276 3.28415 11.5928 3.28415 9.82134V3.04817L1.62653 4.59518L0.533203 3.4249L4.08571 0.106445ZM13.7044 1.80575H9.29585V0.202632H13.7044C15.4751 0.202632 16.9107 1.63742 16.9107 3.40887V10.182L18.5683 8.63503L19.6616 9.80531L16.1091 13.1238L12.5566 9.80531L13.6499 8.63503L15.3075 10.182V3.40887C15.3075 2.52715 14.5893 1.80575 13.7044 1.80575Z" fill="#6D6D6D"></path></svg>                    <div>
                        <%- item.retweet_count %>
                    </div>
                </div>
                <div>
                    <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.3735 2.40489C11.394 2.3568 10.2262 2.81369 9.25547 4.13626L8.61021 5.00996L7.96416 4.13626C6.99267 2.81369 5.82399 2.3568 4.84449 2.40489C3.84815 2.461 2.96163 3.03011 2.51195 3.93587C2.06949 4.83362 2.00457 6.16421 2.8959 7.79939C3.75677 9.37846 5.50658 11.222 8.61021 13.0977C11.7122 11.222 13.4612 9.37846 14.3221 7.79939C15.2127 6.16421 15.1477 4.83362 14.7045 3.93587C14.2548 3.03011 13.3691 2.461 12.3735 2.40489ZM15.7297 8.56888C14.6468 10.5567 12.5226 12.6729 9.0134 14.7168L8.61021 14.9573L8.20623 14.7168C4.6962 12.6729 2.57207 10.5567 1.48756 8.56888C0.397441 6.56499 0.357363 4.67331 1.07556 3.22249C1.78654 1.78769 3.19729 0.889948 4.76353 0.809792C6.08691 0.737652 7.46318 1.25867 8.60941 2.42093C9.75484 1.25867 11.1311 0.737652 12.4537 0.809792C14.0199 0.889948 15.4307 1.78769 16.1417 3.22249C16.8599 4.67331 16.8198 6.56499 15.7297 8.56888Z" fill="#6D6D6D"></path></svg>                    <div>
                        <%- item.likes_count %>
                    </div>
                </div>
            </div>
        </div>
    <% } %>
    <% if (item.type == 'graph') { %>
        <div class="<% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
        <% if (item.lines_count == '1' || item.lines_count == '2_wavy') { %>
            <div class="svg-chart-wrapper <%-item.graph_direction%>">
                <% if (item.axis_y.length) { %>
                    <div class="chart-line"></div>
                <% } %>
                <div class="chart-line line-x"></div>
                <div class="chart-circle1"><%- __(item.zero_point) %></div>
                <div class="chart-line-text" style="<%- __(item.line_1_text_style) %>"><%- __(item.line_1_text) %></div>
                <div class="chart-line-text" style="<%- __(item.line_2_text_style) %>"><%- __(item.line_2_text) %></div>
                <% if (item.line_1_point) { %>
                    <div class="chart-circle chart-circle2" style="background: <%- item.line_1_colors[item.line_1_colors.length-1] %>">
                        <div class="corner" style="background: <%- __(item.line_1_colors[item.line_1_colors.length-1]) %>"></div>
                        <%- __(item.line_1_point) %>
                    </div>
                <% } %>
                <% if (item.wavy_line) { %>
                    <svg class="line-wavy" width="400" height="150" viewBox="0 0 400 150" fill="none">
                        <defs>
                            <linearGradient id="wavy-area-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
                                <stop stop-color="<%- item.wavy_colors[0] %>"/>
                                <stop offset="0.485" stop-color="<%- item.wavy_colors[1] %>"/>
                                <stop offset="1" stop-color="<%- item.wavy_colors[2] %>"/>
                            </linearGradient>
                        </defs>
                        <path xmlns="http://www.w3.org/2000/svg" d="M11 30.3843C88.6 1.15282 124.646 67.6321 169.204 75.1769C198.742 80.1785 226.277 44.667 249.307 43.6667C267.482 42.8772 286.855 42.1662 312.388 75.1769C373.968 132.696 386 43.5 399 43.5" stroke="url(#wavy-area-gradient)" stroke-width="3"/>
                    </svg>
                <% } %>
                <svg width="400" height="150" viewBox="0 0 400 150" data-v-1d7854e4="" preserveAspectRatio="none" class="svg-chart">
                    <% if (item.line_1_colors.length == 1) { %>
                        <defs>
                            <linearGradient id="area-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
                                <stop stop-color="<%- item.line_1_colors[0] %>"/>
                                <stop offset="0.485" stop-color="<%- item.line_1_colors[0] %>"/>
                                <stop offset="1" stop-color="<%- item.line_1_colors[0] %>"/>
                            </linearGradient>
                        </defs>
                    <% } %>
                    <% if (item.line_1_colors.length > 1) { %>
                        <defs>
                            <linearGradient id="area-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
                                <stop stop-color="<%- item.line_1_colors[0] %>"/>
                                <stop offset="0.485" stop-color="<%- item.line_1_colors[1] %>"/>
                                <stop offset="1" stop-color="<%- item.line_1_colors[2] %>"/>
                            </linearGradient>
                        </defs>
                    <% } %>
                    <path class="scale" d="M11,30.222C56.267,33.021,101.533,35.819,146.8,47.012C192.067,58.206,237.333,89.267,282.6,101.58C302,106.857,321.4,114.173,340.8,114.173C360.2,114.173,379.6,114.173,399,114.173" stroke="url(#area-gradient)" stroke-width="3" fill="none" stroke-dasharray="401.56640625 401.56640625" stroke-dashoffset="0"></path>
                    <circle class="scale" cx="11" cy="30.222222222222264" r="4" fill="<%- item.line_1_colors[0] %>"></circle>
                    <% if (item.line_1_point.length) { %>
                        <circle class="scale" cx="377.79999999999995" cy="114.17283950617285" r="7" fill="<%- item.line_1_colors[item.line_1_colors.length-1] %>" stroke="#fff" stroke-width="2" style="transform-origin: 340.8px 114.173px; transform: scale(1, 1);"></circle>
                    <% } %>
                </svg>
                <% if (item.graph_direction == "up" && item.line_1_background) { %>
                    <svg class="background-line1 background-line" xmlns="http://www.w3.org/2000/svg" width="388" height="119" viewBox="0 0 388 119" fill="none">
                        <path xmlns="http://www.w3.org/2000/svg" opacity="0.5" d="M388 114.403C388 -96 388 -50.4127 388 -96C388 -96 388 23.9587 388 -5.09696C328.48 -5.09696 268.706 -5.09695 244 -5.09695C222.101 -5.09695 23.0217 -5.09693 2.00665e-05 -5.09693L2.32137e-05 30.9031C20.6533 31.158 38.5 33 58.5 34C80.5 36.5 110.623 40.0391 132 46C184 60.5 198 74 245 92.5C309.5 116.5 314.5 114.403 388 114.403Z" fill="url(#area-gradient)"/>
                        <defs>
                            <linearGradient id="area-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
                                <stop stop-color="<%- item.line_1_colors[0] %>"/>
                                <stop offset="0.485" stop-color="<%- item.line_1_colors[1] %>"/>
                                <stop offset="1" stop-color="<%- item.line_1_colors[2] %>"/>
                            </linearGradient>
                        </defs>
                    </svg>
                <% } %>
                <% if (item.graph_direction != "up" && item.line_1_background) { %>
                    <svg class="background-line background-line1" xmlns="http://www.w3.org/2000/svg" width="388" height="119" viewBox="0 0 388 119" fill="none">
                        <path opacity="0.5" d="M11 31C11 241.403 11 195.816 11 241.403C11 241.403 11 262.944 11 292C70.5195 292 127.793 292 152.499 292C174.398 292 375.978 292 399 292V114.5C378.347 114.245 361.5 114.5 341.5 113.5C320.5 114.5 291 103.5 269.5 98C221 80.5 203 63 155 50C107 35.5 64 32.5 11 31Z" fill="url(#area-gradient)" style="opacity: 0.5;"/>
                        <defs>
                            <linearGradient id="area-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
                                <stop stop-color="<%- item.line_1_colors[0] %>"/>
                                <stop offset="0.485" stop-color="<%- item.line_1_colors[1] %>"/>
                                <stop offset="1" stop-color="<%- item.line_1_colors[2] %>"/>
                            </linearGradient>
                        </defs>
                    </svg>
                <% } %>
                <% if (item.wavy_line && item.wavy_background) { %>
                    <svg class="background-line-wavy background-line" xmlns="http://www.w3.org/2000/svg" width="400" height="150" viewBox="0 0 400 150" fill="none">
                        <path xmlns="http://www.w3.org/2000/svg" opacity="0.5" d="M11 31C11 241.403 11 195.816 11 241.403C11 241.403 11 121.444 11 150.5C70.5195 150.5 130.294 150.5 155 150.5C176.899 150.5 375.978 150.5 399 150.5V43.5C382 50 383 93.5 349 93.5C312.5 93.5 301 43.5 266 43.5C212 36.5 200 91.5 155 70.5C107.702 48.4277 85 3.00002 11 31Z" fill="url(#wavy-area-gradient)" fill-opacity="0.53"/>
                        <defs>
                            <linearGradient id="wavy-area-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
                                <stop stop-color="<%- item.wavy_colors[0] %>"/>
                                <stop offset="0.485" stop-color="<%- item.wavy_colors[1] %>"/>
                                <stop offset="1" stop-color="<%- item.wavy_colors[2] %>"/>
                            </linearGradient>
                        </defs>
                    </svg>
                <% } %>
                <div class="svg-chart-values-vertical <%-item.axis_y_position%>" style="color: <%-item.axis_y_color%>">
                    <% item.axis_y.forEach(function(option) { %>
                        <div>
                            <span class="dash" style="border-top: 1px dashed <%-item.axis_y_color%>"></span>
                            <span class="option"><%- __(option.content || option) %></span>
                        </div>
                    <% }) %>
                </div>
            </div>
            <div class="svg-chart-values" style="color: <%-item.axis_x_color%>">
                <% item.axis_x.forEach(function(option) { %>
                    <div><%- __(option.content || option) %></div>
                <% }) %>
            </div>
        <% } %>
        <% if (item.lines_count == '2') { %>
            <div class="svg-chart-wrapper two-lines <%-item.graph_direction%>">
                <div class="chart-line line-x double"></div>
                <% if (item.axis_y.length) { %>
                    <div class="chart-line double"></div>
                <% } %>
                <div class="chart-circle1 double"><%- __(item.zero_point) %></div>
                <div class="chart-line-text" style="<%-item.line_1_text_style%>"><%- item.line_1_text %></div>
                <div class="chart-line-text" style="<%-item.line_2_text_style%>"><%- item.line_2_text %></div>
                <% if (item.line_1_point) { %>
                    <div class="chart-circle chart-circle2 double" style="background: <%- item.line_1_colors[item.line_1_colors.length-1] %>">
                        <div class="corner" style="background: <%- item.line_1_colors[item.line_1_colors.length-1] %>"></div>
                        <%- __(item.line_1_point) %>
                    </div>
                <% } %>
                <% if (item.line_2_point) { %>
                    <div class="chart-circle chart-circle3" style="background: <%- item.line_2_colors[item.line_2_colors.length-1] %>">
                        <div class="corner" style="background: <%- item.line_2_colors[item.line_2_colors.length-1] %>"></div>
                        <%- __(item.line_2_point) %>
                    </div>
                <% } %>
                <svg width="404" height="210" viewBox="0 0 404 210" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg-chart svg-chart-double">
                    <defs>
                        <% if (item.line_1_colors.length == 1) { %>
                            <linearGradient id="area-gradient1" x1="0%" x2="100%" y1="0%" y2="0%">
                                <stop stop-color="<%- item.line_1_colors[0] %>"/>
                                <stop offset="0.485" stop-color="<%- item.line_1_colors[0] %>"/>
                                <stop offset="1" stop-color="<%- item.line_1_colors[0] %>"/>
                            </linearGradient>
                        <% } %>
                        <% if (item.line_2_colors.length == 1) { %>
                            <linearGradient id="area-gradient2" x1="0%" x2="100%" y1="0%" y2="0%">
                                <stop stop-color="<%- item.line_2_colors[0] %>"/>
                                <stop offset="0.485" stop-color="<%- item.line_2_colors[0] %>"/>
                                <stop offset="1" stop-color="<%- item.line_2_colors[0] %>"/>
                            </linearGradient>
                        <% } %>
                            <% if (item.line_1_colors.length > 1) { %>
                                <linearGradient id="area-gradient1" x1="0%" x2="100%" y1="0%" y2="0%">
                                    <stop stop-color="<%- item.line_1_colors[0] %>"/>
                                    <stop offset="0.485" stop-color="<%- item.line_1_colors[1] %>"/>
                                    <stop offset="1" stop-color="<%- item.line_1_colors[2] %>"/>
                                </linearGradient>
                            <% } %>
                            <% if (item.line_2_colors.length > 1) { %>
                                <linearGradient id="area-gradient2" x1="0%" x2="100%" y1="0%" y2="0%">
                                    <stop stop-color="<%- item.line_2_colors[0] %>"/>
                                    <stop offset="0.485" stop-color="<%- item.line_2_colors[1] %>"/>
                                    <stop offset="1" stop-color="<%- item.line_2_colors[2] %>"/>
                                </linearGradient>
                            <% } %>
                    </defs>
                    <path d="M29.5114 4.10915C73.6914 19.1241 121.609 36.0551 163.5 59.5C201.5 80.7673 215 104.5 256 132.5C273.822 143.03 307.239 167.77 326.5 173C350.033 182.973 356.239 180.77 375.5 186" stroke="url(#area-gradient2)" stroke-width="3" stroke-dasharray="401.57 401.57"/>
                    <path d="M30.0001 4.00021C75.2671 6.79921 119.733 10.307 165 21.5C210.267 32.694 229.5 54.5 274 69C293.4 74.277 299 79.5 321 83.5C339.752 86.9094 355.5 89.5 375.5 89.5" stroke="url(#area-gradient1)" stroke-width="3" stroke-dasharray="401.57 401.57"/>
                    <path d="M30.0001 8.00043C32.2093 8.00043 34.0001 6.20957 34.0001 4.00043C34.0001 1.79129 32.2093 0.000427246 30.0001 0.000427246C27.791 0.000427246 26.0001 1.79129 26.0001 4.00043C26.0001 6.20957 27.791 8.00043 30.0001 8.00043Z" fill="<%- item.line_1_colors[0] %>"/>
                    <% if (item.line_1_point.length) { %>
                        <path d="M358 96C361.866 96 365 92.866 365 89C365 85.134 361.866 82 358 82C354.134 82 351 85.134 351 89C351 92.866 354.134 96 358 96Z" fill="<%- item.line_1_colors[item.line_1_colors.length-1] %>" class="circle-path" stroke="white" stroke-width="2"/>
                    <% } %>
                    <% if (item.line_2_point.length) { %>
                        <path d="M358 189C361.866 189 365 185.866 365 182C365 178.134 361.866 175 358 175C354.134 175 351 178.134 351 182C351 185.866 354.134 189 358 189Z" fill="<%- item.line_2_colors[item.line_2_colors.length-1] %>" class="circle-path" stroke="white" stroke-width="2"/>
                    <% } %>
                </svg>
                <% if (item.graph_direction == "up") { %>
                    <% if (item.line_1_background) { %>
                        <svg class="background-line1 background-line double" xmlns="http://www.w3.org/2000/svg" width="346" height="87" viewBox="0 0 346 87" fill="none">
                            <defs>
                                <linearGradient id="area-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
                                    <stop stop-color="<%- item.line_1_colors[0] %>"/>
                                    <stop offset="0.485" stop-color="<%- item.line_1_colors[1] %>"/>
                                    <stop offset="1" stop-color="<%- item.line_1_colors[2] %>"/>
                                </linearGradient>
                            </defs>
                            <path d="M345.621 86.4134C345.817 5.21529 345.327 0.676284 345.327 0.676284C345.327 0.676284 271.828 0.830622 264.328 0.84399C207.541 0.945208 161.328 1.05725 139.328 1.1028C119.828 1.14317 21.3096 1.46915 0.81003 1.33024C19.1986 1.70928 25.6358 2.984 50.3178 5.74199C74.9999 8.49999 97.2947 7.8505 134.84 18.0914C178.5 30 184 40.5 225.413 58.93C285.5 81 299 85.5 345.621 86.4134Z" opacity="0.5" fill="url(#area-gradient)"/>
                        </svg>
                    <% } %>
                    <% if (item.line_2_background) { %>
                        <svg class="background-line background-line2" xmlns="http://www.w3.org/2000/svg" width="347" height="211" viewBox="0 0 347 211" fill="none">
                            <defs>
                                <linearGradient id="area-gradient2" x1="0%" x2="100%" y1="0%" y2="0%">
                                    <stop stop-color="<%- item.line_2_colors[0] %>"/>
                                    <stop offset="0.485" stop-color="<%- item.line_2_colors[1] %>"/>
                                    <stop offset="1" stop-color="<%- item.line_2_colors[2] %>"/>
                                </linearGradient>
                            </defs>
                            <path opacity="0.5" d="M346.774 210.421C346.903 0.420549 346.875 45.9205 346.903 0.420564C346.903 0.420564 346.868 57.7078 346.885 28.7078C293.885 28.6752 254 28.7214 232 28.7078C212.5 28.6958 20.5 28.7204 -4.31011e-06 28.7078C16.6147 34.5 25 37.1786 52.5 47C80 56.8214 97.5686 64.8259 130.5 81.5C170 101.5 161.5 108.5 221 152.5C274.5 190.5 306 205.5 346.774 210.421Z" fill="url(#area-gradient2)"/>
                        </svg>
                    <% } %>
                <% } %>
                <% if (item.graph_direction != "up") { %>
                    <% if (item.line_1_background) { %>
                        <svg class="background-line1 background-line double" xmlns="http://www.w3.org/2000/svg" width="404" height="210" viewBox="0 0 404 210" fill="none">
                            <defs>
                                <linearGradient id="area-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
                                    <stop stop-color="<%- item.line_1_colors[0] %>"/>
                                    <stop offset="0.485" stop-color="<%- item.line_1_colors[1] %>"/>
                                    <stop offset="1" stop-color="<%- item.line_1_colors[2] %>"/>
                                </linearGradient>
                            </defs>
                            <path d="M29.5 4.00001C29.5 214 29.5 168.5 29.5 214C29.5 214 29.5 235.5 29.5 264.5C82.5 264.5 133.5 264.5 155.5 264.5C175 264.5 354.5 264.5 375 264.5L375 89C356.609 88.7456 342.5 87.5 325 84.5C307.5 81.5 286.189 73.4343 269 67.5C227 53 201 27.5 157.5 20C115.5 10 73 6.00001 29.5 4.00001Z" fill="url(#area-gradient1)" style="opacity: 0.5;"/>
                        </svg>
                    <% } %>
                    <% if (item.line_2_background) { %>
                        <svg class="background-line background-line2" xmlns="http://www.w3.org/2000/svg" width="404" height="210" viewBox="0 0 404 210" fill="none">
                            <path d="M29.5 3.99977C29.5 214 29.5 168.5 29.5 214C29.5 214 29.5 235.5 29.5 264.5C82.5 264.5 133.5 264.5 155.5 264.5C175 264.5 354.5 264.5 375 264.5L375 185.5C356.5 183.5 334 176.5 316 169C298 161.5 267 139.107 250.5 128.5C215.5 106 217.5 88.5 159.5 57C101.5 28.5 86 24 29.5 3.99977Z" fill="url(#area-gradient2)" style="opacity: 0.5;"/>
                            <defs>
                                <linearGradient id="area-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
                                    <stop stop-color="<%- item.line_2_colors[0] %>"/>
                                    <stop offset="0.485" stop-color="<%- item.line_2_colors[1] %>"/>
                                    <stop offset="1" stop-color="<%- item.line_2_colors[2] %>"/>
                                </linearGradient>
                            </defs>
                        </svg>
                    <% } %>
                <% } %>
                <div class="svg-chart-values-vertical double <%-item.axis_y_position%>" style="color: <%-item.axis_y_color%>">
                    <% item.axis_y.forEach(function(option) { %>
                        <div>
                            <span class="dash" style="border-top: 1px dashed <%-item.axis_x_color%>"></span>
                            <span class="option"><%- __(option.content || option) %></span>
                        </div>
                    <% }) %>
                </div>
            </div>
            <div class="svg-chart-values double" style="color: <%-item.axis_x_color%>">
                <% item.axis_x.forEach(function(option) { %>
                    <div><%- __(option.content || option) %></div>
                <% }) %>
            </div>
        <% } %>
        </div>
    <% } %>
    <% if (item.type == 'graph-new') { %>
        <div class="graph-new <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <% function topDownLength(str) {
                    str = str.split(' ');
                    return str.filter(line => line === "top_down").length;
                }
            %>
            <% function downTopLength(str) {
                    str = str.split(' ');
                    return str.filter(line => line === "down_top").length;
                }
            %>
            <% function topWavyLength(str) {
                    str = str.split(' ');
                    return str.filter(line => line === "top_wavy").length;
                }
            %>
            <div class="svg-chart-wrapper">
                <% if (item.axis_y.length) { %>
                    <div class="chart-line"></div>
                <% } %>
                <div class="chart-line line-x"></div>
                <% if (item.top_zero_point.length) { %>
                    <div class="chart-circle-top"><%- __(item.top_zero_point) %></div>
                <% } %>
                <% if (item.down_zero_point.length) { %>
                    <div class="chart-circle-down"><%- __(item.down_zero_point) %></div>
                <% } %>
                <% if (item.down_line_1_point.length && downTopLength(item.set_lines) >= 1) { %>
                    <div class="chart-circle top-point1" style="background: <%- item.top_down_1_colors[item.top_down_1_colors.length-1] %>">
                        <div class="corner" style="background: <%- __(item.top_down_1_colors[item.top_down_1_colors.length-1]) %>"></div>
                        <%- __(item.down_line_1_point) %>
                    </div>
                <% } %>
                <% if (item.top_line_1_point.length && topDownLength(item.set_lines) >= 1) { %>
                    <div class="chart-circle down-point1" style="background: <%- item.top_down_2_colors[item.top_down_2_colors.length-1] %>">
                        <div class="corner" style="background: <%- __(item.top_down_2_colors[item.top_down_2_colors.length-1]) %>"></div>
                        <%- __(item.top_line_1_point) %>
                    </div>
                <% } %>
                <% if (item.top_line_2_point.length && topDownLength(item.set_lines) === 2) { %>
                    <div class="chart-circle top-point2" style="background: <%- item.down_top_1_colors[item.down_top_1_colors.length-1] %>">
                        <div class="corner" style="background: <%- __(item.down_top_1_colors[item.down_top_1_colors.length-1]) %>"></div>
                        <%- __(item.top_line_2_point) %>
                    </div>
                <% } %>
                <% if (item.down_line_2_point.length && downTopLength(item.set_lines) === 2) { %>
                    <div class="chart-circle down-point2" style="background: <%- item.down_top_2_colors[item.down_top_2_colors.length-1] %>">
                        <div class="corner" style="background: <%- __(item.down_top_2_colors[item.down_top_2_colors.length-1]) %>"></div>
                        <%- __(item.down_line_2_point) %>
                    </div>
                <% } %>
                <svg width="403" height="285" viewBox="0 0 403 285" fill="none" class="svg-graph" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="wavy-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
                            <stop stop-color="<%- item.top_wavy_colors[0] %>"/>
                            <stop offset="0.485" stop-color="<%- item.top_wavy_colors[1] %>"/>
                            <stop offset="1" stop-color="<%- item.top_wavy_colors[2] %>"/>
                        </linearGradient>
                    </defs>
                    <defs>
                        <linearGradient id="top-down-1-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
                            <stop stop-color="<%- item.top_down_1_colors[0] %>"/>
                            <stop offset="0.485" stop-color="<%- item.top_down_1_colors[1] %>"/>
                            <stop offset="1" stop-color="<%- item.top_down_1_colors[2] %>"/>
                        </linearGradient>
                    </defs>
                    <defs>
                        <linearGradient id="top-down-2-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
                            <stop stop-color="<%- item.top_down_2_colors[0] %>"/>
                            <stop offset="0.485" stop-color="<%- item.top_down_2_colors[1] %>"/>
                            <stop offset="1" stop-color="<%- item.top_down_2_colors[2] %>"/>
                        </linearGradient>
                    </defs>
                    <defs>
                        <linearGradient id="down-top-1-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
                            <stop stop-color="<%- item.down_top_1_colors[0] %>"/>
                            <stop offset="0.485" stop-color="<%- item.down_top_1_colors[1] %>"/>
                            <stop offset="1" stop-color="<%- item.down_top_1_colors[2] %>"/>
                        </linearGradient>
                    </defs>
                    <defs>
                        <linearGradient id="down-top-2-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
                            <stop stop-color="<%- item.down_top_2_colors[0] %>"/>
                            <stop offset="0.485" stop-color="<%- item.down_top_2_colors[1] %>"/>
                            <stop offset="1" stop-color="<%- item.down_top_2_colors[2] %>"/>
                        </linearGradient>
                    </defs>
                    <% if (item.top_wavy_background) { %>
                        <path d="M29 61C29 271 29 202.5 29 250C82 250 132.5 250 154.5 250C174 250 353.5 250 374 250L374 85.5C328 86.9691 327.5 138 293.5 141C259.5 144 249.638 98.2782 222.5 87C184 71 141.135 133.592 116.5 118C77 93 88.0385 54.2809 29 61Z" fill="url(#wavy-gradient)" fill-opacity="0.4"/>
                    <% } %>
                    <% if (item.top_down_2_background) { %>
                        <path d="M29.5 61C28.9216 240.5 28.6433 192.528 29 231.5C29 231.5 28.7726 225.6 29 250.44C81.5941 250.855 137.168 250.267 159 250.44C178.351 250.593 353.521 249.839 373.864 250L373.864 142C340.92 129.321 313 128.5 285.5 121.5C258 114.5 242.5 107 224 96.5C189.769 77.0714 158.029 77.6768 137.5 77C92 75.5 74.5685 61.3561 29.5 61Z" fill="url(#top-down-1-gradient)" fill-opacity="0.4"/>
                    <% } %>
                    <% if (item.top_down_1_background) { %>
                        <path d="M29 61C30.7996 237.408 28.6101 195.778 29 234C29 234 28.7515 225.639 29 250C81.3892 250.454 133.254 249.811 155 250C174.275 250.167 353.736 249.824 374 250L374 208C335.5 198.5 325 197 299.5 190.5C274 184 246 165.938 232.5 154.5C196.5 124 157.706 107.417 133 101C94.5 91 83 77.5 29 61Z" fill="url(#top-down-2-gradient)" fill-opacity="0.4"/>
                    <% } %>
                    <% if (item.down_top_2_background) { %>
                        <path d="M374 86.5C374.196 167.698 374 250 374 250C374 250 295.5 250.013 288 250C231.214 249.899 29 250 29 250C29 250 29 224 29 204.5C77.9999 204.5 95.0474 185.5 131.547 181.5C168.047 177.5 141.547 184 180.047 175.5C221.547 166.338 218.547 146.5 276.047 120C334.547 98.9999 326.295 106 374 86.5Z" fill="url(#down-top-2-gradient)" fill-opacity="0.4"/>
                    <% } %>
                    <% if (item.down_top_1_background) { %>
                        <path d="M374 23.5C374.129 233.5 374.114 188.5 374.142 234C374.142 234 374.124 221 374.142 250C321.142 250.033 29 250 29 250C29 250 29 226.5 29 205C97.5 175.5 69.6555 183.42 112.155 165.42C154.655 147.42 144.156 155.42 177.155 138.92C196.297 129.349 192.156 127.42 247.156 69.9201C291.656 29.4201 355.643 25.9201 374 23.5Z" fill="url(#down-top-1-gradient)" fill-opacity="0.4"/>
                    <% } %>
                    <% if (topWavyLength(item.set_lines)) { %>
                        <path d="M29 61C86.5 57.9998 73.0815 78.092 106.582 112.092C138.098 144.079 180.581 71.0921 221.082 87.0921C255.081 100.524 256.731 145.66 297.081 141.092C323.581 138.092 331.081 86.092 374.081 86.092" stroke="url(#wavy-gradient)" stroke-width="3"/>
                    <% } %>
                    <% if (topDownLength(item.set_lines) >= 1) { %>
                        <path d="M29 61C72 61 83.5 71.934 129.5 76.4449C157 79.1416 159.5 72.3263 208.5 88.8008C222.827 93.6178 234.594 106.965 281 120.377C300 125.869 330 127.585 374 142" stroke="url(#top-down-1-gradient)" stroke-width="3"/>
                        <path class="circle-path" d="M357.084 144C360.95 144 364.084 140.866 364.084 137C364.084 133.134 360.95 130 357.084 130C353.218 130 350.084 133.134 350.084 137C350.084 140.866 353.218 144 357.084 144Z" fill="<%- item.top_down_1_colors[2] %>" stroke="white" stroke-width="2"/>
                    <% } %>
                    <% if (topDownLength(item.set_lines) === 2) { %>
                        <path d="M29 61C72.3387 74.5865 86.1656 86.4645 130.74 100.474C172.436 113.579 194.584 124.127 220.845 146.527C246.353 163.904 260.721 175.564 287.088 186.193C309.475 195.218 354.752 202.659 373.523 207.756" stroke="url(#top-down-2-gradient)" stroke-width="3"/>
                        <path class="circle-path" d="M356 211C359.866 211 363 207.866 363 204C363 200.134 359.866 197 356 197C352.134 197 349 200.134 349 204C349 207.866 352.134 211 356 211Z" fill="<%- item.top_down_2_colors[2] %>" stroke="white" stroke-width="2"/>
                    <% } %>
                    <% if (downTopLength(item.set_lines) >= 1) { %>
                        <path d="M29 204C73.1687 189.004 87.7178 171.786 133.14 156.306C175.629 141.824 197.631 128.364 222.155 96.4942C246.669 72.5838 260.18 56.1055 286.679 43.1814C309.177 32.2081 354.739 27.7053 373.994 22.4769" stroke="url(#down-top-1-gradient)" stroke-width="3"/>
                        <path class="circle-path" d="M357.084 32.9996C360.95 32.9996 364.084 29.8656 364.084 25.9996C364.084 22.1336 360.95 18.9996 357.084 18.9996C353.218 18.9996 350.084 22.1336 350.084 25.9996C350.084 29.8656 353.218 32.9996 357.084 32.9996Z" fill="<%- item.down_top_1_colors[2] %>" stroke="white" stroke-width="2"/>
                    <% } %>
                    <% if (downTopLength(item.set_lines) === 2) { %>
                        <path d="M29 204.5C72 204.5 83.5 188.571 129.5 182C157 178.071 159.5 188 208.5 164C222.827 156.983 234.594 137.539 281 118C300 110 330 107.5 374 86.5" stroke="url(#down-top-2-gradient)" stroke-width="3"/>
                        <path class="circle-path" d="M356 100C359.866 100 363 96.866 363 93C363 89.134 359.866 86 356 86C352.134 86 349 89.134 349 93C349 96.866 352.134 100 356 100Z" fill="<%- item.down_top_2_colors[2] %>" stroke="white" stroke-width="2"/>
                    <% } %>
                    <% if (topDownLength(item.set_lines)) { %>
                        <path d="M29 65C31.2091 65 33 63.2091 33 61C33 58.7909 31.2091 57 29 57C26.7909 57 25 58.7909 25 61C25 63.2091 26.7909 65 29 65Z" fill="<%- item.top_down_1_colors[0] %>"/>
                    <% } %>
                    <% if (downTopLength(item.set_lines)) { %>
                        <path d="M29.0838 208C31.2929 208 33.0838 206.209 33.0838 204C33.0838 201.791 31.2929 200 29.0838 200C26.8746 200 25.0838 201.791 25.0838 204C25.0838 206.209 26.8746 208 29.0838 208Z" fill="<%- item.down_top_1_colors[0] %>"/>
                    <% } %>
                </svg>
                <div class="svg-chart-values" style="color: <%-item.axis_x_color%>">
                    <% item.axis_x.forEach(function(option) { %>
                        <div><%- __(option.content || option) %></div>
                    <% }) %>
                </div>
                <div class="svg-chart-values-vertical <%-item.axis_y_position%>" style="color: <%-item.axis_y_color%>">
                    <% item.axis_y.forEach(function(option) { %>
                    <div>
                        <span class="dash" style="border-top: 1px dashed <%-item.axis_y_color%>"></span>
                        <span class="option"><%- __(option.content || option) %></span>
                    </div>
                    <% }) %>
                </div>
            </div>
    </div>
    <% } %>
    <% if (item.type=='payment-accordion' ) { %>
        <div class="quiz__body <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-question-type="options-multiple" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="accordion-block">
                <% item.options.forEach(function(option, index) { %>
                    <label class="accordion-label" data-payment-method="<%-option.type%>">
                        <input class="accordion-input" type="radio" <% if (option.checked) { %> checked <% } %> name="<%- screen.id %>-payment-accordion" id="payment-accordion-<%- screen.id %>-<%- index %>" value="<%- option.type %>">
                        <span class="accordion-inner <%-option.type%>">
                            <span class="accordion-top">
                                <span class="accordion-round"></span>
                                <% if (option.title) { %>
                                <span class="accordion-title">
                                    <%- __(option.title) %>
                                </span>
                                <% } %>

                                <span class="accordion-image">
                                    <% if (option.image) { %>
                                        <img src="<%- __(option.image) %>" alt="">
                                    <% } %>
                                </span>
                            </span>
                            <span class="accordion-descr">
                                <% if (option.list && option.list.length ) { %>
                                    <ul class="quiz__list">
                                        <% option.list.forEach(function(item) { %>
                                            <li class="quiz__list-item">
                                                <svg width="13" height="11" viewBox="0 0 13 11" fill="none">
                                                    <path class="checkmark" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path></svg>
                                                <span><%- __(item) %></span>
                                            </li>
                                        <% }) %>
                                    </ul>
                                <% } %>

                            <% if (option.type == "card") { %>
                                <%- TemplateManager.renderTemplate('screen-content', {screen: {
                                        content: [
                                            mergeObjects({
                                                "type": "stripe-form"
                                            }, option['stripe-form'])
                                        ]
                                    }}) %>
                            <% } else if (option.type == "paypal") {  %>
                                <div id="paypal-button-container" style="margin: 10px 0 ;"></div>
                            <% } else if (option.type == "applepay") { %>
                                <%- TemplateManager.renderTemplate('screen-content', {screen: {
                                        content: [
                                            mergeObjects({
                                                "type": "express-checkout"
                                            }, option['express-checkout'])
                                        ]
                                    }}) %>
                            <% } else if (option.type == "stripe-payment-request-button") { %>
                                <%- TemplateManager.renderTemplate('screen-content', {screen: {
                                        content: [
                                            mergeObjects({
                                                "type": "stripe-payment-request-button"
                                            }, option['stripe-payment-request-button'])
                                        ]
                                    }}) %>
                            <% } %>

                                <span class="accordion-descr-down"><%- __(option.text_down) %></span>
                            </span>
                        </span>
                    </label>
                <% }) %>
            </div>
        </div>
    <% } %>
    <% if (item.type == 'text-range-slider') { %>
        <div class="text__range__slider <%-__(item.class || '') %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style || '') %>" data-block-area-index="<%-contentItemIndex%>">
            <div class="text__range__slider-title">
                <%- item.title %>
            </div>
            <div class="text__range__slider-tooltip" id="<%- item.name || screen.id %>-displayStyle">
                <div id="<%- item.name || screen.id %>-displayText"><%- item.options[item.start_option]?.content %></div>
            </div>
            <div class="text__range__slider-input">
                <script>
					textRange(<%- JSON.stringify(item.options) %>, <%= item.start_option %>, <%- JSON.stringify(item.name || screen.id) %>)
                </script>
                <input type="range"
                       name="<%- item.name || screen.id %>"
                       oninput="
                               const displayText = document.getElementById('<%- item.name || screen.id %>-displayText');
                               const displayStyle = document.getElementById('<%- item.name || screen.id %>-displayStyle');
                               displayText.textContent = window.range_options[this.value]?.content;
                               displayStyle.style.left= (100/<%- item.options.length %>)*this.value + '%';"
                       min="0" max="<%- item.options.length - 1 %>" value="<%- item.start_option%>" step="1">
                <div>
                    <span><%- item.start_content %></span>
                    <span><%- item.end_content %></span>
                </div>
            </div>
        </div>
    <% } %>
    <% if (item.type == 'timer-sticky') { %>
        <div class="main__panel <%-__(item.class || '') %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style || '') %>" data-block-area-index="<%-contentItemIndex%>" data-timer-end-action="<%-item.on_timer_end_action || ''%>" data-timer-end-popup-id="<%-item.on_timer_end_popup_id || ''%>" data-timer-end-js-callback="<%-item.on_timer_end_js_callback || ''%>" data-timer-end-redirect-url="<%-item.on_timer_end_redirect_url || ''%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="main__panel-content">
                <div class="main__panel-inner">
                    <div class="main__panel-descr">
                        <p><%-__(item.content) %></p>
                    </div>
                    <div class="main__panel-counter" data-text-counter="<%- item.time %>"></div>
                </div>
                <button type="button" class="main__panel-button button-green"
                <% if (!item.pay_button_onclick) { %>
                        data-popup="#popup-plan"
                <% } else if (item.pay_button_onclick == 'payment-form') { %>
                        data-scroll-to="#payment-form"
                <% } else if (item.pay_button_onclick == 'redirect_price_url') { %>
                        data-redirect-price-url
                        <% } else if (item.pay_button_onclick.startsWith('scroll-to-index|')) { %>
                        data-scroll-to="[data-block-area-index='<%-item.pay_button_onclick.split('|')[1]%>']"
                        <% } else {  %>
                        data-popup="#<%-item.pay_button_onclick%>"
                        <% } %>
                ><%-__(item['Button text']) %></button>
            </div>
        </div>
    <% } %>

    <% if (item.type == 'customers-joined') { %>
        <div class="customers__wrapper <%-__(item.class || '') %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style || '') %>" data-block-area-index="<%-contentItemIndex%>"  <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="customers__title">
                <%- item.title %>
            </div>
            <div class="customers__content">
                <% item.customers.forEach(function(option) { %>
                    <div><%- __(option) %></div>
                <% }) %>
            </div>
        </div>
    <% } %>
    <% if (item.type == 'range-slider') { %>
        <div class="range__slider <%-__(item.class || '') %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style || '') %>" data-block-area-index="<%-contentItemIndex%>">
            <div class="range__slider-image">
                <img id="<%- item.name || screen.id %>-displayImage" src="<%= item.options[item.start_option]?.image %>" alt="Image Slider" style="max-width: 100%; height: 218px;">
            </div>
            <div class="range__slider-title">
                <%- item.title %>
            </div>
            <div class="range__slider-tooltip" id="<%- item.name || screen.id %>-displayStyle">
                <div id="<%- item.name || screen.id %>-displayText"><%- item.options[item.start_option]?.content %></div>
            </div>
            <div class="range__slider-input">
                <script>
					function decodeHtml(html) {
						var txt = document.createElement("textarea");
						txt.innerHTML = html;
						return txt.value;
					}
					window.range_options = JSON.parse(decodeHtml('<%= JSON.stringify(item.options) %>'));
					var val = (window.quiz.custom_json?.prefill_answers && window.user_properties['<%- item.name || screen.id %>']) ? parseInt(window.user_properties['<%- item.name || screen.id %>']) : <%- item.start_option %>;
					if (val >= 0 && val < window.range_options.length) {
						document.getElementById('<%- item.name || screen.id %>-displayStyle').style.left = (100/<%- item.options.length %>)*val + '%';
						document.getElementById('<%- item.name || screen.id %>-displayImage').src = window.range_options[val]?.image;
						document.getElementById('<%- item.name || screen.id %>-displayText').textContent = window.range_options[val]?.content;
					}
                </script>
                <input type="range"
                       name="<%- item.name || screen.id %>"
                       oninput="
					   const displayText = document.getElementById('<%- item.name || screen.id %>-displayText');
					   const displayImage = document.getElementById('<%- item.name || screen.id %>-displayImage');
                       const displayStyle = document.getElementById('<%- item.name || screen.id %>-displayStyle');
                       displayImage.src = window.range_options[this.value]?.image;
                       displayText.textContent = window.range_options[this.value]?.content;
					   displayStyle.style.left= (100/<%- item.options.length %>)*this.value + '%';"
                       min="0" max="<%- item.options.length - 1 %>" value="<%- (window.quiz.custom_json?.prefill_answers && window.user_properties[item.name || screen.id]) ? window.user_properties[item.name || screen.id] : item.start_option%>" step="1">
                <div>
                    <span><%- item.options[0]?.content %></span>
                    <span><%- item.options[item.options.length - 1]?.content %></span>
                </div>
            </div>
        </div>
    <% } %>

    <% if (item.type == 'checkout-summary') { %>
        <div class="plan-popup__check <%-__(item.class || '') %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>"  style="<%-__(item.style || '') %>" data-block-area-index="<%-contentItemIndex%>"  <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="plan-popup__info" data-price-fill-toggle="priceDiff">
                <span class="plan-popup__info-descr"><%-__('Original price')%></span>
                <span class="plan-popup__info-price" data-price-fill="priceOld"></span>
                <span class="plan-popup__info-descr" data-price-fill-toggle="discountPercent">
                    <span data-price-fill="discountPercent"></span><%-__('% OFF')%>
                </span>
                <%# specialOfferText - removed from priceInfo
                <span class="plan-popup__info-descr" data-price-fill-toggle-not="discountPercent">
                    <span data-price-fill="specialOfferText"></span>
                </span>
                %>

                <span class="plan-popup__info-price plan-popup__check-price--red">
                    <span data-price-fill="priceDiff"></span>
                </span>
            </div>
            <hr class="plan-popup__check-line">
            <div class="plan-popup__totals"  data-price-fill-toggle-not="freePeriodDescr">
                <span class="plan-popup__totals-descr"><%-__('Total:')%></span>
                <span class="plan-popup__totals-sum"  data-price-fill="priceCurrentCurrency"></span>
            </div>
            <div class="plan-popup__totals" data-price-fill-toggle="freePeriodDescr">
                <span class="plan-popup__totals-descr"><%-__('No payment now')%></span>
                <span class="plan-popup__totals-sum"  data-price-fill="freePeriodDescr"></span>
            </div>

            <hr class="plan-popup__check-line">

            <div class="plan-popup__info-bottom">
                <span class="plan-popup__info-descr"><%-item.content%></span>
            </div>

            <hr class="plan-popup__check-line">
        </div>
    <% } %>

    <% if (item.type == 'powered-stripe') { %>
        <div class="powered-by-stripe <%-__(item.class || '') %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-block-area-index="<%-contentItemIndex%>" style="<%-__(item.style || '') %>"  <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <span style="margin-right: 5px; margin-top: -4px;"><%-__('Powered by')%> </span>
            <svg class="" height="16" width="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 150"><path fill-rule="evenodd" d="M360 77.4c0 2.4-.2 7.6-.2 8.9h-48.9c1.1 11.8 9.7 15.2 19.4 15.2 9.9 0 17.7-2.1 24.5-5.5v20c-6.8 3.8-15.8 6.5-27.7 6.5-24.4 0-41.4-15.2-41.4-45.3 0-25.4 14.4-45.6 38.2-45.6 23.7 0 36.1 20.2 36.1 45.8zm-49.4-9.5h25.8c0-11.3-6.5-16-12.6-16-6.3 0-13.2 4.7-13.2 16zm-63.5-36.3c17.5 0 34 15.8 34.1 44.8 0 31.7-16.3 46.1-34.2 46.1-8.8 0-14.1-3.7-17.7-6.3l-.1 28.3-25 5.3V33.2h22l1.3 6.2c3.5-3.2 9.8-7.8 19.6-7.8zm-6 68.9c9.2 0 15.4-10 15.4-23.4 0-13.1-6.3-23.3-15.4-23.3-5.7 0-9.3 2-11.9 4.9l.1 37.1c2.4 2.6 5.9 4.7 11.8 4.7zm-71.3-74.8V5.3L194.9 0v20.3l-25.1 5.4zm0 7.6h25.1v87.5h-25.1V33.3zm-26.9 7.4c5.9-10.8 17.6-8.6 20.8-7.4v23c-3.1-1.1-13.1-2.5-19 5.2v59.3h-25V33.3h21.6l1.6 7.4zm-50-29.1l-.1 21.7h19v21.3h-19v35.5c0 14.8 15.8 10.2 19 8.9v20.3c-3.3 1.8-9.3 3.3-17.5 3.3-14.8 0-25.9-10.9-25.9-25.7l.1-80.1 24.4-5.2zM25.3 58.7c0 11.2 38.1 5.9 38.2 35.7 0 17.9-14.3 28.2-35.1 28.2-8.6 0-18-1.7-27.3-5.7V93.1c8.4 4.6 19 8 27.3 8 5.6 0 9.6-1.5 9.6-6.1 0-11.9-38-7.5-38-35.1 0-17.7 13.5-28.3 33.8-28.3 8.3 0 16.5 1.3 24.8 4.6v23.5c-7.6-4.1-17.2-6.4-24.8-6.4-5.3 0-8.5 1.5-8.5 5.4z"></path></svg>
        </div>
    <% } %>

    <% if (item.type == 'download-app-banners') { %>
        <div class="<%-__(item.class || '') %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-block-area-index="<%-contentItemIndex%>" style="<%-__(item.style || '') %>"  <%- item.attributes || '' %>>
        <% if (!item.download_app_mode) {
			if (detectPlatform() == 'iOS' || detectPlatform() == 'iPad') { %>
                <a href="<%- __(item.app_store_link || project.app_links.app_store) %>" class="pay-finish__link" onclick="AnalyticsManager.logEvent('Click download button', {platform: 'AppStore'});" ><img src="/img/after-pay/app_store.svg" alt="" /></a>
            <%} else if (detectPlatform() == 'Android') { %>
                <a href="<%- __(item.google_play_link || project.app_links.google_play) %>" class="pay-finish__link" onclick="AnalyticsManager.logEvent('Click download button', {platform: 'GooglePlay'});"  ><img src="/img/after-pay/google_play.svg" alt="" /></a>
            <% } else { %>
                <p class="quiz__descr"><%-__(item.qr_code_text)%></p>
                <a href="<%- __(item.web_link || project.app_links.web) %>" class="pay-finish__link" onclick="AnalyticsManager.logEvent('Click download button', {platform: 'web'});" >
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=<%- encodeURIComponent(__(item.web_link || project.app_links.web)) %>" alt="" width="200" height="200">
                </a>
            <% }
        } else { %>
            <a href="<%- __(item.app_store_link || project.app_links.app_store) %>" class="pay-finish__link" onclick="AnalyticsManager.logEvent('Click download button', {platform: 'AppStore'});" ><img src="/img/after-pay/app_store.svg" alt="" /></a>

            <a href="<%- __(item.google_play_link || project.app_links.google_play) %>" class="pay-finish__link" onclick="AnalyticsManager.logEvent('Click download button', {platform: 'GooglePlay'});"  ><img src="/img/after-pay/google_play.svg" alt="" /></a>

            <p class="quiz__descr"><%-__(item.qr_code_text)%></p>

            <a href="<%- __(item.web_link || project.app_links.web) %>" class="pay-finish__link" onclick="AnalyticsManager.logEvent('Click download button', {platform: 'web'});" >
                <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=<%- encodeURIComponent(__(item.web_link || project.app_links.web)) %>" alt="" width="200" height="200">
            </a>
        <% } %>
        </div>
    <% } %>

    <% if (item.type == 'send-download-link') { %>
        <div class="pay-finish__link <%-__(item.class || '') %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-block-area-index="<%-contentItemIndex%>" style="<%-__(item.style || '') %>"  <%- item.attributes || '' %>>
            <button type="button" class="btn btn-green pay-finish-email" data-send-email-link>
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" x="0" y="0" viewBox="0 0 1.27 1.27" style="enable-background:new 0 0 24 24" xml:space="preserve" fill-rule="evenodd" class="">
                        <path fill="var(--primary-color)" fill-rule="nonzero" d="M.152.224h.966c.03 0 .058.014.078.036.019.02.03.05.03.08v.59a.12.12 0 0 1-.03.08.106.106 0 0 1-.078.036H.152a.106.106 0 0 1-.078-.036.12.12 0 0 1-.03-.08V.34a.12.12 0 0 1 .03-.08.106.106 0 0 1 .078-.036zM.645.71l.45-.4h-.9zM1.142.38.673.798a.042.042 0 0 1-.056 0L.128.363V.93c0 .01.004.018.009.023.004.005.01.008.015.008h.966a.021.021 0 0 0 .015-.008.035.035 0 0 0 .009-.023zM.673.798" opacity="1"></path>
                    </svg>
                <span><%-item.content%></span>
            </button>
        </div>
    <% } %>

    <% if (item.type == 'redirect-url') { %>
        <% if (getParams('edit_mode') == 1) { %>
            <div style="background: gray; padding: 5px; border-radius: 2px;"  data-block-area-index="<%-contentItemIndex%>">
                Redirect to <%-__(item.url)%>
            </div>
        <% } else {  %>
            <script>
                setTimeout(function(){
					location.href = __('<%-item.url%>');
                }, <%-item.delay || 0%>);
            </script>
        <% } %>
    <% } %>


    <% if (item.type=='payment-terms' ) { %>
        <div class="quiz__descr <%- item.class %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%- item.style %>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <p><%- __(item.content) %></p>
        </div>
    <% } %>

    <% if (item.type == 'one-click-pay-button') { %>
        <button class="button button-green <%- item.class %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-one-click-price-id="<%- item.price_id %>" data-one-click-paypal-price-id="<%- item.paypal_price_id %>" style="<%- item.style %>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> data-success-message="<%-item.success_message || ''%>" data-success-message-type="<%-item.success_message_type%>" data-show-loading-overlay="<%-item.show_loading_overlay || ''%>" data-success-message-seconds="<%-item.success_message_seconds || ''%>" data-upsell-failed-action="<%-item.upsell_failed_action || ''%>" data-upsell-failed-popup-id="<%-item.upsell_failed_popup_id || ''%>" data-upsell-failed-js-callback="<%-item.upsell_failed_js_callback || ''%>" data-upsell-failed-redirect-url="<%-item.upsell_failed_redirect_url || ''%>">
            <%- __(item.label) %>
        </button>
    <% } %>

    <% if (item.type == 'answer-hint') { %>
        <div class="answer-hint <%- item.class %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%- item.style %>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <%- __(item.content) %>
        </div>
    <% } %>

    <% if (item.type == 'paywall-selector') { %>
        <%- TemplateManager.renderTemplate('screen-content', {screen: {
                content: [
                    {
                        type: "options",
                        name: "paywall_slug",
                        class: "trial-selector",
                        columns: item.options.length,
                        options: item.options.map((el, index) => {
                            el.onclick = '_nothing';
							el.value = el.paywall_slug || '/';
							el.selected = (index == item.selected_index) || (typeof item.selected_index == 'undefined' && index == item.options.length -1);
                            return el;
                        })
                    }
                ]
            }}) %>

            <div class="trial-selector-hint <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>">
                <h3 class="support-text">
                    <%-__(item.content)%>
                </h3>
                <div class="arrow-container">
                    <img
                            alt="arrow"
                            width="26"
                            height="33"
                            decoding="async"
                            class="arrow-img"
                            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAyNiAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wLjk1NDYzMyAzMS41MDIxQzAuNjc5NjMgMzEuNTI3MSAwLjQ3NzAwNyAzMS43NzA0IDAuNTAyMDYyIDMyLjA0NTRDMC41MjcxMTggMzIuMzIwNCAwLjc3MDM2NCAzMi41MjMgMS4wNDUzNyAzMi40OTc5TDAuOTU0NjMzIDMxLjUwMjFaTTIyLjkyMjcgMEwyMC4xMDQ3IDUuMDM5MDdMMjUuODc3NyA0Ljk1OTk5TDIyLjkyMjcgMFpNMS4wNDUzNyAzMi40OTc5QzExLjkwNDYgMzEuNTA4NSAxNy42MTM3IDI3LjM2OSAyMC41NDQzIDIxLjk1NzdDMjMuNDQ2NCAxNi41OTkyIDIzLjU2NDUgMTAuMDg3IDIzLjQ4NDMgNC40OTI5NUwyMi40ODQ0IDQuNTA3MjhDMjIuNTY0OSAxMC4xMjE3IDIyLjQyNzEgMTYuMzgxMyAxOS42NjUgMjEuNDgxNUMxNi45MzE0IDI2LjUyODkgMTEuNTY4IDMwLjUzNTEgMC45NTQ2MzMgMzEuNTAyMUwxLjA0NTM3IDMyLjQ5NzlaIiBmaWxsPSIjMzQzNDM0Ii8+Cjwvc3ZnPg=="
                            style="color: transparent;"
                    />
                </div>
            </div>
    <% } %>

    <% if (item.type == 'lottie') { %>
        <div class="lottie-animation-container <%- item.class || '' %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%- item.style || '' %>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="lottie-animation" data-lottie-src="<%- __(item.src) %>" data-lottie-options='<%-JSON.stringify(item.options) || ''%>'></div>
        </div>
    <% } %>

    <% if (item.type == 'file-upload') { %>
        <div class="file-upload <%-__(item.class)%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%-__(item.style)%>" data-block-area-index="<%-contentItemIndex%>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <label for="file-upload-<%-contentItemIndex%>"><%- __(item.label) %></label>
            <input type="file" id="file-upload-<%-contentItemIndex%>" data-file-upload name="<%-__(item.name || screen.id)%>" data-url="<%- __(item.url) %>" data-callback="<%- JSON.stringify({callback: item.callback || ''}).replace(/"/g, '&quot;') %>" <%- item.required ? 'required' : '' %>
                   accept="<%- item.accept_types || '' %>"
                    <%- item.attributes || '' %>
            />
        </div>
    <% } %>

    <% if (item.type == 'subscriptions-list') { %>
            <div class="subscriptions-list <%- item.class || '' %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%- item.style || '' %>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
                <div class="subscriptions-container" data-question-type="options">
                    <% if (window.subscriptions && window.subscriptions.length > 0) { %>
                        <%
                            // First show active subscriptions (excluding those scheduled for cancellation)
                            const activeSubscriptions = window.subscriptions.filter(sub =>
                                ['active', 'trialing', 'past_due'].includes(sub.status) &&
                                sub.price?.period_interval > 0 &&
                                !sub.cancel_at_period_end
                            );
                            const purchases = window.subscriptions.filter(sub =>
                                ['active', 'trialing', 'past_due'].includes(sub.status) &&
                                sub.price?.period_interval === 0 &&
                                !sub.cancel_at_period_end
                            );
                            const canceledSubscriptions = window.subscriptions.filter(sub =>
                                sub.status === 'canceled' || sub.cancel_at_period_end
                            );
                        %>

                        <% if (activeSubscriptions.length > 0) { %>
                            <div class="active-subscriptions">
                                <h3 class="sub-title"><%-__('Active Subscriptions')%></h3>
                                <% activeSubscriptions.forEach(function(subscription) { %>
                                    <div class="subscription-option">
                                        <input type="radio"
                                               name="subscription_id"
                                               id="subscription_<%= subscription.id %>"
                                               value="<%= subscription.pay_system_id %>"
                                               class="subscription-radio">
                                        <label for="subscription_<%= subscription.id %>">
                                            <div class="subscription-details">
                                                <div class="subscription-name">Subscription #<%= subscription.id %></div>
                                                <div class="subscription-info">
                                                    <span class="price"><%= subscription.price?.price_option_text %></span>
                                                </div>
                                                <div class="subscription-meta">
                                                    <span class="payment-system" style="display: none"><%= subscription.payment_system_label %></span>
                                                    <span class="next-charge"><%-__('Next charge:')%> <%= new Date(subscription.next_charge_date).toLocaleDateString() %></span>
                                                    <span class="created-at"><%-__('Created at:')%> <%= new Date(subscription.created_at).toLocaleDateString() %></span>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                <% }); %>
                            </div>
                        <% } %>

                        <% if (purchases.length > 0) { %>
                        <div class="purchases">
                            <h3 class="sub-title"><%-__('Purchases')%></h3>
                            <% purchases.forEach(function(subscription) { %>
                                <div class="subscription-option purchase">
                                    <div class="subscription-details">
                                        <div class="subscription-name">Purchase #<%= subscription.id %></div>
                                        <div class="subscription-info">
                                            <span class="price"><%= subscription.price?.price_option_text %> </span>
                                        </div>
                                        <div class="subscription-meta">
                                            <span class="payment-system" style="display: none"><%= subscription.payment_system_label %></span>
                                            <span class="created-at"><%-__('Created at:')%> <%= new Date(subscription.created_at).toLocaleDateString() %></span>
                                        </div>
                                    </div>
                                </div>
                            <% }); %>
                        </div>
                        <% } %>

                        <% if (canceledSubscriptions.length > 0) { %>
                            <div class="canceled-subscriptions">
                                <h3 class="sub-title"><%-__('Canceled Subscriptions')%></h3>
                                <% canceledSubscriptions.forEach(function(subscription) { %>
                                    <div class="subscription-option canceled">
                                        <div class="subscription-details">
                                            <div class="subscription-name">Subscription #<%= subscription.id %></div>
                                            <div class="subscription-info">
                                                <span class="price"><%= subscription.price?.price_option_text %></span>
                                            </div>
                                        <div class="subscription-meta">
                                            <span class="payment-system" style="display: none"><%= subscription.payment_system_label %></span>
                                            <% if (subscription.cancel_at_period_end && new Date(subscription.next_charge_date) > new Date()) { %>
                                                <span class="status"><%-__('Will be canceled at')%> <%= new Date(subscription.next_charge_date).toLocaleDateString() %></span>
                                            <% } else { %>
                                                <span class="status"><%-__('Status:')%> <%-__('Canceled')%></span>
                                            <% } %>
                                        </div>
                                        </div>
                                    </div>
                                <% }); %>
                            </div>
                        <% } %>
                    <% } else { %>
                        <div class="no-subscriptions">
                            <%-__('No active subscriptions found')%>
                        </div>
                    <% } %>
                </div>
            </div>
        <% } %>

        <% if (item.type == 'cancel-subscription-button') { %>
            <button class="button button-green <%- __(item.class) %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-cancel-subscription-id="<%- __(item.subscription_id) %>"  data-cancel_at_period_end="<%- __(item.cancel_at_period_end || '') %>" data-cancel-success-action="<%- escapeHtmlForAttribute(item.cancel_success_action || 'default') %>" data-cancel-success-js-callback="<%- escapeHtmlForAttribute(item.cancel_success_js_callback || '') %>" data-cancel-success-url="<%- escapeHtmlForAttribute(__(item.cancel_success_url || '')) %>" style="<%- __(item.style) %>" data-block-area-index="<%-contentItemIndex%>" <%- item.attributes || '' %>>
                <%- __(item.content) %>
            </button>
        <% } %>

        <% if (item.type == 'translations') { %>
            <%# Select autocomplete field template with unified structure %>
            <div class="container-type container-type-<%-item.type%> <%-__(item.container_class) || ''%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
                <%
                    // Get default value and find corresponding display text for translations
                    const defaultValue = __(item.value || '');
                    let placeholderText = __(item.placeholder || 'Select language');

                    // If there are translations available, try to find current or first one
                    if (typeof window.translationsVariants !== 'undefined' && window.translationsVariants && window.translationsVariants.length > 0) {
                        const currentTranslation = window.translationsVariants.find(t => t.is_current);
                        const firstTranslation = window.translationsVariants[0];

                        if (currentTranslation) {
                            placeholderText = `${currentTranslation.emoji} ${currentTranslation.display_name} (${currentTranslation.display_name_en})`;
                        } else if (firstTranslation) {
                            placeholderText = `${firstTranslation.emoji} ${firstTranslation.display_name} (${firstTranslation.display_name_en})`;
                        }
                    }
                %>
                <input type="text" class="country-field select-autocomplete-field" data-select-autocomplete="true" name="user_selected_language" placeholder="<%- placeholderText %>" data-default-value="<%- defaultValue %>" autocomplete="off" data-auto_reload_translation="<%-item.auto_reload_translation%>" />
                <input type="hidden" class="select-autocomplete-value" data-select-autocomplete-value="true" value="<%- defaultValue %>" />

                <ul class="country-list" data-select-autocomplete-list>
                    <% if (window.translationsVariants && window.translationsVariants.length > 0) { %>
                        <% window.translationsVariants.forEach(function(translation) { %>
                            <li data-value="<%= translation.language_code %>" <% if (translation.is_current) { %>class="translation-current"<% } %>>
                                <%= translation.emoji %> <%= translation.display_name %> (<%= translation.display_name_en %>)
                            </li>
                        <% }) %>
                    <% } else { %>
                        <li class="translations-empty">No translations available</li>
                    <% } %>
                </ul>
            </div>
        <% } %>



    <% if (item.type == 'background-draggable') { %>
        <div class="background-draggable-container <%- item.class || '' %> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" style="<%- item.style || '' %>" data-block-area-index="<%-contentItemIndex%>" data-background-draggable <%- item.attributes || '' %> <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %>>
            <div class="background-draggable-without-polygon" data-bg-draggable-without-polygon>
                <div>
                    <img alt="without-polygon"
                         decoding="async"
                         data-nimg="fill"
                         sizes="100vw"
                         src="<%- __(item.content.before_image) %>">
                </div>
            </div>

            <div class="background-draggable-with-polygon" data-bg-draggable-with-polygon style="clip-path: polygon(50% 0px, 100% 0px, 100% 100%, 50% 100%);">
                <div>
                    <img alt="with-polygon"
                         decoding="async"
                         data-nimg="fill"
                         sizes="100vw"
                         src="<%- __(item.content.after_image) %>">
                </div>
            </div>

            <div class="background-draggable-line" data-bg-draggable-line></div>

            <div class="background-draggable-handle" data-bg-draggable-handle>
                <div>
                    <div class="background-draggable-circle">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="m15 18-6-6 6-6"></path>
                        </svg>

                        <div class="mx-0.5 h-4 w-0.5 bg-blue-300 rounded-full"></div>

                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="m9 18 6-6-6-6"></path>
                        </svg>
                    </div>
                    <div class="background-draggable-text" data-bg-draggable-text>Drag me</div>
                </div>
            </div>
        </div>
    <% } %>


    <% if (item.type == 'required-checkbox') { %>
    <div class="container-type container-type-<%-__(item.type)%> <%-__(item.container_class) || ''%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" data-block-area-index="<%- contentItemIndex %>">
        <label class="type-tos-check <%-__(item.class)%>" style="<%-__(item.style)%>"  <%- item.attributes || '' %> >
            <input class="type-tos-check__input" type="checkbox" id="required-checkbox-<%- contentItemIndex %>" name="<%-__(item.name) || 'required_checkbox'%>" <%- (__(item.required) === "true") ? ' data-required-checkbox="true" required' : '' %><%- (__(item.default) === "true") ? ' checked' : '' %>>
            <span class="type-tos-check__label" for="required-checkbox-<%- contentItemIndex %>">
            <%- __(item.content || 'I agree to the terms and conditions') %>
        </span>
        </label>
    </div>
    <% } %>

    <% if (item.type == 'toggle') { %>
    <div class="container-type container-type-<%-__(item.type)%> <%-__(item.container_class) || ''%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
        <div class="toggle-container <%-__(item.class)%>" style="<%-__(item.style)%>" <%- item.attributes || '' %>>
            <label class="toggle-wrapper">
                <span class="toggle-label"><%- __(item.label || '') %></span>
                <input
                        type="checkbox"
                        class="toggle-input"
                        id="toggle-<%- screen.id %>-<%- contentItemIndex %>"
                        name="<%- item.name || 'toggle_' + contentItemIndex %>"
                        <%- (__(item.default) === "true" || window.user_properties[item.name || 'toggle_' + contentItemIndex] ) ? ' checked' : '' %>
                        data-callback="<%- JSON.stringify({callback: item.js_callback || ''}).replace(/"/g, '&quot;') %>"
                >
                <span class="toggle-slider"></span>
            </label>
        </div>
    </div>
    <% } %>

    <% if (item.type == 'signature') { %>
    <div class="container-type container-type-<%-__(item.type)%> <%-__(item.container_class) || ''%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
        <div class="type-signature <%-__(item.class)%>" style="<%-__(item.style)%>" <%- item.attributes || '' %> >
            <div class="type-signature__container">
                <canvas
                        id="signature-<%-contentItemIndex%>"
                        class="type-signature__canvas"
                        data-signature
                        data-name="<%-__(item.name || screen.id)%>"
                        data-required="<%- item.required === 'true' ? 'true' : '' %>"
                ></canvas>
                <button
                        type="button"
                        class="type-signature__clear"
                        data-signature-clear="signature-<%-contentItemIndex%>"
                >Clear</button>
            </div>
            <input
                    type="hidden"
                    name="<%-__(item.name || screen.id)%>"
                    id="signature-<%-contentItemIndex%>-value"
                    <% if (item.required === 'true') { %>required<% } %>
                    data-signature-value
            />
        </div>
    </div>
    <% } %>

<% if (item.type == 'spin-wheel') { %>
<div class="container-type container-type-<%-__(item.type)%> <%-__(item.container_class) || ''%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
    <div class="type-spin-wheel <%-__(item.class)%>" style="<%-__(item.style)%>" <%- item.attributes || '' %> >
        <div class="type-spin-wheel__wrapper">
            <div class="type-spin-wheel__pointer"></div>
            <div
                    class="type-spin-wheel__wheel"
                    id="spin-wheel-<%-contentItemIndex%>"
                    data-spin-wheel
                    data-selected-segment="<%- __(item.selected_segment || '1') %>"
                    data-segment-1="<%- __(item.segment_1 || '') %>"
                    data-segment-2="<%- __(item.segment_2 || '') %>"
                    data-segment-3="<%- __(item.segment_3 || '') %>"
                    data-segment-4="<%- __(item.segment_4 || '') %>"
                    data-segment-5="<%- __(item.segment_5 || '') %>"
                    data-segment-6="<%- __(item.segment_6 || '') %>"
                    data-on-end="<%- __(item.on_end || 'next-screen') %>"
            >
                <div class="type-spin-wheel__segment" data-segment="1">
                    <span class="type-spin-wheel__segment-text"><%- __(item.segment_1 || '') %></span>
                </div>
                <div class="type-spin-wheel__segment" data-segment="2">
                    <span class="type-spin-wheel__segment-text"><%- __(item.segment_2 || '') %></span>
                </div>
                <div class="type-spin-wheel__segment" data-segment="3">
                    <span class="type-spin-wheel__segment-text"><%- __(item.segment_3 || '') %></span>
                </div>
                <div class="type-spin-wheel__segment" data-segment="4">
                    <span class="type-spin-wheel__segment-text"><%- __(item.segment_4 || '') %></span>
                </div>
                <div class="type-spin-wheel__segment" data-segment="5">
                    <span class="type-spin-wheel__segment-text"><%- __(item.segment_5 || '') %></span>
                </div>
                <div class="type-spin-wheel__segment" data-segment="6">
                    <span class="type-spin-wheel__segment-text"><%- __(item.segment_6 || '') %></span>
                </div>
                <div class="type-spin-wheel__center"></div>
                <!-- Perimeter markers -->
                <div class="type-spin-wheel__marker type-spin-wheel__marker--1"></div>
                <div class="type-spin-wheel__marker type-spin-wheel__marker--2"></div>
                <div class="type-spin-wheel__marker type-spin-wheel__marker--3"></div>
                <div class="type-spin-wheel__marker type-spin-wheel__marker--4"></div>
                <div class="type-spin-wheel__marker type-spin-wheel__marker--5"></div>
                <div class="type-spin-wheel__marker type-spin-wheel__marker--6"></div>
            </div>
        </div>
        <button
                type="button"
                class="type-spin-wheel__button"
                data-spin-wheel-button="spin-wheel-<%-contentItemIndex%>"
                data-hide-on-spin="<%- __(item.hide_button_on_spin || '') %>"
        >
            <%- __(item.button_text || 'Spin') %>
        </button>
    </div>
</div>
<% } %>

    <% if (item.type == 'scratch-discount') { %>
    <div class="container-type container-type-<%-__(item.type)%> <%-__(item.container_class) || ''%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
        <div class="type-scratch-discount <%-__(item.class)%>" style="<%-__(item.style)%>" <%- item.attributes || '' %> >
            <div class="type-scratch-discount__wrapper">
                <div class="type-scratch-discount__reveal-content">
                    <div class="type-scratch-discount__text"><%- __(item.reveal_text || '') %></div>
                </div>
                <canvas
                    id="scratch-discount-<%-contentItemIndex%>"
                    class="type-scratch-discount__canvas"
                    data-scratch-discount
                    data-scratch-image="<%- __(item.scratch_image || '') %>"
                    data-scratch-color="<%- __(item.scratch_color || '#FFD700') %>"
                    data-on-end="<%- __(item.on_end || 'next-screen') %>"
                ></canvas>
            </div>
        </div>
    </div>
    <% } %>

    <% if (item.type == 'update-subscription-button') { %>
    <div class="container-type container-type-<%-__(item.type)%> <%-__(item.container_class) || ''%> <% if (item.answers_alignment === 'bottom') { %>answers-bottom<% } %>" <%- (item.show_on_answer !== "" && item.show_on_answer >= 0) ? 'data-show-on-answer="' + item.show_on_answer + '"' : '' %> data-block-area-index="<%- contentItemIndex %>">
        <button class="type-button type-button--update-subscription <%- item.class || '' %>"
                data-update-subscription-price-id="<%- __(item.price_id) %>"
                data-update-subscription-id="<%- __(item.subscription_id) %>"
                style="<%- item.style %>" <%- __(item.attributes) || '' %>
                data-success-action="<%-item.success_action || 'next_screen'%>"
                data-success-action-url="<%-item.success_action_url || ''%>"
                data-success-message="<%-__(item.success_message || '')%>"
                data-success-message-type="<%-__(item.success_message_type || '')%>"
                data-success-message-seconds="<%-__(item.success_message_seconds || '')%>"
                data-update-failed-action="<%-item.upsell_failed_action || ''%>"
                data-update-failed-popup-id="<%-item.upsell_failed_popup_id || ''%>"
                data-update-failed-js-callback="<%-item.upsell_failed_js_callback || ''%>"
                data-update-failed-redirect-url="<%-item.upsell_failed_redirect_url || ''%>"
        >
            <span class="type-button__text"><%- __(item.label) %></span>
            <% if (item.icon) { %><span class="type-button__icon"><%- __(item.icon) %></span><% } %>
            <div class="type-button__spinner"></div>
        </button>
    </div>
    <% } %>

<% })
%>
