<div
  class='container product-recommendations-{{ section.id }} relative {% render 'fn.get_section_padding', section: section %}'
  x-data="recommendation('{{ section.id }}', '{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=4&intent=related')"
>
  {% if section.settings.title != blank %}
    <div class='flex flex-wrap justify-between items-end'>
      <div>
        {% if section.settings.headline %}
          <p class='uppercase font-semibold text-green-500 mb-2'>{{ section.settings.headline }}</p>
        {% endif %}
        {% if section.settings.title %}
          <h2 class='font-bold text-4xl lg:text-5xl mb-3 -tracking-[0.06em] text-brown'>
            {{ section.settings.title }}
          </h2>
        {% endif %}
        {% if section.settings.content %}
          <p class='text-lg'>{{ section.settings.content }}</p>
        {% endif %}
      </div>
      {% if section.settings.button_text and section.settings.button_link %}
        <div>
          <a
            href='{{ section.settings.button_link }}'
            class='bg-red-500 text-white rounded-lg px-6 py-2 inline-block mt-4 lg:mt-0'
          >
            {{ section.settings.button_text }}
          </a>
        </div>
      {% endif %}
    </div>
  {% endif %}
  {% if recommendations.performed and recommendations.products_count > 0 %}
    <div class='mt-5 lg:mt-10'>
      {%- liquid
        assign show_desktop_slider = false
        if section.settings.enable_desktop_slider or recommendations.products_count > 4
          assign show_desktop_slider = true
        endif
      -%}

      
      <div
        class='block md:hidden relative w-full !px-0'
        x-cloak
        x-init='refresh()'
        x-data='
          slider(false, {
          loop: true,
          center: false,
          gap: 20,
          slides: {
            perView: 1.25,
          },
          breakpoints: {
            "(min-width: 412px)": {
              slides: { perView: 2.25 },
            },
          }})
        '
      >
        <div class='keen-slider' x-ref='slider'>
          {% for recommendation in recommendations.products %}
            <div class='keen-slider__slide'>
              {% render 'product.card', product: recommendation %}
            </div>
          {% endfor %}
        </div>
      </div>

      
      <div class='hidden md:grid grid-cols-3 lg:grid-cols-4 gap-2 gap-y-10'>
        {% for recommendation in recommendations.products %}
          {% render 'product.card', product: recommendation %}
        {% endfor %}
      </div>
    </div>
  {% endif %}
</div>

{% schema %}
{
  "name": "Recommended products",
  "settings": [
    {
      "type": "inline_richtext",
      "id": "title",
      "label": "Title",
      "default": "You may also like",
      "info": "Use the italic button (I) to make text appear in red. Example: In Craft premium wine, make 'premium wine' italic to show it in italic red."
    },
    {
      "type": "richtext",
      "id": "content",
      "label": "Content",
      "default": "<p>Family owned and run we tend our ten hectares of vines in Wilyabrup, the cradle of the Margaret River wine region.</p>"
    },
    {
      "type": "text",
      "id": "heading_alignment",
      "label": "Heading alignment",
      "default": "text-center"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "View all"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "select",
      "id": "button_variant",
      "label": "Button variant",
      "options": [
        {
          "value": "primary",
          "label": "Primary"
        },
        {
          "value": "secondary",
          "label": "Secondary"
        }
      ],
      "default": "primary"
    },
    {
      "type": "select",
      "id": "padding_top",
      "label": "Padding top",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    },
    {
      "type": "select",
      "label": "Padding bottom",
      "id": "padding_bottom",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    }
  ],
  "presets": [
    {
      "name": "Recommended products"
    }
  ]
}
{% endschema %}