{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'collection-list-slider.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }

  @media screen and (max-width: 749px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.mobile_padding_top }}px;
      padding-bottom: {{ section.settings.mobile_padding_bottom }}px;
    }
  }
{%- endstyle -%}


{%- liquid
  assign columns_mobile_int = section.settings.columns_mobile | plus: 0.2
  assign columns_desktop_int = section.settings.columns_desktop | plus: 0.6
-%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="collection-list-wrapper page-width isolate{% if section.settings.title == blank %} no-heading{% endif %}{% if section.blocks.size > collections.size %} no-mobile-link{% endif %} section-{{ section.id }}-padding">
    {%- unless section.settings.title == blank -%}
      <div class="title-wrapper-with-link title-wrapper--no-top-margin">
        <h2 id="SectionHeading-{{ section.id }}" class="collection-list-title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
          {{ section.settings.title }}
        </h2>
      </div>
    {%- endunless -%}

    <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 }} collection-list-slider">
          <div class="swiper-wrapper">
            {%- for block in section.blocks -%}
              {%- liquid
                assign collection = block.settings.collection
                assign collection_image = collection.featured_image
                assign collection_url = collection.url
                assign collection_title = collection.title

                if block.settings.image != blank
                  assign collection_image = block.settings.image
                endif
                if block.settings.card_link != blank
                  assign collection_url = block.settings.card_link
                endif
                if block.settings.title != blank
                  assign collection_title = block.settings.title
                endif
              -%}

              {%- liquid
                assign columns = section.blocks.size
                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"
                {{ block.shopify_attributes }}>
                {% render 'card-collection'
                  , card_collection: collection
                  , media_aspect_ratio: section.settings.image_ratio
                  , collection_url: collection_url
                  , collection_image: collection_image
                  , collection_title: collection_title
                  , columns: columns
                  , disable_lazyload: section.settings.disable_lazyload
                %}
              </div>
            {%- endfor -%}
          </div>
          <div class="swiper-footer side-arrows-container">
            <div class="swiper-button-prev swiper-button">
              {{- 'swiper-prev.svg' | inline_asset_content -}}
            </div>
            <div class="swiper-button-next swiper-button">
              {{- 'swiper-next.svg' | inline_asset_content -}}
            </div>
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Collection list slider",
    "tag": "section",
    "class": "section section-collection-slider",
    "max_blocks": 15,
    "disabled_on": {
      "groups": ["header", "footer"]
    },
    "settings": [
      {
        "type": "inline_richtext",
        "id": "title",
        "default": "t:sections.collection-list.settings.title.default",
        "label": "t:sections.collection-list.settings.title.label"
      },
      {
        "type": "select",
        "id": "heading_size",
        "options": [
          {
            "value": "h4",
            "label": "t:sections.all.heading_size.options__1.label"
          },
          {
            "value": "h3",
            "label": "t:sections.all.heading_size.options__2.label"
          },
          {
            "value": "h2",
            "label": "t:sections.all.heading_size.options__3.label"
          },
          {
            "value": "h1",
            "label": "t:sections.all.heading_size.options__4.label"
          }
        ],
        "default": "h1",
        "label": "t:sections.all.heading_size.label"
      },
      {
        "type": "header",
        "content": "t:sections.collection-list.settings.header_layout.content"
      },
      {
        "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"
      },
      {
        "type": "range",
        "id": "columns_desktop",
        "min": 1,
        "max": 6,
        "step": 1,
        "default": 3,
        "label": "t:sections.collection-list.settings.columns_desktop.label"
      },
      {
        "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",
        "info": "t:sections.all.colors.has_cards_info"
      },
      {
        "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": "checkbox",
        "id": "disable_lazyload",
        "label": "Disable lazyload",
        "default": false
      },
      {
        "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": "Desktop padding"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_top",
        "default": 36
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_bottom",
        "default": 36
      },
      {
        "type": "header",
        "content": "Mobile padding"
      },
      {
        "type": "range",
        "id": "mobile_padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_top",
        "default": 36
      },
      {
        "type": "range",
        "id": "mobile_padding_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_bottom",
        "default": 36
      }
    ],
    "blocks": [
      {
        "type": "featured_collection",
        "name": "t:sections.collection-list.blocks.featured_collection.name",
        "settings": [
          {
            "type": "collection",
            "id": "collection",
            "label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "image",
            "info": "Collection image override"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Title"
          },
          {
            "type": "url",
            "id": "card_link",
            "label": "Card link",
            "info": "Collection link override"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Collection list slider",
        "blocks": [
          {
            "type": "featured_collection"
          },
          {
            "type": "featured_collection"
          },
          {
            "type": "featured_collection"
          }
        ]
      }
    ]
  }
{% endschema %}