{% liquid
  assign max_items = section.settings.max_products
  if section.settings.background_color != blank
    render 'contrast-override', background_color: section.settings.background_color, section_id: section.id
  endif
%}

<div
  class="section-background{% if section.settings.background_color != blank %} color-custom-{{ section.id }}{% endif %}"
></div>
<div
  data-testid="product-list"
  class="
    section
    section--{{ section.settings.section_width }}
    {% if section.settings.background_color != blank %}color-custom-{{ section.id }}{% endif %}
    section-resource-list
    spacing-style
    gap-style
  "
  style="
    {% render 'spacing-style', settings: section.settings %}
    {% render 'gap-style', value: section.settings.gap %}
  "
>
  <div class="section-resource-list__header">
    {%- content_for 'block', type: '_product-list-content', id: 'static-header' -%}
  </div>

  {% capture list_items %}
    {% if section.settings.collection != blank and shop.products_count != 0 %}
      {% paginate section.settings.collection.products by max_items %}
        {% for product in section.settings.collection.products limit: max_items %}
        <div
          class="resource-list__item"
        >
            {% content_for 'block',
              type: '_product-card',
              id: 'static-product-card',
              closest.product: product,
              product_view_context: 'collection'
            %}
          </div>

          {% unless forloop.last %}
            <!--@list/split-->
          {% endunless %}
        {% endfor %}
      {% endpaginate %}
    {% else %}
      {% for i in (1..max_items) %}
        <div
          class="resource-list__item"
        >
            {% content_for 'block', type: '_product-card', id: 'static-product-card', closest.product: null %}
        </div>

        {% unless forloop.last %}
          <!--@list/split-->
        {% endunless %}
      {% endfor %}
    {% endif %}
  {% endcapture %}

  {% liquid
    # Create an array from the list items to be used for different layout types
    assign list_items_array = list_items | strip | split: '<!--@list/split-->'
  %}

  {% render 'resource-list',
    list_items: list_items,
    list_items_array: list_items_array,
    settings: section.settings,
    slide_count: max_items,
    content_type: 'products',
    test_id: 'resource-list-grid'
  %}

  <div
    class="section-resource-list__content"
    style="--horizontal-alignment: {{ section.settings.horizontal_alignment }};"
  >
    {%- content_for 'blocks' -%}
  </div>
</div>

{% schema %}
{
  "name": "t:names.product_list",
  "class": "ui-test-product-list",
  "blocks": [
    {
      "type": "@theme"
    },
    {
      "type": "@app"
    },
    {
      "type": "_divider"
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "t:settings.collection"
    },
    {
      "type": "select",
      "id": "layout_type",
      "label": "t:settings.layout_type",
      "options": [
        {
          "value": "grid",
          "label": "t:options.grid"
        },
        {
          "value": "carousel",
          "label": "t:options.carousel"
        },
        {
          "value": "editorial",
          "label": "t:options.editorial"
        }
      ],
      "default": "grid"
    },
    {
      "type": "checkbox",
      "id": "carousel_on_mobile",
      "label": "t:settings.carousel_on_mobile",
      "default": false,
      "visible_if": "{{ section.settings.layout_type != 'carousel' }}"
    },
    {
      "type": "range",
      "id": "max_products",
      "label": "t:settings.product_count",
      "min": 1,
      "max": 16,
      "step": 1,
      "default": 4
    },
    {
      "type": "range",
      "id": "columns",
      "label": "t:settings.columns",
      "min": 1,
      "max": 8,
      "step": 1,
      "default": 4,
      "visible_if": "{{ section.settings.layout_type != 'editorial' }}"
    },
    {
      "type": "select",
      "id": "mobile_columns",
      "label": "t:settings.mobile_columns",
      "options": [
        {
          "value": "1",
          "label": "t:options.one_number"
        },
        {
          "value": "2",
          "label": "t:options.two_number"
        }
      ],
      "default": "2",
      "visible_if": "{{ section.settings.layout_type == 'grid' and section.settings.carousel_on_mobile == false }}"
    },
    {
      "type": "select",
      "id": "mobile_card_size",
      "label": "t:settings.mobile_columns",
      "options": [
        {
          "value": "60cqw",
          "label": "t:options.one_number"
        },
        {
          "value": "44cqw",
          "label": "t:options.two_number"
        }
      ],
      "default": "60cqw",
      "visible_if": "{{ section.settings.layout_type == 'carousel' or section.settings.carousel_on_mobile == true }}"
    },
    {
      "type": "range",
      "id": "columns_gap",
      "label": "t:settings.horizontal_gap",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 8,
      "visible_if": "{{ section.settings.layout_type == 'grid' or section.settings.layout_type == 'carousel' }}"
    },
    {
      "type": "range",
      "id": "rows_gap",
      "label": "t:settings.vertical_gap",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 8,
      "visible_if": "{{ section.settings.layout_type == 'grid'}}"
    },
    {
      "type": "header",
      "content": "t:content.carousel_navigation",
      "visible_if": "{{ section.settings.layout_type == 'carousel' or section.settings.carousel_on_mobile == true }}"
    },
    {
      "type": "select",
      "id": "icons_style",
      "label": "t:settings.icon",
      "options": [
        {
          "value": "arrow",
          "label": "t:options.arrows"
        },
        {
          "value": "chevron",
          "label": "t:options.chevrons"
        },
        {
          "value": "arrows_large",
          "label": "t:options.arrows_large"
        },
        {
          "value": "chevron_large",
          "label": "t:options.chevron_large"
        },
        {
          "value": "none",
          "label": "t:options.none"
        }
      ],
      "default": "arrow",
      "visible_if": "{{ section.settings.layout_type == 'carousel' or section.settings.carousel_on_mobile == true }}"
    },
    {
      "type": "select",
      "id": "icons_shape",
      "label": "t:settings.icon_background",
      "options": [
        {
          "value": "none",
          "label": "t:options.none"
        },
        {
          "value": "circle",
          "label": "t:options.circle"
        },
        {
          "value": "square",
          "label": "t:options.square"
        }
      ],
      "default": "none",
      "visible_if": "{{ section.settings.icons_style != 'none' and section.settings.layout_type == 'carousel' or section.settings.carousel_on_mobile == true }}"
    },
    {
      "type": "header",
      "content": "t:content.section_layout"
    },
    {
      "type": "select",
      "id": "section_width",
      "label": "t:settings.width",
      "options": [
        {
          "value": "page-width",
          "label": "t:options.page"
        },
        {
          "value": "full-width",
          "label": "t:options.full"
        }
      ],
      "default": "page-width"
    },
    {
      "type": "select",
      "id": "horizontal_alignment",
      "label": "t:settings.alignment",
      "options": [
        {
          "value": "flex-start",
          "label": "t:options.direction_start"
        },
        {
          "value": "center",
          "label": "t:options.direction_center"
        },
        {
          "value": "flex-end",
          "label": "t:options.direction_end"
        }
      ],
      "default": "flex-start"
    },
    {
      "type": "range",
      "id": "gap",
      "label": "t:settings.gap",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 12
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:settings.background_color",
      "placeholder": "t:settings.default"
    },
    {
      "type": "header",
      "content": "t:content.padding"
    },
    {
      "type": "range",
      "id": "padding-block-start",
      "label": "t:settings.top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "t:settings.bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    }
  ],
  "presets": [
    {
      "name": "t:names.products_grid",
      "category": "t:categories.products",
      "settings": {
        "collection": "",
        "max_products": 8,
        "layout_type": "grid",
        "carousel_on_mobile": false,
        "columns": 4,
        "mobile_columns": "2",
        "columns_gap": 8,
        "rows_gap": 24,
        "icons_style": "arrow",
        "icons_shape": "none",
        "section_width": "page-width",
        "gap": 28,
        "padding-block-start": 48,
        "padding-block-end": 48
      },
      "blocks": {
        "static-header": {
          "type": "_product-list-content",
          "name": "t:names.header",
          "static": true,
          "settings": {
            "content_direction": "row",
            "vertical_on_mobile": false,
            "horizontal_alignment": "space-between",
            "vertical_alignment": "flex-end",
            "align_baseline": true,
            "horizontal_alignment_flex_direction_column": "flex-start",
            "vertical_alignment_flex_direction_column": "center",
            "gap": 12,
            "width": "fill",
            "custom_width": 100,
            "width_mobile": "fill",
            "custom_width_mobile": 100,
            "height": "fit",
            "custom_height": 100,
            "background_media": "none",
            "video_position": "cover",
            "background_image_position": "cover",
            "border": "none",
            "border_width": 1,
            "border_opacity": 100,
            "border_radius": 0,
            "padding-block-start": 0,
            "padding-block-end": 0,
            "padding-inline-start": 0,
            "padding-inline-end": 0
          },
          "blocks": {
            "product_list_text": {
              "type": "_product-list-text",
              "name": "t:names.collection_title",
              "settings": {
                "text": "<h3>{{ closest.collection.title }}</h3>",
                "type_preset": "rte",
                "font": "var(--font-body--family)",
                "font_size": "",
                "line_height": "normal",
                "letter_spacing": "normal",
                "case": "none",
                "wrap": "pretty",
                "width": "fit-content",
                "max_width": "normal",
                "alignment": "left",
                "padding-block-start": 0,
                "padding-block-end": 0,
                "padding-inline-start": 0,
                "padding-inline-end": 0
              }
            },
            "product_list_button": {
              "type": "_product-list-button",
              "name": "t:names.product_list_button",
              "settings": {
                "label": "t:text_defaults.view_all_button_label",
                "open_in_new_tab": false,
                "style_class": "button-unstyled",
                "width": "fit-content",
                "custom_width": 100,
                "width_mobile": "fit-content",
                "custom_width_mobile": 100
              }
            }
          },
          "block_order": ["product_list_text", "product_list_button"]
        },
        "static-product-card": {
          "type": "_product-card",
          "name": "t:names.product_card",
          "static": true,
          "settings": {
            "product_card_gap": 4,
            "border": "none",
            "border_width": 1,
            "border_opacity": 100,
            "border_radius": 0,
            "padding-block-start": 0,
            "padding-block-end": 0,
            "padding-inline-start": 0,
            "padding-inline-end": 0
          },
          "blocks": {
            "product-card-gallery": {
              "type": "_product-card-gallery",
              "name": "t:names.product_card_media",
              "settings": {
                "image_ratio": "adapt",
                "border": "none",
                "border_width": 1,
                "border_opacity": 100,
                "border_radius": 0,
                "padding-block-start": 0,
                "padding-block-end": 0,
                "padding-inline-start": 0,
                "padding-inline-end": 0
              }
            },
            "product_title": {
              "type": "product-title",
              "name": "t:names.product_title",
              "settings": {
                "width": "fit-content",
                "max_width": "normal",
                "alignment": "left",
                "type_preset": "paragraph",
                "font": "var(--font-body--family)",
                "font_size": "1rem",
                "line_height": "normal",
                "letter_spacing": "normal",
                "case": "none",
                "wrap": "pretty",
                "background": false,
                "background_color": "#00000026",
                "corner_radius": 0,
                "padding-block-start": 4,
                "padding-block-end": 0,
                "padding-inline-start": 0,
                "padding-inline-end": 0
              }
            },
            "price": {
              "type": "price",
              "name": "t:names.product_price",
              "settings": {
                "show_sale_price_first": true,
                "show_installments": false,
                "show_tax_info": false,
                "type_preset": "h6",
                "width": "100%",
                "alignment": "left",
                "font": "var(--font-body--family)",
                "font_size": "1rem",
                "line_height": "normal",
                "letter_spacing": "normal",
                "case": "none",
                "padding-block-start": 0,
                "padding-block-end": 0,
                "padding-inline-start": 0,
                "padding-inline-end": 0
              }
            }
          },
          "block_order": ["product-card-gallery", "product_title", "price"]
        }
      },
      "block_order": []
    },
    {
      "name": "t:names.products_carousel",
      "category": "t:categories.products",
      "settings": {
        "collection": "",
        "max_products": 6,
        "layout_type": "carousel",
        "carousel_on_mobile": false,
        "columns": 4,
        "mobile_columns": "2",
        "columns_gap": 8,
        "rows_gap": 24,
        "icons_style": "arrow",
        "icons_shape": "circle",
        "section_width": "page-width",
        "gap": 28,
        "padding-block-start": 48,
        "padding-block-end": 48
      },
      "blocks": {
        "static-header": {
          "type": "_product-list-content",
          "name": "t:names.header",
          "static": true,
          "settings": {
            "content_direction": "row",
            "vertical_on_mobile": false,
            "horizontal_alignment": "space-between",
            "vertical_alignment": "flex-end",
            "align_baseline": true,
            "horizontal_alignment_flex_direction_column": "flex-start",
            "vertical_alignment_flex_direction_column": "center",
            "gap": 12,
            "width": "fill",
            "custom_width": 100,
            "width_mobile": "fill",
            "custom_width_mobile": 100,
            "height": "fit",
            "custom_height": 100,
            "background_media": "none",
            "video_position": "cover",
            "background_image_position": "cover",
            "border": "none",
            "border_width": 1,
            "border_opacity": 100,
            "border_radius": 0,
            "padding-block-start": 0,
            "padding-block-end": 0,
            "padding-inline-start": 0,
            "padding-inline-end": 0
          },
          "blocks": {
            "product_list_text": {
              "type": "_product-list-text",
              "name": "t:names.collection_title",
              "settings": {
                "text": "<h2>{{ closest.collection.title }}</h2>",
                "type_preset": "h3",
                "font": "var(--font-body--family)",
                "font_size": "",
                "line_height": "normal",
                "letter_spacing": "normal",
                "case": "none",
                "wrap": "pretty",
                "width": "fit-content",
                "max_width": "normal",
                "alignment": "left",
                "padding-block-start": 0,
                "padding-block-end": 0,
                "padding-inline-start": 0,
                "padding-inline-end": 0
              }
            },
            "product_list_button": {
              "type": "_product-list-button",
              "name": "t:names.product_list_button",
              "settings": {
                "label": "t:text_defaults.view_all_button_label",
                "open_in_new_tab": false,
                "style_class": "button-unstyled",
                "width": "fit-content",
                "custom_width": 100,
                "width_mobile": "fit-content",
                "custom_width_mobile": 100
              }
            }
          },
          "block_order": ["product_list_text", "product_list_button"]
        },
        "static-product-card": {
          "type": "_product-card",
          "name": "t:names.product_card",
          "static": true,
          "settings": {
            "product_card_gap": 4,
            "border": "none",
            "border_width": 1,
            "border_opacity": 100,
            "border_radius": 0,
            "padding-block-start": 0,
            "padding-block-end": 0,
            "padding-inline-start": 0,
            "padding-inline-end": 0
          },
          "blocks": {
            "product-card-gallery": {
              "type": "_product-card-gallery",
              "name": "t:names.product_card_media",
              "settings": {
                "image_ratio": "adapt",
                "border": "none",
                "border_width": 1,
                "border_opacity": 100,
                "border_radius": 0,
                "padding-block-start": 0,
                "padding-block-end": 0,
                "padding-inline-start": 0,
                "padding-inline-end": 0
              }
            },
            "product_title": {
              "type": "product-title",
              "name": "t:names.product_title",
              "settings": {
                "width": "fit-content",
                "max_width": "normal",
                "alignment": "left",
                "type_preset": "paragraph",
                "font": "var(--font-body--family)",
                "font_size": "1rem",
                "line_height": "normal",
                "letter_spacing": "normal",
                "case": "none",
                "wrap": "pretty",
                "background": false,
                "background_color": "#00000026",
                "corner_radius": 0,
                "padding-block-start": 4,
                "padding-block-end": 0,
                "padding-inline-start": 0,
                "padding-inline-end": 0
              }
            },
            "price": {
              "type": "price",
              "name": "t:names.product_price",
              "settings": {
                "show_sale_price_first": true,
                "show_installments": false,
                "show_tax_info": false,
                "type_preset": "h6",
                "width": "100%",
                "alignment": "left",
                "font": "var(--font-body--family)",
                "font_size": "1rem",
                "line_height": "normal",
                "letter_spacing": "normal",
                "case": "none",
                "padding-block-start": 0,
                "padding-block-end": 0,
                "padding-inline-start": 0,
                "padding-inline-end": 0
              }
            }
          },
          "block_order": ["product-card-gallery", "product_title", "price"]
        }
      },
      "block_order": []
    },
    {
      "name": "t:names.products_editorial",
      "category": "t:categories.products",
      "settings": {
        "collection": "",
        "layout_type": "editorial",
        "carousel_on_mobile": false,
        "max_products": 4,
        "columns": 4,
        "mobile_columns": "2",
        "columns_gap": 8,
        "rows_gap": 24,
        "icons_style": "arrow",
        "icons_shape": "none",
        "section_width": "page-width",
        "horizontal_alignment": "flex-start",
        "gap": 64,
        "padding-block-start": 48,
        "padding-block-end": 48
      },
      "blocks": {
        "static-header": {
          "type": "_product-list-content",
          "name": "t:names.header",
          "static": true,
          "settings": {
            "content_direction": "row",
            "vertical_on_mobile": false,
            "horizontal_alignment": "space-between",
            "vertical_alignment": "flex-end",
            "align_baseline": true,
            "horizontal_alignment_flex_direction_column": "flex-start",
            "vertical_alignment_flex_direction_column": "center",
            "gap": 12,
            "width": "fill",
            "custom_width": 100,
            "width_mobile": "fill",
            "custom_width_mobile": 100,
            "height": "fit",
            "custom_height": 100,
            "background_media": "none",
            "video_position": "cover",
            "background_image_position": "cover",
            "border": "none",
            "border_width": 1,
            "border_opacity": 100,
            "border_radius": 0,
            "padding-block-start": 0,
            "padding-block-end": 0,
            "padding-inline-start": 0,
            "padding-inline-end": 0
          },
          "blocks": {
            "product_list_text": {
              "type": "_product-list-text",
              "name": "t:names.collection_title",
              "settings": {
                "text": "<h3>{{ closest.collection.title }}</h3>",
                "width": "fit-content",
                "max_width": "normal",
                "alignment": "left",
                "type_preset": "rte",
                "font": "var(--font-body--family)",
                "font_size": "",
                "line_height": "normal",
                "letter_spacing": "normal",
                "case": "none",
                "wrap": "pretty",
                "padding-block-start": 0,
                "padding-block-end": 0,
                "padding-inline-start": 0,
                "padding-inline-end": 0
              }
            },
            "product_list_button": {
              "type": "_product-list-button",
              "name": "t:names.product_list_button",
              "settings": {
                "label": "t:text_defaults.view_all_button_label",
                "open_in_new_tab": false,
                "style_class": "button-unstyled",
                "width": "fit-content",
                "custom_width": 100,
                "width_mobile": "fit-content",
                "custom_width_mobile": 100
              }
            }
          },
          "block_order": ["product_list_text", "product_list_button"]
        },
        "static-product-card": {
          "type": "_product-card",
          "name": "t:names.product_card",
          "static": true,
          "settings": {
            "product_card_gap": 4,
            "border": "none",
            "border_width": 1,
            "border_opacity": 100,
            "border_radius": 0,
            "padding-block-start": 0,
            "padding-block-end": 0,
            "padding-inline-start": 0,
            "padding-inline-end": 0
          },
          "blocks": {
            "product-card-gallery": {
              "type": "_product-card-gallery",
              "name": "t:names.product_card_media",
              "settings": {
                "image_ratio": "adapt",
                "border": "none",
                "border_width": 1,
                "border_opacity": 100,
                "border_radius": 0,
                "padding-block-start": 0,
                "padding-block-end": 0,
                "padding-inline-start": 0,
                "padding-inline-end": 0
              }
            },
            "product_title": {
              "type": "product-title",
              "name": "t:names.product_title",
              "settings": {
                "width": "fit-content",
                "max_width": "normal",
                "alignment": "left",
                "type_preset": "paragraph",
                "font": "var(--font-body--family)",
                "font_size": "1rem",
                "line_height": "normal",
                "letter_spacing": "normal",
                "case": "none",
                "wrap": "pretty",
                "background": false,
                "background_color": "#00000026",
                "corner_radius": 0,
                "padding-block-start": 4,
                "padding-block-end": 0,
                "padding-inline-start": 0,
                "padding-inline-end": 0
              }
            },
            "price": {
              "type": "price",
              "name": "t:names.product_price",
              "settings": {
                "show_sale_price_first": true,
                "show_installments": false,
                "show_tax_info": false,
                "type_preset": "h6",
                "width": "100%",
                "alignment": "left",
                "font": "var(--font-body--family)",
                "font_size": "1rem",
                "line_height": "normal",
                "letter_spacing": "normal",
                "case": "none",
                "padding-block-start": 0,
                "padding-block-end": 0,
                "padding-inline-start": 0,
                "padding-inline-end": 0
              }
            }
          },
          "block_order": ["product-card-gallery", "product_title", "price"]
        }
      },
      "block_order": []
    }
  ]
}
{% endschema %}