{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{{ 'template-collection.css' | asset_url | stylesheet_tag }}

{%- unless section.settings.quick_add == 'none' -%}
  {{ 'quick-add.css' | asset_url | stylesheet_tag }}
  <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endunless -%}

{%- if section.settings.quick_add == 'standard' -%}
  <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  #shopify-section-{{ section.id }} .button.button--secondary {
    border: 1px solid
  }
{%- endstyle -%}

{%- liquid
  assign columns_mobile_int = section.settings.columns_mobile | plus: 0.2
  assign columns_desktop_int = section.settings.columns_desktop | plus: 0.6
  assign show_arrows = true
  if section.settings.show_arrows == false
    assign show_arrows = false
  endif
  assign show_pagination = true
  if section.settings.show_pagination == false
    assign show_pagination = false
  endif
  assign show_keyboard = true
  if section.settings.show_keyboard == false
    assign show_keyboard = false
  endif
  assign show_grab_cursor = true
  if section.settings.show_grab_cursor == false
    assign show_grab_cursor = false
  endif
  if show_arrows or show_pagination
    assign rc_show_swiper_footer = true
  else
    assign rc_show_swiper_footer = false
  endif
-%}

<div class="color-{{ section.settings.color_scheme }} isolate gradient">
  <div
    class="collection section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}"
    id="collection-{{ section.id }}"
    data-id="{{ section.id }}">
    <div class="collection__title title-wrapper title-wrapper--no-top-margin page-width">
      {%- if section.settings.title != blank -%}
        <h2 class="title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
          {{ section.settings.title }}
        </h2>
      {%- endif -%}
      {%- if section.settings.description != blank or section.settings.show_description and section.settings.collection.description != empty
      -%}
        <div class="collection__description {{ section.settings.description_style }} rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
          {%- if section.settings.show_description -%}
            {{ section.settings.collection.description }}
          {%- else -%}
            {{ section.settings.description -}}
          {%- endif %}
        </div>
      {%- endif -%}
    </div>

    <div class="page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
      {% assign skip_card_product_styles = false %}
      {%- if section.settings.collection.products.size > 0 -%}
        {% assign lazy_load = false %}
        <div
          class="swiper-container"
          data-section-id="{{ section.id }}"
          data-perview-desktop="{{ columns_desktop_int }}"
          data-perview-tablet="{{ columns_desktop_int | minus: 1 }}"
          data-perview-mobile="{{ columns_mobile_int }}"
          data-swiper-nav="{% if show_arrows %}true{% else %}false{% endif %}"
          data-swiper-pagination="{% if show_pagination %}true{% else %}false{% endif %}"
          data-swiper-keyboard="{% if show_keyboard %}true{% else %}false{% endif %}"
          data-swiper-grab-cursor="{% if show_grab_cursor %}true{% else %}false{% endif %}"
        >
          <div class="swiper swiper-slider-{{ section.id }}">
            <div class="swiper-wrapper">
              {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
                {% if lazy_load == false and forloop.index > section.settings.products_to_show %}
                  {% assign lazy_load = true %}
                {% endif %}

                <div
                  id="Slide-{{ section.id }}-{{ forloop.index }}"
                  class="swiper-slide {% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                  {% if settings.animations_reveal_on_scroll %}
                  data-cascade
                  style="--animation-order: {{ forloop.index }};"
                  {% endif %}>
                  {% render 'card-product'
                    , card_product: product
                    , media_aspect_ratio: section.settings.image_ratio
                    , lazy_load: lazy_load
                    , show_secondary_image: section.settings.show_secondary_image
                    , show_vendor: section.settings.show_vendor
                    , show_rating: section.settings.show_rating
                    , skip_styles: skip_card_product_styles
                    , section_id: section.id
                    , quick_add: section.settings.quick_add
                  %}
                </div>
                {%- assign skip_card_product_styles = true -%}
              {%- endfor -%}
            </div>
            {%- if rc_show_swiper_footer -%}
              <div class="swiper-footer">
                {%- if show_arrows -%}
                  <div class="swiper-button-prev">
                    {{- 'swiper-prev.svg' | inline_asset_content -}}
                  </div>
                  <div class="swiper-button-next">
                    {{- 'swiper-next.svg' | inline_asset_content -}}
                  </div>
                {%- endif -%}
                {%- if show_pagination -%}
                  <div class="swiper-pagination"></div>
                {%- endif -%}
              </div>
            {%- endif -%}
          </div>
        </div>
      {%- else -%}
        <div
          class="swiper-container"
          data-section-id="{{ section.id }}"
          data-perview-desktop="{{ columns_desktop_int }}"
          data-perview-tablet="3.2"
          data-perview-mobile="{{ columns_mobile_int }}"
          data-swiper-nav="{% if show_arrows %}true{% else %}false{% endif %}"
          data-swiper-pagination="{% if show_pagination %}true{% else %}false{% endif %}"
          data-swiper-keyboard="{% if show_keyboard %}true{% else %}false{% endif %}"
          data-swiper-grab-cursor="{% if show_grab_cursor %}true{% else %}false{% endif %}"
        >
          <div class="swiper swiper-slider-{{ section.id }}">
            <div class="swiper-wrapper">
              {%- for i in (1..6) -%}
                <div
                  class="swiper-slide{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                  {% if settings.animations_reveal_on_scroll %}
                  data-cascade
                  style="--animation-order: {{ forloop.index }};"
                  {% endif %}>
                  {% liquid
                    assign ridx = forloop.rindex
                    case ridx
                      when 5
                        assign ridx = 1
                      when 6
                        assign ridx = 2
                    endcase
                  %}
                  {%- assign placeholder_image = 'product-apparel-' | append: ridx -%}
                  {% render 'card-product'
                    , show_vendor: section.settings.show_vendor
                    , media_aspect_ratio: section.settings.image_ratio
                    , lazy_load: false
                    , placeholder_image: placeholder_image
                  %}
                </div>
              {%- endfor -%}
            </div>
            {%- if rc_show_swiper_footer -%}
              <div class="swiper-footer">
                {%- if show_arrows -%}
                  <div class="swiper-button-prev">
                    {{- 'swiper-prev.svg' | inline_asset_content -}}
                  </div>
                  <div class="swiper-button-next">
                    {{- 'swiper-next.svg' | inline_asset_content -}}
                  </div>
                {%- endif -%}
                {%- if show_pagination -%}
                  <div class="swiper-pagination"></div>
                {%- endif -%}
              </div>
            {%- endif -%}
          </div>
        </div>
      {%- endif -%}

      {%- if section.settings.show_view_all and section.settings.collection != blank -%}
        <div class="recommended-collection__view-all center" style="margin-top: 1.5rem;">
          {%- if section.settings.view_all_text != blank -%}
            {%- assign view_all_text = section.settings.view_all_text -%}
          {%- else -%}
            {%- assign view_all_text = 'sections.featured_collection.view_all' | t -%}
          {%- endif -%}
          {%- assign view_all_url = section.settings.collection.url -%}
          {%- if section.settings.view_all_style == 'link' -%}
            <a href="{{ view_all_url }}" class="link underlined-link" aria-label="{{ view_all_text }}">{{ view_all_text }}</a>
          {%- elsif section.settings.view_all_style == 'outline' -%}
            <a href="{{ view_all_url }}" class="button button--secondary">{{ view_all_text }}</a>
          {%- else -%}
            <a href="{{ view_all_url }}" class="button button--primary">{{ view_all_text }}</a>
          {%- endif -%}
        </div>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Recommended collection",
    "tag": "section",
    "class": "section",
    "disabled_on": {
      "groups": ["header", "footer"]
    },
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "t:sections.featured-collection.settings.collection.label"
      },
      {
        "type": "range",
        "id": "products_to_show",
        "min": 2,
        "max": 25,
        "step": 1,
        "default": 4,
        "label": "t:sections.featured-collection.settings.products_to_show.label"
      },
      {
        "type": "header",
        "content": "t:sections.featured-collection.settings.header_text.content"
      },
      {
        "type": "inline_richtext",
        "id": "title",
        "default": "t:sections.featured-collection.settings.title.default",
        "label": "t:sections.featured-collection.settings.title.label"
      },
      {
        "type": "select",
        "id": "heading_size",
        "options": [
          {
            "value": "h4",
            "label": "t:sections.all.heading_size.options__1.label"
          },
          {
            "value": "h3",
            "label": "t:sections.all.heading_size.options__2.label"
          },
          {
            "value": "h2",
            "label": "t:sections.all.heading_size.options__3.label"
          },
          {
            "value": "h1",
            "label": "t:sections.all.heading_size.options__4.label"
          }
        ],
        "default": "h1",
        "label": "t:sections.all.heading_size.label"
      },
      {
        "type": "richtext",
        "id": "description",
        "label": "t:sections.featured-collection.settings.description.label"
      },
      {
        "type": "checkbox",
        "id": "show_description",
        "label": "t:sections.featured-collection.settings.show_description.label",
        "default": false
      },
      {
        "type": "select",
        "id": "description_style",
        "label": "t:sections.featured-collection.settings.description_style.label",
        "options": [
          {
            "value": "body",
            "label": "t:sections.featured-collection.settings.description_style.options__1.label"
          },
          {
            "value": "subtitle",
            "label": "t:sections.featured-collection.settings.description_style.options__2.label"
          },
          {
            "value": "uppercase",
            "label": "t:sections.featured-collection.settings.description_style.options__3.label"
          }
        ],
        "default": "body"
      },
      {
        "type": "header",
        "content": "t:sections.featured-collection.settings.header_collection.content"
      },
      {
        "type": "range",
        "id": "columns_desktop",
        "min": 1,
        "max": 6,
        "step": 1,
        "default": 4,
        "label": "t:sections.featured-collection.settings.columns_desktop.label"
      },
      {
        "type": "checkbox",
        "id": "full_width",
        "label": "t:sections.featured-collection.settings.full_width.label",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_view_all",
        "label": "t:sections.featured-collection.settings.show_view_all.label",
        "default": true
      },
      {
        "type": "text",
        "id": "view_all_text",
        "label": "View all button text",
        "default": "View all",
        "info": "Leave blank to use default \"View all\". Link goes to the collection selected above."
      },
      {
        "type": "select",
        "id": "view_all_style",
        "label": "t:sections.featured-collection.settings.view_all_style.label",
        "options": [
          {
            "value": "link",
            "label": "t:sections.featured-collection.settings.view_all_style.options__1.label"
          },
          {
            "value": "outline",
            "label": "t:sections.featured-collection.settings.view_all_style.options__2.label"
          },
          {
            "value": "solid",
            "label": "t:sections.featured-collection.settings.view_all_style.options__3.label"
          }
        ],
        "default": "solid"
      },
      {
        "type": "select",
        "id": "color_scheme",
        "options": [
          {
            "value": "accent-1",
            "label": "t:sections.all.colors.accent_1.label"
          },
          {
            "value": "accent-2",
            "label": "t:sections.all.colors.accent_2.label"
          },
          {
            "value": "background-1",
            "label": "t:sections.all.colors.background_1.label"
          },
          {
            "value": "background-2",
            "label": "t:sections.all.colors.background_2.label"
          },
          {
            "value": "inverse",
            "label": "t:sections.all.colors.inverse.label"
          }
        ],
        "default": "background-1",
        "label": "t:sections.all.colors.label",
        "info": "t:sections.all.colors.has_cards_info"
      },
      {
        "type": "header",
        "content": "t:sections.featured-collection.settings.header.content"
      },
      {
        "type": "select",
        "id": "image_ratio",
        "options": [
          {
            "value": "adapt",
            "label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
          },
          {
            "value": "portrait",
            "label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
          },
          {
            "value": "square",
            "label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
          }
        ],
        "default": "adapt",
        "label": "t:sections.featured-collection.settings.image_ratio.label"
      },
      {
        "type": "checkbox",
        "id": "show_secondary_image",
        "default": false,
        "label": "t:sections.featured-collection.settings.show_secondary_image.label"
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "default": false,
        "label": "t:sections.featured-collection.settings.show_vendor.label"
      },
      {
        "type": "checkbox",
        "id": "show_rating",
        "default": false,
        "label": "t:sections.featured-collection.settings.show_rating.label",
        "info": "t:sections.featured-collection.settings.show_rating.info"
      },
      {
        "type": "select",
        "id": "quick_add",
        "default": "none",
        "label": "t:sections.main-collection-product-grid.settings.quick_add.label",
        "options": [
          {
            "value": "none",
            "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
          },
          {
            "value": "standard",
            "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
          }
        ]
      },
      {
        "type": "header",
        "content": "t:sections.featured-collection.settings.header_mobile.content"
      },
      {
        "type": "select",
        "id": "columns_mobile",
        "default": "2",
        "label": "t:sections.featured-collection.settings.columns_mobile.label",
        "options": [
          {
            "value": "1",
            "label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
          },
          {
            "value": "2",
            "label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
          }
        ]
      },
      {
        "type": "header",
        "content": "Slider controls"
      },
      {
        "type": "checkbox",
        "id": "show_arrows",
        "default": true,
        "label": "Show previous / next arrows"
      },
      {
        "type": "checkbox",
        "id": "show_pagination",
        "default": true,
        "label": "Show dot pagination"
      },
      {
        "type": "checkbox",
        "id": "show_keyboard",
        "default": true,
        "label": "Keyboard navigation (arrow keys when slider is in view)"
      },
      {
        "type": "checkbox",
        "id": "show_grab_cursor",
        "default": true,
        "label": "Grab (hand) cursor on desktop when dragging the slider"
      },
      {
        "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": 36
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_bottom",
        "default": 36
      }
    ],
    "presets": [
      {
        "name": "Recommended collection"
      }
    ]
  }
{% endschema %}