{% comment %}
  Renders a carousel of collection-title.

  Usage:
  {% render 'collection-title-style2' %}
{% endcomment %}

<xo-container {% render 'section-layout' %}>
  <xo-animate xo-cascade>
    <xo-carousel
      xo-per-view='{{ section.settings.columns }}'
      xo-loop
      class='collection-title-style2__carousel'
      xo-breakpoints='
        {
          1400: {
            perView: 6,
          },
          1200: {
            perView: 5,
          },
          992: {
            perView: 4,
          },
          768: {
            perView: 3,
          },
          576: {
            perView: 2,
          },
        }
      '
    >
      <xo-carousel-inner>
        <xo-carousel-list>
          {% for block in section.blocks %}
            <xo-carousel-slide class='collection-title-style2__nav'>
              <div class='collection-title-style2__nav-img'>
                <a href='{{block.settings.collection.url}}'>
                  {% if block.settings.collection_image != blank %}
                    {% render 'image', image: block.settings.collection_image %}
                  {% else %}
                    {% render 'image', image: block.settings.collection.featured_image %}
                  {% endif %}
                </a>
              </div>
              <div class='collection-title-style2__nav-text'>
                <a href='{{block.settings.collection.url}}'>
                  {{ block.settings.collection.title }}
                </a>
              </div>
            </xo-carousel-slide>
          {% endfor %}
        </xo-carousel-list>
      </xo-carousel-inner>
      <xo-carousel-prev class='collection-title-style2__arrow-left'
        ><button>{% render 'icon', name: 'arrow-left', icon_size: '12' %}</button></xo-carousel-prev
      >
      <xo-carousel-next class='collection-title-style2__arrow-right'
        ><button>{% render 'icon', name: 'arrow-right', icon_size: '12' %}</button></xo-carousel-next
      >
    </xo-carousel>
  </xo-animate>
</xo-container>
