{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ 'component-collection-hero.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}

{%- style -%}
    /*
     @media screen and (max-width: 749px) {
     .collection-hero--with-image .collection-hero__inner {
     padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
     }
     }
  */

    .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;
      }
    }
{%- endstyle -%}

{%- liquid
  assign collection_title = collection.title | escape | split: '/' | last
  assign collection_products_count = collection.products_count
  assign collection_all_products_count = collection.all_products_count

  assign columns_mobile_int = section.settings.columns_mobile | plus: 0.7
  assign columns_desktop_int = section.settings.columns_desktop | plus: 0.6
  assign recommended_collections = collection.metafields.custom.recommended_collections.value
-%}

{% if recommended_collections != blank %}
  <div class="collection-hero collection-hero--with-image color-{{ section.settings.color_scheme }} gradient">
    <div class="collection-hero__inner section-{{ section.id }}-padding page-width {% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
      {% if section.settings.show_collection_title
        or section.settings.show_collection_description
        or section.settings.show_product_count
      %}
        <div class="collection-hero__text-wrapper">
          {% if section.settings.show_collection_title %}
            <h1 class="collection-hero__title h2">
              <span class="visually-hidden">{{ 'sections.collection_template.title' | t }}: </span>
              {{- collection_title -}}
            </h1>
          {% endif %}

          {%- if section.settings.show_collection_description -%}
            <div class="collection-hero__description rte">{{ collection.description }}</div>
          {%- endif -%}

          {% if section.settings.show_product_count %}
            <div id="CollectionBannerCount" data-id="{{ section.id }}">
              <div
                class="collection-count-wrapper"
                data-all-products-count="{{ collection_all_products_count }}"
                data-product-count="{{ collection_products_count }}"
              >
                <p class="count-text">
                  {% if collection_all_products_count > collection_products_count %}
                    {{
                      'products.facets.banner_count'
                      | t:
                        product_count: collection_products_count,
                        count: collection_all_products_count,
                        collection: collection_title
                    }}
                  {% elsif collection_all_products_count == collection_products_count %}
                    {{
                      'products.facets.banner_count_simple'
                      | t: count: collection_all_products_count, collection: collection_title
                    }}
                  {% else %}
                    {{
                      'products.facets.banner_count_simple'
                      | t: count: collection_all_products_count, collection: collection_title
                    }}
                  {% endif %}
                </p>
                {%- render 'loading-spinner' -%}
              </div>
            </div>
          {% endif %}
        </div>
      {%- endif -%}

      {%- if recommended_collections -%}
        <div class="collection-hero__image-container">
          {% if recommended_collections != blank %}
            <div class="{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
              <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 }}"
              >
                <div class="swiper swiper-slider-{{ section.id }}">
                  <div class="swiper-wrapper">
                    {%- for recommended_collection in recommended_collections -%}
                      {%- liquid
                        assign collection_image = recommended_collection.image
                        assign collection_url = recommended_collection.link
                        assign collection_title = blank

                        if section.settings.show_slides_title
                          assign collection_title = recommended_collection.name
                        endif
                      -%}

                      {%- liquid
                        assign columns = forloop.length
                        if columns > 3
                          assign columns = 3
                        endif
                      -%}

                      <div
                        id="Slide-{{ section.id }}-{{ forloop.index }}"
                        class="swiper-slide collection-list__item color-{{ section.settings.card_color_scheme }} gradient"
                      >
                        {% render 'card-collection',
                          media_aspect_ratio: section.settings.image_ratio,
                          collection_url: collection_url,
                          collection_image: collection_image,
                          collection_title: collection_title,
                          columns: columns
                        %}
                      </div>
                    {%- endfor -%}
                  </div>
                  <div class="swiper-footer">
                    <div class="swiper-button-prev">
                      {{- 'swiper-prev.svg' | inline_asset_content -}}
                    </div>
                    <div class="swiper-button-next">
                      {{- 'swiper-next.svg' | inline_asset_content -}}
                    </div>
                    <div class="swiper-pagination"></div>
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
        </div>
      {%- endif -%}
    </div>
  </div>
{% endif %}

{% schema %}
{
  "name": "t:sections.main-collection-banner.name",
  "class": "section",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.main-collection-banner.settings.paragraph.content"
    },
    {
      "type": "checkbox",
      "id": "show_collection_title",
      "default": true,
      "label": "Show collection title"
    },
    {
      "type": "checkbox",
      "id": "show_collection_description",
      "default": true,
      "label": "t:sections.main-collection-banner.settings.show_collection_description.label"
    },
    {
      "type": "checkbox",
      "id": "show_product_count",
      "default": true,
      "label": "Show product count"
    },
    {
      "type": "checkbox",
      "id": "show_slides_title",
      "label": "Show slides title",
      "default": true
    },
    {
      "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"
    },
    {
      "type": "select",
      "id": "card_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": "Card color scheme",
      "info": "t:sections.all.colors.has_cards_info"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.collection-list.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.collection-list.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.collection-list.settings.image_ratio.options__3.label"
        }
      ],
      "default": "square",
      "label": "t:sections.collection-list.settings.image_ratio.label",
      "info": "t:sections.collection-list.settings.image_ratio.info"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 3,
      "label": "t:sections.collection-list.settings.columns_desktop.label"
    },
    {
      "type": "header",
      "content": "t:sections.collection-list.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.collection-list.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.collection-list.settings.columns_mobile.options__2.label"
        }
      ],
      "default": "1",
      "label": "t:sections.collection-list.settings.columns_mobile.label"
    },
    {
      "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": 0
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 20
    }
  ],
  "presets": [
    {
      "name": "t:sections.main-collection-banner.name"
    }
  ]
}
{% endschema %}