{%- if name == blank or product_count == 0 -%}
    {%- break -%}
{%- endif -%}

{%- assign multiplier = 100 | minus: discount | divided_by: 100.0 -%}

<div class="product-set-discounts-entry" {% if badge != blank %}style="margin-top: 15px;"{% endif %} 
    data-product-count="{{ product_count }}" 
    data-discount="{{ multiplier }}" 
    data-discount-free-product-count="{{ discount_free_products }}" 
    data-discount-product-price="{{ discount_product_price }}" 
    data-use-compare-price="{{ use_compare_at_price }}"
    data-soldout="false"
>
    <div class="product-set-discounts-entry-header">
        {% if badge != blank %}
            <div class="product-set-discounts-entry-header-badge" style="background-color: {{ badge_background_color }}; color: {{ badge_text_color }};">{{ badge }}</div>
        {% endif %}

        <div class="product-set-discounts-entry-header-radio">
            {% render 'icon-checkmark' %}
        </div>

        <div class="product-set-discounts-entry-header-name">
            <label>{{ name }}</label>
        </div>

        {%- assign price = product.selected_or_first_available_variant.price | times: product_count | times: multiplier -%}

        {% if use_compare_at_price %}
            {%- assign compare_price = product.selected_or_first_available_variant.compare_at_price | times: product_count -%}
        {% else %}
            {%- assign compare_price = product.selected_or_first_available_variant.price | times: product_count -%}
        {% endif %}

        {% if price == compare_price %}
            {% render 'price', price: price %}
        {% else %}
            {% render 'price', price: price, force_compare_price: compare_price %}
        {% endif %}
    </div>
    <div class="product-set-discounts-entry-content {% if product.has_only_default_variant %} hide{% endif %}">
        {% assign range = (1..product_count) %}
        {% for i in range %}
            <div class="product-set-discounts-entry-content-product {% unless show_number %} product-set-discounts-entry-content-product-hide-number{% endunless %} {% unless show_image %} product-set-discounts-entry-content-product-hide-image{% endunless %}">
                <div class="product-set-discounts-entry-content-product-number font-heading">#{{ i }}</div>
                
                <img src="{{ product.featured_media | img_url: 'x80' }}" />

                <div class="product-set-discounts-entry-content-product-body">
                    {%- assign multiplier = 100 | minus: discount | divided_by: 100.0 -%}
                    {%- assign price = product.selected_or_first_available_variant.price | times: multiplier -%}
                    {%- assign compare_price = product.selected_or_first_available_variant.price -%}

                    {% comment %} Handle free product display. {% endcomment %}
                    {%- assign non_free_product_count = product_count | minus: discount_free_products -%}
                    {% if forloop.index > non_free_product_count %}
                        <h4><span {% if free_product_color != blank %}style="color: {{ free_product_color }};"{% endif %}>{{ 'product.set_free_product' | t }}</span> {% render 'price', price: price, force_compare_price: compare_price, hide: true %}</h4>
                    {% else %} 
                        <h4>{% render 'price', price: price, force_compare_price: compare_price %}</h4>
                    {% endif %}

                    <div class="product-set-discounts-entry-content-product-body-select">
                        {%- for option in product.options_with_values -%}
                            <select name="{{ option.name | escape }}">
                                {%- for value in option.values -%}
                                    <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
                                        {{ value }}
                                    </option>
                                {%- endfor -%}
                            </select>
                        {%- endfor -%}
                    </div>

                    <div class="product-set-discounts-entry-content-product-body-out-of-stock">
                        <span></span>
                        <div>{{ 'product.cart_button_sold_out' | t }}</div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>