{% comment %}
  Renders a collection-bestsell-custom with exactly product card style (used for demo).

  Accepts:
  * product_card_style_layout: {String} Product card style used for demo (required)
  - title: {String} Title of bestsell (optional)
  - columns: {Number} Number of column for carousel perview (optional)
  - collection: {Object} Collection to render products (required)
  - show_pagination: {Boolean} Show/hide pagination desktop (optional)
  - show_pagination_mobile: {Boolean} Show/hide pagination mobile (optional)

  Usage:
  {% render 'collection-bestsell-custom' %}
{% endcomment %}

{% liquid
  if show_pagination
    assign display_pagination_desktop = 'flex'
  else
    assign display_pagination_desktop = 'none'
  endif
  if show_pagination_mobile
    assign display_pagination_mobile = 'flex'
  else
    assign display_pagination_mobile = 'none'
  endif
%}

<div class='collection-bestsell'>
  <div class='collection-bestsell__header'>
    {% render 'icon', name: 'bestsell', width: '20', color: '#e2971f' %}
    <h2 class='collection-bestsell__title'>{{ title }}</h2>
  </div>
  <xo-animate xo-cascade>
    <xo-carousel
      xo-render-bullet='<span class="collection-bestsell__bullet"></span>'
      xo-per-view='{{ columns }}'
      class='collection-bestsell__carousel'
      xo-breakpoints='
        {
          1200:{
            perView: 3,
          },
          992: {
            perView: 2,
          },
          576: {
            perView: 1
          }
        }
      '
    >
      <xo-carousel-inner>
        <xo-carousel-list>
          {% for product in collection.products %}
            {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
            {%- assign placeholder_image = 'product-apparel-' | append: placeholder_image_index -%}
            <xo-carousel-slide>
              {% case product_card_style_layout %}
                {% when 'style9' %}
                  {% render 'product-card-style9',
                    product: product,
                    show_image: section.settings.product_card_show_image,
                    show_secondary_image: section.settings.product_card_show_secondary_image,
                    show_vendor: section.settings.product_card_show_vendor,
                    show_description: section.settings.product_card_show_description,
                    show_quick_add: section.settings.product_card_show_quick_add,
                    show_quick_view: section.settings.product_card_show_quick_view,
                    show_price: section.settings.product_card_show_price,
                    show_badge: section.settings.product_card_show_badge,
                    media_aspect_ratio: section.settings.product_card_aspect_ratio,
                    color_scheme: section.settings.card_color_scheme,
                    placeholder_image: placeholder_image
                  -%}
                {% when 'style8' %}
                  {% render 'product-card-style8',
                    product: product,
                    show_image: section.settings.product_card_show_image,
                    show_secondary_image: section.settings.product_card_show_secondary_image,
                    show_vendor: section.settings.product_card_show_vendor,
                    show_description: section.settings.product_card_show_description,
                    show_quick_add: section.settings.product_card_show_quick_add,
                    show_quick_view: section.settings.product_card_show_quick_view,
                    show_price: section.settings.product_card_show_price,
                    show_badge: section.settings.product_card_show_badge,
                    media_aspect_ratio: section.settings.product_card_aspect_ratio,
                    color_scheme: section.settings.card_color_scheme,
                    placeholder_image: placeholder_image
                  -%}
                {% when 'style7' %}
                  {% render 'product-card-style7',
                    product: product,
                    show_image: section.settings.product_card_show_image,
                    show_secondary_image: section.settings.product_card_show_secondary_image,
                    show_vendor: section.settings.product_card_show_vendor,
                    show_description: section.settings.product_card_show_description,
                    show_quick_add: section.settings.product_card_show_quick_add,
                    show_quick_view: section.settings.product_card_show_quick_view,
                    show_price: section.settings.product_card_show_price,
                    show_badge: section.settings.product_card_show_badge,
                    media_aspect_ratio: section.settings.product_card_aspect_ratio,
                    color_scheme: section.settings.card_color_scheme,
                    placeholder_image: placeholder_image
                  -%}
                {% when 'style6' %}
                  {% render 'product-card-style6',
                    product: product,
                    show_image: section.settings.product_card_show_image,
                    show_secondary_image: section.settings.product_card_show_secondary_image,
                    show_vendor: section.settings.product_card_show_vendor,
                    show_description: section.settings.product_card_show_description,
                    show_quick_add: section.settings.product_card_show_quick_add,
                    show_quick_view: section.settings.product_card_show_quick_view,
                    show_price: section.settings.product_card_show_price,
                    show_badge: section.settings.product_card_show_badge,
                    media_aspect_ratio: section.settings.product_card_aspect_ratio,
                    color_scheme: section.settings.card_color_scheme,
                    placeholder_image: placeholder_image
                  -%}
                {% when 'style5' %}
                  {% render 'product-card-style6',
                    product: product,
                    show_image: section.settings.product_card_show_image,
                    show_secondary_image: section.settings.product_card_show_secondary_image,
                    show_vendor: section.settings.product_card_show_vendor,
                    show_description: section.settings.product_card_show_description,
                    show_quick_add: section.settings.product_card_show_quick_add,
                    show_quick_view: section.settings.product_card_show_quick_view,
                    show_price: section.settings.product_card_show_price,
                    show_badge: section.settings.product_card_show_badge,
                    media_aspect_ratio: section.settings.product_card_aspect_ratio,
                    color_scheme: section.settings.card_color_scheme,
                    placeholder_image: placeholder_image
                  -%}
                {% when 'style4' %}
                  {% render 'product-card-style6',
                    product: product,
                    show_image: section.settings.product_card_show_image,
                    show_secondary_image: section.settings.product_card_show_secondary_image,
                    show_vendor: section.settings.product_card_show_vendor,
                    show_description: section.settings.product_card_show_description,
                    show_quick_add: section.settings.product_card_show_quick_add,
                    show_quick_view: section.settings.product_card_show_quick_view,
                    show_price: section.settings.product_card_show_price,
                    show_badge: section.settings.product_card_show_badge,
                    media_aspect_ratio: section.settings.product_card_aspect_ratio,
                    color_scheme: section.settings.card_color_scheme,
                    placeholder_image: placeholder_image
                  -%}
                {% when 'style3' %}
                  {% render 'product-card-style3',
                    product: product,
                    show_image: section.settings.product_card_show_image,
                    show_secondary_image: section.settings.product_card_show_secondary_image,
                    show_vendor: section.settings.product_card_show_vendor,
                    show_description: section.settings.product_card_show_description,
                    show_quick_add: section.settings.product_card_show_quick_add,
                    show_quick_view: section.settings.product_card_show_quick_view,
                    show_price: section.settings.product_card_show_price,
                    show_badge: section.settings.product_card_show_badge,
                    media_aspect_ratio: section.settings.product_card_aspect_ratio,
                    color_scheme: section.settings.card_color_scheme,
                    placeholder_image: placeholder_image
                  -%}
                {% when 'style2' %}
                  {% render 'product-card-style2',
                    product: product,
                    show_image: section.settings.product_card_show_image,
                    show_secondary_image: section.settings.product_card_show_secondary_image,
                    show_vendor: section.settings.product_card_show_vendor,
                    show_description: section.settings.product_card_show_description,
                    show_quick_add: section.settings.product_card_show_quick_add,
                    show_quick_view: section.settings.product_card_show_quick_view,
                    show_price: section.settings.product_card_show_price,
                    show_badge: section.settings.product_card_show_badge,
                    media_aspect_ratio: section.settings.product_card_aspect_ratio,
                    color_scheme: section.settings.card_color_scheme,
                    placeholder_image: placeholder_image
                  -%}
                {% when 'style1' %}
                  {% render 'product-card-style1',
                    product: product,
                    show_image: settings.product_card_show_image,
                    show_secondary_image: settings.product_card_show_secondary_image,
                    show_vendor: settings.product_card_show_vendor,
                    show_description: settings.product_card_show_description,
                    show_quick_add: settings.product_card_show_quick_add,
                    show_quick_view: settings.product_card_show_quick_view,
                    show_price: settings.product_card_show_price,
                    show_badge: settings.product_card_show_badge,
                    media_aspect_ratio: settings.product_card_aspect_ratio,
                    color_scheme: color_scheme_chosen,
                    placeholder_image: placeholder_image,
                    animate_enabled: false
                  %}
              {% endcase %}
            </xo-carousel-slide>
          {% endfor %}
        </xo-carousel-list>
      </xo-carousel-inner>
      <div class='collection-bestsell__navigation'>
        <xo-carousel-prev class='collection-bestsell__arrow'
          ><button>{% render 'icon', name: 'arrow-left', icon_size: '14' %}</button></xo-carousel-prev
        >
        <xo-carousel-next class='collection-bestsell__arrow'
          ><button>{% render 'icon', name: 'arrow-right', icon_size: '14' %}</button></xo-carousel-next
        >
      </div>
      <xo-carousel-pagination
        class='collection-bestsell__pagination'
        style='--display-desktop: {{ display_pagination_desktop }}; --display-mobile: {{ display_pagination_mobile }}'
      ></xo-carousel-pagination>
    </xo-carousel>
  </xo-animate>
</div>
