{%- if section.settings.use_demo_products and collections['all'].products.size > 0 -%}
    {%- if collections['all'].products.size == 1 -%}
        {%- assign product_1 = collections['all'].products[0] -%}
        {%- assign product_2 = collections['all'].products[0] -%}
    {%- else -%}
        {% for theproduct in collections['all'].products %}
            {%- if forloop.first -%}
                {%- assign product_1 = theproduct -%}
            {%- else -%}
                {%- assign product_2 = theproduct -%}
                {%- break -%}
            {%- endif -%}
        {% endfor %}
    {%- endif -%}
{%- endif -%}

{%- if section.settings.product_1 != blank -%}
    {%- assign product_1 = all_products[section.settings.product_1] -%}
{%- endif -%}
{%- if section.settings.product_2 != blank -%}
    {%- assign product_2 = all_products[section.settings.product_2] -%}
{%- endif -%}

{%- if section.settings.product_1_use_current -%}
    {%- assign product_1 = product -%}
{%- endif -%}

{%- if section.settings.product_2_metafield != blank -%}
    {% assign metafield_brackets = section.settings.product_2_metafield | split: "." %}
    {% assign metafield_brackets_size = metafield_brackets | size %}

    {% if metafield_brackets_size < 2 %}
        {% assign product_2 = product.metafields[metafield_brackets[0]] %}
    {% else if metafield_brackets_size == 2 %}
        {% assign product_2 = product.metafields[metafield_brackets[0]][metafield_brackets[1]] %}
    {% endif %}

    {%- if product_2 != blank -%}
        {%- assign product_2 = all_products[product_2] -%}
    {%- endif -%}
{%- endif -%}

{%- if product_1 != blank and product_2 != blank -%}
<div class="container bundle" {% render 'overwrite-theme-style', settings: section.settings %}>
    
    {%- if section.settings.heading != blank -%}
        <h2 class="bundle-heading">{{ section.settings.heading }}</h2>
    {%- endif -%}

    <div class="bundle-content">
        {%- if product_1 != blank -%}
            <script>
                var cr_bundle_product_1 = {{ product_1 | json }};
                var cr_bundle_product_1_variantStock = {};

                {% for variant in product_1.variants %}
                    {% if variant.inventory_management == 'shopify' and variant.inventory_policy == 'deny' %}
                        cr_bundle_product_1_variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity | at_least: 0 }};
                    {% endif %}
                {% endfor %}
            </script>

            <div class="bundle-product" style="width: {{ section.settings.desktop_product_width }}%;">
                <div class="bundle-product-image" style="background-color: {{ section.settings.card_background_color }};">
                    {% render 'image', image: product_1.featured_media %}
                </div>

                <div class="bundle-product-data">
                    <h4><a href="{{ product_1.url }}">{{ product_1.title }}</a></h4>

                    <div class="bundle-product-variants">
                        {%- unless product_1.has_only_default_variant -%}
                        {%- for option in product_1.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 -%}
                        {%- endunless -%}
                    </div>

                    {% render 'price', product: product_1, use_variant: true, show_compare_price: true %}

                    <div class="bundle-product-available in-stock">
                        <span></span>
                        <div class="in-stock">{{ 'sections.bundle.in_stock' | t }}</div>
                        <div class="out-of-stock">{{ 'product.cart_button_sold_out' | t }}</div>
                    </div>
                </div>
            </div>
        {%- endif -%}

        <div class="bundle-product-plus h2">+</div>

        {%- if product_2 != blank -%}
            <script>
                var cr_bundle_product_2 = {{ product_2 | json }};
                var cr_bundle_product_2_variantStock = {};

                {% for variant in product_2.variants %}
                    {% if variant.inventory_management == 'shopify' and variant.inventory_policy == 'deny' %}
                        cr_bundle_product_2_variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity | at_least: 0 }};
                    {% endif %}
                {% endfor %}
            </script>

            <div class="bundle-product" style="width: {{ section.settings.desktop_product_width }}%;">
                <div class="bundle-product-image" style="background-color: {{ section.settings.card_background_color }};">
                    {% render 'image', image: product_2.featured_media %}
                </div>

                <div class="bundle-product-data">
                    <h4><a href="{{ product_2.url }}">{{ product_2.title }}</a></h4>

                    <div class="bundle-product-variants">
                        {%- unless product_2.has_only_default_variant -%}
                        {%- for option in product_2.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 -%}
                        {%- endunless -%}
                    </div>

                    {% render 'price', product: product_2, use_variant: true, show_compare_price: true %}

                    <div class="bundle-product-available in-stock">
                        <span></span>
                        <div class="in-stock">{{ 'sections.bundle.in_stock' | t }}</div>
                        <div class="out-of-stock">{{ 'product.cart_button_sold_out' | t }}</div>
                    </div>
                </div>
            </div>
        {%- endif -%}

        <div class="bundle-add-to-cart" data-discount-type="{{ section.settings.discount_type }}" data-discount-value="{{ section.settings.discount_value }}">
            <div class="bundle-add-to-cart-content">
                <label class="font-heading">{{ 'sections.bundle.total' | t }}</label>
                <label class="long font-heading">{{ 'sections.bundle.total_long' | t }}</label>

                <div class="bundle-add-to-cart-price">
                    <h4>{% render 'price', product: product_2 %}</h4>

                    <div class="bundle-add-to-cart-price-saved {% if section.settings.show_badge == false %} hide{% endif %}">
                        {% render 'icon-tag' %} {{ 'product.price_saving' | t }}&nbsp;
                        
                        <span>10%</span>
                    </div>
                </div>
            </div>

            <button class="btn" data-available-text="{{ 'product.cart_button' | t }}" data-sold-out-text="{{ 'product.cart_button_sold_out' | t }}">{{ 'product.cart_button' | t }}</button>
        </div>
    </div>

</div>
{%- endif -%}

{% comment %} ===== Section Help Video ===== {% endcomment %}
{%- if request.design_mode -%}
    <div 
        class="section-help-video-identifier" 
        data-title="{{ 'conrise.sectionHelpTitles.bundle' | t }}", 
        data-video="c49e33bba86843e49f8e73a9adcd0c3e?sid=f48298f7-74b5-44dd-9f0e-8c7523e52883"
        data-padding-bottom="55.95854922279793%"
    ></div>
{%- endif -%}
{% comment %} ===== Section Help Video ===== {% endcomment %}

{% schema %}
{
    "name": "t:sections.section-bundle.name",
    "settings": [
        {
            "type": "header",
            "content": "t:settings.general.section_help_video",
            "info": "[Video](https://www.loom.com/share/c49e33bba86843e49f8e73a9adcd0c3e?sid=f48298f7-74b5-44dd-9f0e-8c7523e52883)"
        },
        {
            "type": "header",
            "content": "t:sections.section-bundle.settings.info",
            "info": "t:sections.section-bundle.settings.info_info"
        },
        {
            "type": "text",
            "id": "heading",
            "label": "t:sections.section-bundle.settings.heading"
        },
        {
            "type": "header",
            "content": "t:sections.section-bundle.settings.header_products"
        },
        {
            "type": "checkbox",
            "id": "use_demo_products",
            "default": false,
            "label": "t:sections.section-bundle.settings.use_demo_products",
            "info": "t:sections.section-bundle.settings.use_demo_products_info"
        },
        {
            "type": "product",
            "id": "product_1",
            "label": "t:sections.section-bundle.settings.product_1"
        },
        {
            "type": "checkbox",
            "id": "product_1_use_current",
            "default": false,
            "label": "t:sections.section-bundle.settings.product_1_use_current"
        },
        {
            "type": "product",
            "id": "product_2",
            "label": "t:sections.section-bundle.settings.product_2"
        },
        {
            "type": "text",
            "id": "product_2_metafield",
            "label": "t:sections.section-bundle.settings.product_2_metafield",
            "info": "t:sections.section-bundle.settings.product_2_metafield_info"
        },
        {
            "type": "select",
            "id": "discount_type",
            "default": "percentage",
            "label": "t:sections.section-bundle.settings.discount_type",
            "options": [
                {
                    "value": "percentage",
                    "label": "t:sections.section-bundle.settings.discount_type_percentage"
                },
                {
                    "value": "value",
                    "label": "t:sections.section-bundle.settings.discount_type_value"
                }
            ]
        },
        {
            "type": "number",
            "id": "discount_value",
            "label": "t:sections.section-bundle.settings.discount_value",
            "info": "t:sections.section-bundle.settings.discount_value_info"
        },
        {
            "type": "header",
            "content": "t:sections.section-bundle.settings.header_settings"
        },
        {
            "type": "color",
            "id": "card_background_color",
            "label": "t:sections.section-bundle.settings.card_background_color",
            "default": "#d9d9d9"
        },
        {
            "type": "checkbox",
            "id": "show_badge",
            "default": true,
            "label": "t:sections.section-bundle.settings.show_badge"
        },
        {
            "type": "range",
            "id": "desktop_product_width",
            "label": "t:sections.section-bundle.settings.desktop_product_width",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "%",
            "default": 32
        },
        {
            "type": "header",
            "content": "t:sections.general.margin"
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_top",
            "label": "t:sections.section-bundle.settings.overwrite_theme_margin_top",
            "min": -50,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_bottom",
            "label": "t:sections.section-bundle.settings.overwrite_theme_margin_bottom",
            "min": -50,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "header",
            "content": "Padding"
        },
        {
            "type": "range",
            "id": "overwrite_theme_padding_top",
            "label": "Top",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "range",
            "id": "overwrite_theme_padding_bottom",
            "label": "Bottom",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "color",
            "id": "overwrite_theme_background_color",
            "label": "t:sections.section-image-with-text.settings.overwrite_theme_background_color",
            "info": "t:sections.section-image-with-text.settings.overwrite_theme_background_color_info"
        }
    ],
    "presets": [
        {
            "name": "t:sections.section-bundle.name"
        }
    ]
}
{% endschema %}