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

{%- liquid
  assign tag_to_filter = filter_by_tag
  assign columns_desktop = 4
  assign full_width = true
  assign image_ratio = 'adapt'
  assign image_shape = 'default'
  assign show_secondary_image = true
  assign show_vendor = false
  assign show_rating = false
  assign enable_quick_add = false
  assign products_to_show = 3
-%}

{%- for collection in collections -%}
  {% assign parts = collection.title | split: "__" %}

  {% if parts.size == 1 %}
    {% assign found_tag = false %}

    {%- for product in collection.products -%}
      {%- if product.tags contains tag_to_filter -%}
        {% assign found_tag = true %}
      {%- endif -%}
    {%- endfor -%}

    {% if found_tag %}
      <div class="color-scheme isolate gradient">
        <div class="collection section-padding{% if full_width %} collection--full-width{% endif %}" style="margin-bottom: 36px;">
          <div class="collection__title title-wrapper title-wrapper--no-top-margin page-width">
            <h2 class="title inline-richtext h1 scroll-trigger animate--slide-in" style="font-weight: bold; text-align: center;">
              {{ collection.title }}
            </h2>
          </div>

          <slider-component class="slider-mobile-gutter page-width page-width-desktop scroll-trigger animate--slide-in">
            <ul
              id="Slider-{{ collection.id }}"
              class="grid product-grid contains-card contains-card--product grid--{{ columns_desktop }}-col-desktop grid--1-col-tablet-down"
              role="list"
              aria-label="{{ 'general.slider.name' | t }}"
            >
              {%- for product in collection.products limit: products_to_show -%}
                {%- if product.tags contains tag_to_filter -%}
                  <li
                    id="Slide-{{ collection.id }}-{{ forloop.index }}"
                    class="grid__item scroll-trigger animate--slide-in"
                    data-cascade
                    style="--animation-order: {{ forloop.index }};"
                  >
                    {% render 'card-product',
                      card_product: product,
                      media_aspect_ratio: image_ratio,
                      image_shape: image_shape,
                      show_secondary_image: show_secondary_image,
                      show_vendor: show_vendor,
                      show_rating: show_rating,
                      show_quick_add: enable_quick_add,
                      section_id: collection.id
                    %}
                  </li>
                {% endif %}
              {%- endfor -%}
            </ul>
          </slider-component>

          {% if collection.all_products_count > products_to_show %}
            <div class="center collection__view-all scroll-trigger animate--slide-in">
              <a
                href="{{ collection.url }}"
                class="button"
                aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: collection.title | escape }}"
              >
                {{ 'sections.featured_collection.view_all' | t }}
              </a>
            </div>
          {% endif %}
        </div>
      </div>
    {% endif %}
  {% endif %}
{%- endfor -%}