{{ 'category.css' | asset_url | stylesheet_tag }}

{% liquid
  assign collection_numbers = 0
  for block in section.blocks
    if block.type == 'collection'
      assign collection_numbers = collection_numbers | plus: 1
    endif
  endfor
  if collection_numbers == 0
    assign collection_numbers = 1
  endif
  if collection_numbers <= section.settings.collection_perview
    assign perview = collection_numbers
  else
    assign perview = section.settings.collection_perview
  endif
%}

<xo-animate xo-cascade class='category'>
  <div class='category__bg-container'>
    {% if section.settings.category_background_image_desktop != blank %}
      <div
        class='xo-background-lazyload category__bg category__bg--desktop'
        style='background-image: url("{{ section.settings.category_background_image_desktop | image_url: width: 100 }}")'
      ></div>
    {% endif %}
    {% if section.settings.category_background_image_mobile != blank %}
      <div
        class='xo-background-lazyload category__bg category__bg--mobile'
        style='background-image: url("{{ section.settings.category_background_image_mobile | image_url: width: 100 }}")'
      ></div>
    {% endif %}
    <div
      class='category__bg-color'
      style='background-color:{{section.settings.category_background_color}};background-image:{{section.settings.category_background_gradient}}'
    ></div>
  </div>
  <xo-carousel
    class='category__carousel-vertical'
    xo-vertical
    xo-per-view='{{ perview }}'
    xo-loop
    xo-speed='400'
  >
    <xo-carousel-inner class='category__carousel-inner'>
      <xo-carousel-list>
        {% for block in section.blocks %}
          {% case block.type %}
            {% when 'collection' %}
              <xo-carousel-slide class='category__nav'>
                <div class='category__nav-img'>
                  <a href='{{block.settings.collection.url}}'>
                    {% render 'image', image: block.settings.collection.featured_image %}
                  </a>
                </div>
                <div class='category__nav-text'>
                  <a href='{{block.settings.collection.url}}'>
                    <h3>{{ block.settings.collection.title }}</h3>
                  </a>
                </div>
              </xo-carousel-slide>
          {% endcase %}
        {% endfor %}
      </xo-carousel-list>
    </xo-carousel-inner>
    <xo-carousel-prev class='category__arrow-left'
      ><button>{% render 'icon', name: 'arrow-left', icon_size: '12' %}</button></xo-carousel-prev
    >
    <xo-carousel-next class='category__arrow-right'
      ><button>{% render 'icon', name: 'arrow-right', icon_size: '12' %}</button></xo-carousel-next
    >
  </xo-carousel>
  <xo-carousel
    class='category__carousel-horizon'
    xo-per-view='{{ perview }}'
    xo-loop
    xo-speed='400'
    xo-breakpoints='
      {
        767: {
          perView: 2,
        },
        575: {
          perView: 1,
        },
      }
    '
  >
    <xo-carousel-inner>
      <xo-carousel-list>
        {% for block in section.blocks %}
          {% case block.type %}
            {% when 'collection' %}
              <xo-carousel-slide class='category__nav'>
                <div class='category__nav-img'>
                  <a href='{{block.settings.collection.url}}'>
                    {% render 'image', image: block.settings.collection.featured_image %}
                  </a>
                </div>
                <div class='category__nav-text'>
                  <a href='{{block.settings.collection.url}}'>
                    <h3>{{ block.settings.collection.title }}</h3>
                  </a>
                </div>
              </xo-carousel-slide>
          {% endcase %}
        {% endfor %}
      </xo-carousel-list>
    </xo-carousel-inner>
    <xo-carousel-prev class='category__arrow-left'
      ><button>{% render 'icon', name: 'arrow-left', icon_size: '12' %}</button></xo-carousel-prev
    >
    <xo-carousel-next class='category__arrow-right'
      ><button>{% render 'icon', name: 'arrow-right', icon_size: '12' %}</button></xo-carousel-next
    >
  </xo-carousel>
</xo-animate>
