<!-- recently-products.liquid -->

{%- liquid
  assign current_width = settings.page_width | append: 'px'
  assign current_width_tb = '100vw'
  assign current_width_mb = '100vw'
  assign space_item = "30px"
  assign space_item_tb = "15px"
  assign space_item_mb = "15px" 

  if section.settings.section_fullwidth
    if section.settings.boxed_fullwidth
      assign current_width = '100vw - 80px'
      assign current_width_tb = '100vw - 40px'
      assign current_width_mb = '100vw - 10px'
    else
      assign current_width = '100vw'
    endif
  endif

  assign color_list = 'products.theme_settings.color' | t | downcase | strip | replace: ' ,', ',' | replace: ', ', ',' | split: ',' | uniq
  assign size_list = 'products.theme_settings.size' | t | downcase | strip | replace: ' ,', ',' | replace: ', ', ',' | split: ',' | uniq 
-%}
{%- capture sizes -%}
  (min-width: 1150px) calc(({{ current_width }} -  ({{ space_item }} * ( {{ section.settings.col_dk }} - 1 ))) * 1 / {{ section.settings.col_dk }}),(min-width: 768px) calc( ({{ current_width_tb }} - ({{ space_item_tb }} * ( {{ section.settings.col_tb }} - 1 ))) * 1 / {{ section.settings.col_tb }}), calc( ({{ current_width_mb }} - ({{ space_item_mb }} * ( {{ section.settings.col_mb }} - 1 ) )) * 1 / {{ section.settings.col_mb }})
{%- endcapture -%}
<div id="{{ section.id }}" class="hdt-s-gradient hdt-section-spacing" color-scheme="{{ section.settings.color_scheme }}">
  <product-recently class="recently-products" data-url="{{ routes.search_url }}?section_id={{ section.id }}&q=%20NOT%20id:{{ product.id }}&limit={{ section.settings.limit }}&type=product" data-id="{{product.id}}">
    {%- if search.terms and search.results_count > 0 -%}
      <div class="hdt-container{%- if section.settings.full_width -%}-full{% endif %}">
        {%- render 'section-top-head' -%}
        <hdt-slider id="Slider-{{ section.id }}" class="hdt-collection-products hdt-slider__products hdt-collection-has-pr{{ section.settings.product_des }} hdt-slider hdt-slider-parent hdt-slide-spacing-x hdt-relative {% if section.settings.navUI %}hdt-slider-has-nav hdt-nav-btns-{{ section.settings.nav_des }} hdt-nav-shape_{{ section.settings.nav_shape }} hdt-nav-{{ section.settings.nav_pos }} hdt-nav-{{ section.settings.nav_size }} hdt-slider-btn-vi-{{ section.settings.btn_vi }}{% endif %} {% if section.settings.dotUI %} hdt-slider-has-dots-dk{% endif %} hdt-slider__dots_outline hdt-ratio--{{ section.settings.image_ratio }} {% unless section.settings.image_size %} hdt-ratio--contain{% endunless %} lg:hdt-slides-{{ section.settings.col_dk }} md:hdt-slides-{{ section.settings.col_tb }} hdt-slides-{{ section.settings.col_mb }}" config='{ "dotUI": true, "navUI": {{ section.settings.navUI }}, "navUICenter":true }'>
          <div class="hdt-slider__viewport hdt-relative">
            <div class="hdt-slider__container">
              {%- liquid
                case section.settings.product_des
                  when '2'
                    capture btn_wishlist_code
                      if settings.wishlist_mode != '0'
                        render 'btn-wishlist', class: 'hdt-card-product__btn-wishlist hdt-pr_btn', placement: 'right'
                      endif
                    endcapture
                    for product in search.results limit: section.settings.limit 
                      unless settings.remove_collection_url
                        assign product_url = product.url | within: section.settings.collection
                      endunless
                      render 'card-product2', card_product: product, class: "hdt-slider__slide hdt-pr-style2", section_id: section.id, sizes: sizes, image_ratio: section.settings.image_ratio, color_list: color_list, size_list: size_list, product_url: product_url, btn_wishlist_code: btn_wishlist_code, show_vendor: section.settings.show_vendor
                    endfor
                  when '3'
                    capture btn_wishlist_code
                      if settings.wishlist_mode != '0'
                        render 'btn-wishlist', class: 'hdt-card-product__btn-wishlist hdt-pr_btn', placement: 'left'
                      endif
                    endcapture
                    for product in search.results limit: section.settings.limit
                      unless settings.remove_collection_url
                        assign product_url = product.url | within: section.settings.collection
                      endunless
                      render 'card-product3', card_product: product, class: "hdt-slider__slide hdt-pr-style3", section_id: section.id, sizes: sizes, image_ratio: section.settings.image_ratio, color_list: color_list, size_list: size_list, product_url: product_url, btn_wishlist_code: btn_wishlist_code, show_vendor: section.settings.show_vendor
                    endfor
                  when '4'
                    capture btn_wishlist_code
                      if settings.wishlist_mode != '0'
                        render 'btn-wishlist', class: 'hdt-card-product__btn-wishlist hdt-pr_btn', placement: 'left'
                      endif
                    endcapture
                    for product in search.results limit: section.settings.limit
                      unless settings.remove_collection_url
                        assign product_url = product.url | within: section.settings.collection
                      endunless
                      render 'card-product4', card_product: product, class: "hdt-slider__slide hdt-pr-style4", section_id: section.id, sizes: sizes, image_ratio: section.settings.image_ratio, color_list: color_list, size_list: size_list, product_url: product_url, btn_wishlist_code: btn_wishlist_code, show_vendor: section.settings.show_vendor
                    endfor
                  when '5'
                    capture btn_wishlist_code
                      if settings.wishlist_mode != '0'
                        render 'btn-wishlist', class: 'hdt-card-product__btn-wishlist hdt-pr_btn', placement: 'top'
                      endif
                    endcapture
                    for product in search.results limit: section.settings.limit
                      unless settings.remove_collection_url
                        assign product_url = product.url | within: section.settings.collection
                      endunless
                      render 'card-product5', card_product: product, class: "hdt-slider__slide hdt-pr-style5", section_id: section.id, sizes: sizes, image_ratio: section.settings.image_ratio, color_list: color_list, size_list: size_list, product_url: product_url, btn_wishlist_code: btn_wishlist_code, show_vendor: section.settings.show_vendor
                    endfor
                  when '6'
                    capture btn_wishlist_code
                      if settings.wishlist_mode != '0'
                        render 'btn-wishlist', class: 'hdt-card-product__btn-wishlist hdt-pr_btn', placement: 'top'
                      endif
                    endcapture
                    for product in search.results limit: section.settings.limit
                      unless settings.remove_collection_url
                        assign product_url = product.url | within: section.settings.collection
                      endunless
                      unless settings.remove_collection_url
                        assign product_url = product.url | within: section.settings.collection
                      endunless
                      render 'card-product6', card_product: product, class: "hdt-slider__slide hdt-pr-style6", section_id: section.id, sizes: sizes, image_ratio: section.settings.image_ratio, color_list: color_list, size_list: size_list, product_url: product_url, btn_wishlist_code: btn_wishlist_code, show_vendor: section.settings.show_vendor
                    endfor
                  when '7'
                    capture btn_wishlist_code
                      if settings.wishlist_mode != '0'
                        render 'btn-wishlist', class: 'hdt-card-product__btn-wishlist hdt-pr_btn', placement: 'top'
                      endif
                    endcapture
                    for product in search.results limit: section.settings.limit
                      unless settings.remove_collection_url
                        assign product_url = product.url | within: section.settings.collection
                      endunless
                      render 'card-product7', card_product: product, class: "hdt-slider__slide hdt-pr-style7 hdt-relative", section_id: section.id, sizes: sizes, image_ratio: section.settings.image_ratio, color_list: color_list, size_list: size_list, product_url: product_url, btn_wishlist_code: btn_wishlist_code, show_vendor: section.settings.show_vendor
                    endfor
                  when '8'
                    capture btn_wishlist_code
                      if settings.wishlist_mode != '0'
                        render 'btn-wishlist', class: 'hdt-card-product__btn-wishlist hdt-pr_btn', placement: 'top'
                      endif
                    endcapture
                    for product in search.results limit: section.settings.limit
                      unless settings.remove_collection_url
                        assign product_url = product.url | within: section.settings.collection
                      endunless
                      render 'card-product8', card_product: product, class: "hdt-slider__slide hdt-pr-style8", section_id: section.id, sizes: sizes, image_ratio: section.settings.image_ratio, color_list: color_list, size_list: size_list, product_url: product_url, btn_wishlist_code: btn_wishlist_code, show_vendor: section.settings.show_vendor
                    endfor
                  when '9'
                    capture btn_wishlist_code
                      if settings.wishlist_mode != '0'
                        render 'btn-wishlist', class: 'hdt-card-product__btn-wishlist hdt-pr_btn', placement: 'top'
                      endif
                    endcapture
                    for product in search.results limit: section.settings.limit
                      unless settings.remove_collection_url
                        assign product_url = product.url | within: section.settings.collection
                      endunless
                      render 'card-product9', card_product: product, class: "hdt-slider__slide hdt-pr-style1 hdt-pr-style9", section_id: section.id, sizes: sizes, image_ratio: section.settings.image_ratio, color_list: color_list, size_list: size_list, product_url: product_url, btn_wishlist_code: btn_wishlist_code, show_vendor: section.settings.show_vendor
                    endfor
                  when '10'
                    capture btn_wishlist_code
                      if settings.wishlist_mode != '0'
                        render 'btn-wishlist', class: 'hdt-card-product__btn-wishlist hdt-pr_btn', placement: 'top'
                      endif
                    endcapture
                    for product in search.results limit: section.settings.limit
                      unless settings.remove_collection_url
                        assign product_url = product.url | within: section.settings.collection
                      endunless
                      render 'card-product10', card_product: product, class: "hdt-slider__slide hdt-pr-style1 hdt-pr-style10", section_id: section.id, sizes: sizes, image_ratio: section.settings.image_ratio, color_list: color_list, size_list: size_list, product_url: product_url, btn_wishlist_code: btn_wishlist_code, show_vendor: section.settings.show_vendor
                    endfor
                  when '11' or '12'
                    capture btn_wishlist_code
                      if settings.wishlist_mode != '0'
                        render 'btn-wishlist', class: 'hdt-card-product__btn-wishlist hdt-pr_btn', placement: 'top'
                      endif
                    endcapture
                    assign class = "hdt-slider__slide hdt-pr-style1 hdt-pr-style" | append: section.settings.product_des
                    for product in search.results limit: section.settings.limit
                      unless settings.remove_collection_url
                        assign product_url = product.url | within: section.settings.collection
                      endunless
                      render 'card-product11', card_product: product, section_id: section.id, class: class, sizes: sizes, image_ratio: section.settings.image_ratio, color_list: color_list, size_list: size_list, product_url: product_url, btn_wishlist_code: btn_wishlist_code, show_vendor: section.settings.show_vendor
                    endfor
                  else
                    capture btn_wishlist_code
                      if settings.wishlist_mode != '0'
                        render 'btn-wishlist', class: 'hdt-card-product__btn-wishlist hdt-pr_btn', placement: 'top'
                      endif
                    endcapture
                    for product in search.results limit: section.settings.limit
                      unless settings.remove_collection_url
                        assign product_url = product.url | within: section.settings.collection
                      endunless
                      render 'card-product1', card_product: product, class: "hdt-slider__slide hdt-pr-style1", section_id: section.id, sizes: sizes, image_ratio: section.settings.image_ratio, color_list: color_list, size_list: size_list, product_url: product_url, btn_wishlist_code: btn_wishlist_code, show_vendor: section.settings.show_vendor
                    endfor
                endcase
              -%}
            </div>
          </div>
          {%- if section.settings.navUI -%}
            {%- render 'nav_slider', nav_des: section.settings.nav_des, nav_icon: section.settings.nav_icon -%}
          {%- endif -%}
          <div hdt-slider-dots aria-controls="Slider-{{ section.id }}" class="hdt-slider__dots hdt-flex hdt-align-center hdt-justify-center"></div>
        </hdt-slider>
      </div>
    {%- endif -%}
  </product-recently>
</div>
{%- style -%}#shopify-section-{{section.id}}{--section-pt:{{section.settings.padding_top}}px;--section-pb:{{section.settings.padding_bottom}}px;--section-prate:{{section.settings.padding_rate}}}{%- endstyle -%}
{% schema %}
{
  "name": "t:sections.recently-products.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.all.section_heading_options"
    },
    {
      "type": "text",
      "id": "sec_heading",
      "label": "t:sections.all.heading.label",
      "default": "<p>Recently Viewed</p>"
    },    
    {
      "type": "select",
      "id": "heading_tag",
      "label": "t:sections.all.heading.heading_tag.label",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading.heading_tag.options_2.label"
        },
        {
          "value": "h3",
          "label": "t:sections.all.heading.heading_tag.options_3.label"
        },
        {
          "value": "h4",
          "label": "t:sections.all.heading.heading_tag.options_4.label"
        },
        {
          "value": "h5",
          "label": "t:sections.all.heading.heading_tag.options_5.label"
        },
        {
          "value": "h6",
          "label": "t:sections.all.heading.heading_tag.options_6.label"
        },
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Size",
      "options": [
        {
          "value": "base",
          "label": "Base size"
        },
        {
          "value": "h6",
          "label": "H6 size"
        },
        {
          "value": "h5",
          "label": "H5 size"
        },
        {
          "value": "h4",
          "label": "H4 size"
        },
        {
          "value": "h3",
          "label": "H3 size"
        },
        {
          "value": "h2",
          "label": "H2 size"
        },
        {
          "value": "h1",
          "label": "H1 size"
        },
        {
          "value": "h0",
          "label": "H0 size"
        },
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "text_color",
      "options": [
        {
          "value": "hdt-s-text",
          "label": "Default"
        },
        {
          "value": "hdt-text-secondary",
          "label": "Secondary"
        },
        {
          "value": "hdt-text-body-tertiary",
          "label": "Tertiary"
        },
        {
          "value": "hdt-text-primary",
          "label": "Accent"
        }
      ],
      "label": "Text color",
      "default": "hdt-s-text"
    },
    {
      "type": "select",
      "id": "heading_align",
      "label": "t:sections.title.settings.heading_align.label",
      "options": [
        {
          "value": "start",
          "label": "t:sections.title.settings.heading_align.options_1.label"
        },
        {
          "value": "center",
          "label": "t:sections.title.settings.heading_align.options_2.label"
        }
      ],
      "default": "center"
    },
    {
      "type": "richtext",
      "id": "sec_subheading",
      "label": "t:sections.all.sub_heading.label"
    },
    {
      "type": "select",
      "id": "subheading_size",
      "label": "t:sections.gallery.settings.sub_heading.options.subheading_size",
      "options": [
        {
          "value": "base",
          "label": "t:sections.all.sub_heading.subheading_size.options.base"
        },
        {
          "value": "lg",
          "label": "t:sections.all.sub_heading.subheading_size.options.default"
        },
        {
          "value": "xl",
          "label": "t:sections.all.sub_heading.subheading_size.options.medium"
        },
        {
          "value": "2xl",
          "label": "t:sections.all.sub_heading.subheading_size.options.large"
        },
        {
          "value": "10xl",
          "label": "t:sections.all.sub_heading.subheading_size.options.extralarge"
        }
      ],
      "default": "lg"
    },
    {
      "type": "checkbox",
      "id": "heading_reverse",
      "label": "t:sections.gallery.settings.heading_reverse",
      "default": false
    },
    {
      "type": "range",
      "id": "heading_gap",
      "min": 0,
      "max": 60,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.heading_gap",
      "default": 18
    },
    {
      "type": "range",
      "id": "sec_heading_spacing",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.sec_heading_spacing",
      "default": 30
    },
    {
      "type": "header",
      "content": "t:sections.tabs_collections.settings.options_products"
    },
    {
      "type": "range",
      "id": "limit",
      "min": 1,
      "max": 10,
      "step": 1,
      "label": "t:sections.all.limit",
      "default": 5
    },
    {
      "type": "select",
      "id": "product_des",
      "label": "t:sections.collection_products.settings.product_des",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        },
        {
          "value": "6",
          "label": "6"
        },
        {
          "value": "7",
          "label": "7"
        },
        {
          "value": "8",
          "label": "8"
        },
        {
          "value": "9",
          "label": "9"
        },
        {
          "value": "10",
          "label": "10"
        },
        {
          "value": "11",
          "label": "11"
        },
        {
          "value": "12",
          "label": "12"
        },
      ],
      "default": "1"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt_image",
          "label": "t:sections.all.images.ratio.adapt_image.label"
        },
        {
          "value": "square",
          "label": "t:sections.all.images.ratio.square.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.all.images.ratio.portrait.label"
        },
        {
          "value": "asos",
          "label": "t:sections.all.images.ratio.asos.label"
        },
        {
          "value": "landscape",
          "label": "t:sections.all.images.ratio.landscape.label"
        },
        {
          "value": "custom-pr",
          "label": "t:sections.all.images.ratio.custom.label"
        }
      ],
      "label": "t:sections.all.images.ratio.label",
      "default": "adapt_image"
    },
    {
      "type": "checkbox",
      "id": "image_size",
      "label": "t:sections.all.images.size.cover",
      "info": "t:sections.all.images.size.info",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "t:sections.recently-products.settings.show_vendor.label",
      "default": false
    },
    {
      "type": "select",
      "id": "col_dk",
      "label": "t:sections.all.items_row.desktop",
      "default": "4",
      "options": [
        {
          "label": "2",
          "value": "2"
        },
        {
          "label": "3",
          "value": "3"
        },
        {
          "label": "4",
          "value": "4"
        },
        {
          "label": "5",
          "value": "5"
        },
        {
          "label": "6",
          "value": "6"
        }
      ]
    },
    {
      "type": "select",
      "id": "col_tb",
      "label": "t:sections.all.items_row.tablet",
      "default": "3",
      "options": [
        {
          "label": "2",
          "value": "2"
        },
        {
          "label": "3",
          "value": "3"
        },
        {
          "label": "4",
          "value": "4"
        }
      ]
    },
    {
      "type": "select",
      "id": "col_mb",
      "label": "t:sections.all.items_row.mobile",
      "default": "2",
      "options": [
        {
          "label": "1",
          "value": "1"
        },
        {
          "label": "2",
          "value": "2"
        }
      ]
    },
    {
      "type": "header",
      "content": "t:sections.all.slider.label"
    },
    {
      "type": "checkbox",
      "id": "navUI",
      "label": "t:sections.all.slider.navUI",
      "default": false
    },
    {
      "type": "select",
      "id": "btn_vi",
      "label": "t:sections.all.slider.nav_visible.label",
      "default": "hover",
      "options": [
        {
          "value": "always",
          "label": "t:sections.all.slider.nav_visible.options.always"
        },
        {
          "value": "hover",
          "label": "t:sections.all.slider.nav_visible.options.only_hover"
        }
      ]
    },
    {
      "type": "select",
      "id": "nav_des",
      "label": "t:sections.all.slider.nav_des.label",
      "options": [
        {
          "value": "default",
          "label": "t:sections.all.slider.nav_des.options.default"
        },
        {
          "value": "outline",
          "label": "t:sections.all.slider.nav_des.options.outline"
        },
        {
          "value": "simple",
          "label": "t:sections.all.slider.nav_des.options.simple"
        }
      ],
      "default": "default"
    },
    {
      "type": "select",
      "id": "nav_shape",
      "label": "t:sections.all.slider.nav_shape.label",
      "options": [
        {
          "value": "default",
          "label": "t:sections.all.slider.nav_shape.options.default"
        },
        {
          "value": "rounded",
          "label": "t:sections.all.slider.nav_shape.options.rounded"
        },
        {
          "value": "rotate",
          "label": "t:sections.all.slider.nav_shape.options.rotate"
        }
      ],
      "default": "rounded"
    },
    {
      "type": "select",
      "id": "nav_size",
      "label": "t:sections.all.slider.nav_size.label",
      "options": [
        {
          "value": "xsmall",
          "label": "Extra small"
        },
        {
          "value": "small",
          "label": "t:sections.all.slider.nav_size.options.small"
        },
        {
          "value": "medium",
          "label": "t:sections.all.slider.nav_size.options.medium"
        },
        {
          "value": "large",
          "label": "t:sections.all.slider.nav_size.options.large"
        }
      ],
      "default": "small"
    },
    {
      "type": "select",
      "id": "nav_pos",
      "label": "t:sections.all.slider.nav_pos.label",
      "options": [
        {
          "value": "middle_in",
          "label": "t:sections.all.slider.nav_pos.options.middle_in"
        },
        {
          "value": "middle_out",
          "label": "Outside content"
        }
      ],
      "default": "middle_in"
    },
    {
      "type": "select",
      "id": "nav_icon",
      "label": "Navigation icon",
      "options": [
        {
          "value": "chrvon",
          "label": "Chevron"
        },
        {
          "value": "arrow_right",
          "label": "Arrow"
        }
      ],
      "default": "chrvon"
    },
    {
      "type": "checkbox",
      "id": "dotUI",
      "label": "t:sections.all.slider.dotUI",
      "default": false
    },
    {
      "type": "header",
      "content": "t:sections.all.section_layout"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "background-1"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "t:sections.all.full_width.label",
      "default": false
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 100
    },
    {
      "type": "range",
      "id": "padding_rate",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "t:sections.all.padding.padding_rate",
      "default": 75
    }
  ]
}
{% endschema %}
