{% liquid
  assign item_count = 0
  if block.settings.gift_1 != blank and block.settings.gift_1.size > 0
    assign item_count = item_count | plus: 1
  endif
  if block.settings.gift_2 != blank and block.settings.gift_2.size > 0
    assign item_count = item_count | plus: 1
  endif
  if block.settings.gift_3 != blank and block.settings.gift_3.size > 0
    assign item_count = item_count | plus: 1
  endif
  if block.settings.gift_4 != blank and block.settings.gift_4.size > 0
    assign item_count = item_count | plus: 1
  endif
%}
<div
  class="quantity-gifts-container"
  style="display: none;"
  {{ block.shopify_attributes }}
>
  <quantity-gifts
    class="quantity-gifts quantity-gifts-{{ item_count }}"
    id="quantity-gifts-{{ section.id }}"
    data-section="{{ section.id }}"
    data-main-product="{{ product.handle }}"
    style="--item-count: {{ item_count }};"
  >
    {% for i in (1..4) %}
      {% liquid
        case i
          when 1
            assign gift_products = block.settings.gift_1
            assign required_quantity = block.settings.gift_1_quantity
          when 2
            assign gift_products = block.settings.gift_2
            assign required_quantity = block.settings.gift_2_quantity
          when 3
            assign gift_products = block.settings.gift_3
            assign required_quantity = block.settings.gift_3_quantity
          when 4
            assign gift_products = block.settings.gift_4
            assign required_quantity = block.settings.gift_4_quantity
        endcase
      %}
      {% unless gift_products == blank or gift_products.size == 0 %}
        <div class="quantity-gift-group" data-quantity="{{ required_quantity }}" data-unlocked="false">
          <h3 class="quantity-gift-group__title">Gift {{ i }}</h3>
          <div class="quantity-gift-products">
            {% for gift_product in gift_products %}
              <style>
                .cart-item--product-{{ gift_product.handle }} .quantity {
                  display: none;
                }
              </style>
              <div
                class="quantity-gift quantity-gift--product-{{ gift_product.handle }}"
                data-quantity="{{ required_quantity }}"
                data-unlocked="false"
                data-product="{{ gift_product.first_available_variant.id }}"
                data-handle="{{ gift_product.handle }}"
              >
                <h4 class="quantity-gift__title">{{ gift_product.title }}</h4>
                {% assign product_form_id = 'gift-form-' | append: section.id | append: block.id | append: forloop.parentloop.index | append: '-' | append: forloop.index %}
                <product-form
                  class="hidden"
                  data-is-cart-upsell="true"
                  data-section="{{ section.id }}-{{ block.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}"
                >
                  {%- form 'product',
                  gift_product,
                  id: product_form_id,
                  class: 'form',
                  novalidate: 'novalidate',
                  data-type: 'add-to-cart-form'
                -%}
                  <input type="hidden" name="id" value="{{ gift_product.first_available_variant.id }}">
                  <input type="hidden" name="properties[_gift]" value="true">
                  <input type="hidden" name="properties[_skip_conversion]" value="true">
                  <button type="submit">+</button>
                {%- endform -%}
                </product-form>
              </div>
            {% endfor %}
          </div>
        </div>
      {% endunless %}
    {% endfor %}
  </quantity-gifts>
</div>