{%- liquid
  assign product_image_width = 64
  if on == 'card'
    assign product_image_width = 24
  endif

  assign product_groups_metaobject = metaobjects[settings.metaobject_for_product_groups]
  assign product_options_type_values_metaobject = metaobjects[settings.metaobject_for_product_options_type_values]

  # Direct reference to this product's group metaobject (Release product_groups)
  assign product_group_meta = nil
  if product.metafields.custom.product_group and product.metafields.custom.product_group.value
    assign product_group_meta = product.metafields.custom.product_group.value
  endif
-%}





<div class="product__product-groups">
  <div data-debug-container-rendered></div>

  {%- if product_group_meta -%}
    {%- assign group_metaobject = product_group_meta -%}
    <fieldset class="product__product-group product__variant-options">
      {% if on != 'card' %}
        {%- liquid
          assign type_on_card = group_metaobject.type_on_card | handleize
          assign type_on_page = group_metaobject.type_on_page | handleize

          assign custom_label = ''
          assign custom_label_on_page = false
          if group_metaobject.custom_label_on_page.value == true
            assign custom_label_on_page = true
          endif

          if custom_label_on_page
            assign product_title = product.title | downcase
            assign current_type_for_label_check = type_on_page
            if on == 'card'
              assign current_type_for_label_check = type_on_card
            endif

            if current_type_for_label_check == 'swatch'
              assign color_pattern_count = metaobjects['shopify--color-pattern'].values.count | times: 1
              paginate metaobjects['shopify--color-pattern'].values by color_pattern_count
                assign longest_match_label = ''
                for product_option_type_value in metaobjects['shopify--color-pattern'].values
                  assign product_option_type_value_text = product_option_type_value.label | strip | downcase
                  if product_title contains product_option_type_value_text
                    if product_option_type_value_text.size > longest_match_label.size
                      assign longest_match_label = product_option_type_value_text
                    endif
                  endif
                endfor
                assign custom_label = longest_match_label
              endpaginate
            else
              assign product_options_type_values_count = product_options_type_values_metaobject.values.count | times: 1
              paginate product_options_type_values_metaobject.values by product_options_type_values_count
                assign longest_match_label = ''
                for product_option_type_value in product_options_type_values_metaobject.values
                  assign product_option_type_value_text = product_option_type_value.text | default: product_option_type_value.name | strip | downcase
                  if product_title contains product_option_type_value_text
                    if product_option_type_value_text.size > longest_match_label.size
                      assign longest_match_label = product_option_type_value_text
                    endif
                  endif
                endfor
                assign custom_label = longest_match_label
              endpaginate
            endif
          endif

          if custom_label == ''
            assign custom_label_on_page = false
          endif
          -%}
          <legend class="form__label">
            {% if group_metaobject.group_by_option == 'Color' %}
              Colour:
            {% else %}
              {{ group_metaobject.group_by_option }}
            {% endif %}

            <span data-current-product>
              {%- if group_metaobject.group_by_option == 'Color' -%}
                {%- assign color_list = product.metafields.shopify['color-pattern'] -%}
                {%- if color_list and color_list.value and color_list.value.size > 0 -%}
                  {%- assign primary_color = color_list.value | first -%}
                  {{ primary_color.label }}
                {%- elsif custom_label_on_page -%}
                  {{ custom_label }}
                {%- else -%}
                  {{ product.title }}
                {%- endif -%}
              {%- else -%}
                {%- if custom_label_on_page -%}
                  {{ custom_label }}
                {%- else -%}
                  {{ product.title }}
                {%- endif -%}
              {%- endif -%}
            </span>
          </legend>

        {% endif %}

      {%- liquid
        assign current_group_type = ''
        if on == 'card'
          assign current_group_type = group_metaobject.type_on_card | handleize
        elsif on == 'page'
          assign current_group_type = group_metaobject.type_on_page | handleize
        endif
        assign group_products_count = group_metaobject.group.value.count | times: 1
      -%}

      {%- if on == 'card' -%}
        <div data-debug-on-variable="{{ on }}"></div>
        <div data-debug-group-handle="{{ group_has_this_product }}"></div>
        <div data-debug-type-on-card="{{ group_metaobject.type_on_card }}"></div>
        <div data-debug-group-value-count="{{ group_metaobject.group.value.size }}"></div>
      {%- endif -%}

      {%- paginate group_metaobject.group.value by group_products_count -%}
        {%- for group_metaobject_product in group_metaobject.group.value -%}
          {%- assign group_metaobject_product_current = '' -%}
          {%- if group_metaobject_product.id == product.id -%}
            {%- assign group_metaobject_product_current = 'active' -%}
          {%- endif -%}

            {%- liquid
              assign found_option_value_text = ''
              assign found_option_value_image = nil
              assign found_option_value_color = nil

              assign current_product_title = group_metaobject_product.title | downcase

              if current_group_type == 'swatch'
                # Use the product's Shopify color-pattern metafield (shopify.color-pattern)
                assign color_list = group_metaobject_product.metafields.shopify['color-pattern']

                if color_list and color_list.value and color_list.value.size > 0
                  # Take the first color in the list as the primary swatch
                  assign primary_color = color_list.value | first

                  assign found_option_value_text = primary_color.label | default: primary_color.name | strip | downcase

                  if primary_color.image
                    assign found_option_value_image = primary_color.image
                  elsif primary_color.color
                    assign found_option_value_color = primary_color.color
                  endif
                endif

              else
                # Original Release logic for non-swatch group types (leave as-is)
                assign product_options_type_values_count = product_options_type_values_metaobject.values.count | times: 1
                paginate product_options_type_values_metaobject.values by product_options_type_values_count
                  assign longest_match_text = ''
                  assign longest_match_image = nil
                  for product_option_type_value in product_options_type_values_metaobject.values
                    assign value_text_candidate = product_option_type_value.text | default: product_option_type_value.name | strip | downcase
                    if current_product_title contains value_text_candidate
                      if value_text_candidate.size > longest_match_text.size
                        assign longest_match_text = value_text_candidate
                        if product_option_type_value.image
                          assign longest_match_image = product_option_type_value.image
                        endif
                      endif
                    endif
                  endfor
                  assign found_option_value_text = longest_match_text
                  assign found_option_value_image = longest_match_image
                endpaginate
              endif
            -%}




            {% if current_group_type == 'image' %}
              <div
                class="product-option__label product-option__label--image{% if settings.swatches_shape == 'circle' %} product-option__label--circle{% endif %} {{ group_metaobject_product_current }}"
                {% if on == 'card' %}
                  data-swatch-image="{{ group_metaobject_product.featured_media | default: group_metaobject_product.featured_image | image_url: width: 900 }}"
                {% endif %}
              >
                <a href="{{ group_metaobject_product.url }}" class="product-option__link media product-option__swatch product-option__swatch--{{ settings.swatches_shape }} product-swatch__inner-border--{{ settings.swatches_inner_border_color }}" title="{{ group_metaobject_product.title }}">
                  {% if found_option_value_image %}
                    {% render 'image', image: found_option_value_image, width: product_image_width %}
                  {% else %}
                    {% render 'image', image: group_metaobject_product.featured_image, width: product_image_width %}
                  {% endif %}
                </a>
            </div>

          {% elsif current_group_type == 'swatch' %}
              <div
                class="product-option__label product-option__label--{{ settings.swatches_shape }} {{ group_metaobject_product_current }}"
                {% if on == 'card' %}
                  {% if group_metaobject_product.featured_media %}
                    data-swatch-image="{{ group_metaobject_product.featured_media | image_url: width: 900 }}"
                  {% elsif group_metaobject_product.featured_image %}
                    data-swatch-image="{{ group_metaobject_product.featured_image | image_url: width: 900 }}"
                  {% endif %}
                {% endif %}
              >
                <a href="{{ group_metaobject_product.url }}" class="product-option__link media product-option__swatch product-option__swatch--{{ settings.swatches_shape }}" title="{{ group_metaobject_product.title }}">
                  {% if found_option_value_image %}
                    {{ found_option_value_image | metafield_tag }}
                  {% elsif found_option_value_color %}
                    <span class="product-option__swatch-color" style="background-color: {{ found_option_value_color }}"></span>
                  {% endif %}
                </a>
            </div>

          {% elsif current_group_type == 'text' %}
            <div class="product-option__label {{ group_metaobject_product_current }}">
              <a href="{{ group_metaobject_product.url }}" class="product-option__link product-option__only-text product-option__swatch--{{ settings.swatches_shape }}" title="{{ group_metaobject_product.title }}">
                {{ found_option_value_text }}
              </a>
            </div>
          {% else %}
            <div
              class="product-option__label product-option__label--image {% if settings.swatches_shape == 'circle' %} product-option__label--circle{% endif %} {{ group_metaobject_product_current }}"
              {% if on == 'card' %}
                data-swatch-image="{{ group_metaobject_product.featured_media | default: group_metaobject_product.featured_image | image_url: width: 900 }}"
              {% endif %}
            >
              <a href="{{ group_metaobject_product.url }}" class="product-option__link media product-swatch__inner-border--{{ settings.swatches_inner_border_color }}" title="{{ group_metaobject_product.title }}">
                {% render 'image', image: group_metaobject_product.featured_image, width: product_image_width %}
              </a>
            </div>
          {% endif %}

        {%- endfor -%}
      {%- endpaginate -%}
    </fieldset>
  {%- endif -%}
</div>