{{ 'section-collection-grid.css' | asset_url | stylesheet_tag }}
{{ 'product-card.css' | asset_url | stylesheet_tag }}
{{ 'custom-swiper.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'section-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'section-slider.css' | asset_url | stylesheet_tag }}</noscript>

{%- style -%}
    .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.50 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.50 | round: 0 }}px;
  }
   @media screen and (min-width: 576px) and (max-width: 749px){
   .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;
    }
  }
  {% if section.settings.collection_layout == 'overlay' and section.settings.collection_description or section.settings.collection_count %}
  .cl-grid.overlay .collection-list__item .card__content .card__information{    padding: 10px;background: rgb(var(--color-background));}
  {% endif %}

  {% if section.settings.collection_arrow == false and section.settings.collection_layout == 'overlay' %}
    .cl-grid.overlay .collection-list__item .card__content .card__information{width:max-content;}
    .cl-grid.overlay .collection-list__item .card__content .card__information .card__heading a{padding:18px 40px;}
  {% endif %}
    @media screen and (max-width: 1439px) {
  .cl-grid  .swiper {cursor:grab;}
    }
{%- for block in section.blocks -%}
  #Slide-{{ section.id }}-{{ forloop.index }} .card-wrapper .card__inner{background-image:url('{{ block.settings.wrapper-bg | image_url: width: 1920 }}');background-repeat: no-repeat;background-size:cover;height:auto;aspect-ratio: 1 / 1;}
  {% endfor %}
.cl-grid  .card .card__inner .card__media a{display:flex;justify-content:center;align-items:center}
  .cl-grid  .card .card__inner .card__media a img{height:230px;width:230px;  clip-path: circle(50%);  border-radius: var(--circle-radius);}
  .cl-grid .card__information .card__heading{margin-bottom:0}

  @media (max-width:990px){
    .cl-grid .card .card__inner .card__media a img{height:200px;width:200px}
  }
    @media (max-width:480px){
    .cl-grid .card .card__inner .card__media a img{height:120px;width:120px}
  }
{%- endstyle -%}

{%- liquid
  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
  assign show_mobile_slider = false
  if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
    assign show_mobile_slider = true
  endif
  if section.settings.swiper_enable
  assign enable_slider = true  
  endif
-%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="cl-grid {{ section.settings.custom_class_name }} {% if section.settings.page_full_width %} page-full-width {% else %} page-width {% endif %} {% if section.settings.page_full_width_spacing %} page-full-width_spacing {% endif %}section-{{ section.id }}-padding isolate">
    <div class="row">
  <div class="collection-list-wrapper  {% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %}">
    {%- unless section.settings.title == blank -%}
      <div class="title-wrapper-with-link{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin content-align--{{ section.settings.column_alignment }}">
        {%- if section.settings.sub_heading != blank -%}  
         <h6 class="sub-heading">{{ section.settings.sub_heading | escape }}</h6>
         {%- endif -%} 
         {%- if section.settings.title != blank -%}  
          <h2 class="title {{ section.settings.heading_size }}">
            {{ section.settings.title | escape }}
          </h2>
          {%- endif -%} 
          {%- if section.settings.description != blank -%}  
          <p class="description">{{ section.settings.description }}</p>
          {%- endif -%}   
          {%- if section.settings.button_label != blank -%}
            <a {% if section.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ section.settings.button_link }}"{% endif %} class="button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}">{{ section.settings.button_label | escape }}</a>
          {%- endif -%}
          </div>
      {%- endunless -%}
      </div>
    

    {% unless enable_slider %}
    <slider-component >
      {% else %}
    <collection-swiper-slider class="slider-mobile-gutter">
      <div data-slider-options='{"loop": "false","desktop": "{{ section.settings.desktop_column }}","laptop": "{{ section.settings.laptop_column }}" ,"tablet": "{{ section.settings.tablet_column }}","mobile": "{{ section.settings.mobile_column }}", "gap":"{{ section.settings.column_gap }}","auto_play": "{{ section.settings.auto_play }}"}'>
      <div class="swiper" data-swiper-slider>
      {%- endunless -%}
      <div class="collection-list  {{ section.settings.collection_layout }} slider contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} {% if enable_slider %} swiper-wrapper{% else %} grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %} {% endif %} collection-list--{{ section.blocks.size }}-items"
        id="Slider-{{ section.id }}"
        role="list"
      >
        {%- liquid
          assign columns = section.blocks.size
          if columns > 3
            assign columns = 3
          endif
        -%}
        {%- for block in section.blocks -%}
          <div id="Slide-{{ section.id }}-{{ forloop.index }}" class="collection-list__item {% if enable_slider %} desk-col-{{ section.settings.desktop_column | replace: '.5', '-half' }} lap-col-{{ section.settings.laptop_column | replace: '.5', '-half' }} tablet-col-{{ section.settings.tablet_column | replace: '.5', '-half' }} mobile-col-{{ section.settings.mobile_column | replace: '.5', '-half' }} {% endif %}  {% unless enable_slider %} grid__item{% if show_mobile_slider %} slider__slide{% endif %}{% else %} swiper-slide{% endunless %}{% if block.settings.collection.featured_image == nil %} collection-list__item--no-media{% endif %}" {{ block.shopify_attributes }}>
          {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
          {%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
          {% render 'card-collection-2', card_collection: block.settings.collection, media_aspect_ratio: section.settings.image_ratio, columns: columns, placeholder_image: placeholder_image %}
          </div>
        {%- endfor -%}
      </div>
      {% unless enable_slider %}
      {%- if show_mobile_slider -%}
        {% if section.settings.arrow_on_mobile %}
        <div class="slider-buttons no-js-hidden">
          <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}">{% render 'icon-caret' %}</button>
          <div class="slider-counter caption">
<!--             <div class="slideshow__control-wrapper d-none">
              {%- for block in section.blocks -%}
              <button class="slider-counter__link slider-counter__link--dots link" aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}" aria-controls="Slider-{{ section.id }}">
                <span class="dot"></span>
              </button>
              {%- endfor -%}
            </div> -->
          </div>
          <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}">{% render 'icon-caret' %}</button>
        </div>
      {% endif %}
      {%- endif -%}
    </slider-component>
    {% else %}
        {% if section.settings.swiper_navigation != blank %}
        <div class="swiper-navigation">
        <div class="swiper-button-next"><span>
          <svg width="18" height="18" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M42.6706 234.667H417.839L304.921 121.749C302.884 119.781 301.258 117.427 300.14 114.825C299.022 112.222 298.434 109.423 298.409 106.59C298.385 103.757 298.924 100.948 299.997 98.3263C301.07 95.7045 302.654 93.3226 304.657 91.3196C306.66 89.3165 309.042 87.7324 311.664 86.6598C314.285 85.5871 317.094 85.0474 319.927 85.072C322.76 85.0966 325.559 85.6851 328.162 86.8032C330.765 87.9212 333.119 89.5464 335.087 91.584L484.42 240.917C488.419 244.918 490.666 250.343 490.666 256C490.666 261.657 488.419 267.082 484.42 271.083L335.087 420.416C331.063 424.302 325.674 426.452 320.081 426.404C314.487 426.355 309.136 424.111 305.181 420.156C301.226 416.201 298.982 410.85 298.934 405.257C298.885 399.663 301.035 394.274 304.921 390.251L417.839 277.333H42.6706C37.0126 277.333 31.5864 275.086 27.5856 271.085C23.5848 267.084 21.3372 261.658 21.3372 256C21.3372 250.342 23.5848 244.916 27.5856 240.915C31.5864 236.914 37.0126 234.667 42.6706 234.667Z" fill="currentcolor"/>
          </svg>
         </span></div>
        <div class="swiper-button-prev"><span>
          <svg width="18" height="18" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M469.333 234.667H94.1653L207.083 121.749C209.12 119.781 210.745 117.427 211.864 114.825C212.982 112.222 213.57 109.423 213.595 106.59C213.619 103.757 213.08 100.948 212.007 98.3263C210.934 95.7045 209.35 93.3226 207.347 91.3196C205.344 89.3165 202.962 87.7324 200.34 86.6598C197.719 85.5871 194.909 85.0474 192.077 85.072C189.244 85.0966 186.445 85.6851 183.842 86.8032C181.239 87.9212 178.885 89.5464 176.917 91.584L27.584 240.917C23.5846 244.918 21.3379 250.343 21.3379 256C21.3379 261.657 23.5846 267.082 27.584 271.083L176.917 420.416C180.941 424.302 186.33 426.452 191.923 426.404C197.517 426.355 202.867 424.111 206.823 420.156C210.778 416.201 213.022 410.85 213.07 405.257C213.119 399.663 210.969 394.274 207.083 390.251L94.1653 277.333H469.333C474.991 277.333 480.418 275.086 484.418 271.085C488.419 267.084 490.667 261.658 490.667 256C490.667 250.342 488.419 244.916 484.418 240.915C480.418 236.914 474.991 234.667 469.333 234.667Z" fill="currentcolor"/>
          </svg>
        </span></div>
        </div>
          {% endif %}
    </div>
    {% if section.settings.swiper_pagination != blank %}
    <div class="swiper-pagination"></div>
    {% endif %}
    </div>
    </collection-swiper-slider>
    {%- endunless -%}
  
    {%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
      <div class="center collection-list-view-all{% if show_mobile_slider %} small-hide medium-hide{% endif %}">
        <a href="{{ routes.collections_url }}" class="button">{{ 'sections.collection_list.view_all' | t }}</a>
      </div>
    {%- endif -%}
  </div>
    </div>     
 </div>
     

{% schema %}
{
  "name": "collection-grid",
  "tag": "section",
  "class": "section section-collection-grid",
  "max_blocks": 15,
  "settings": [
    {
      "type":"checkbox",
      "id":"page_full_width",
       "default": false,
      "label": "t:sections.all.page_full_width.label"
    },
    {
      "type":"checkbox",
      "id":"page_full_width_spacing",
       "default": false,
      "label": "t:sections.all.page_full_width_spacing.label"
    },
     {
      "type": "text",
      "id": "title",
      "default": "Collection List",
      "label": "t:sections.all.title.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h3",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "text",
      "id": "sub_heading",
      "default":"Sub Heading",
      "label": "t:sections.all.sub_heading.label"
    },
     {
      "type": "text",
      "id": "description",
      "default":"Use this text to share the information which you like!.", 
      "label": "t:sections.all.description.label"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Button label",
      "label": "t:sections.all.button_label.label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "t:sections.all.button_link.label"
    },
    {
      "type": "checkbox",
      "id": "button_style_secondary",
      "default": false,
      "label": "t:sections.all.button_style_secondary.label"
      },
    {
      "type": "select",
      "id": "column_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.collection-list.settings.column_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.collection-list.settings.column_alignment.options__2.label"
        }
      ],
      "default": "center",
      "label": "t:sections.collection-list.settings.column_alignment.label"
    },
    {
      "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": "select",
      "id": "image_style",
      "options": [
        {
          "value": "default",
          "label": "t:sections.collection-list.settings.image_style.options__1.label"
        },
        {
          "value": "circle",
          "label": "t:sections.collection-list.settings.image_style.options__2.label"
        }
      ],
      "default": "default",
      "label": "t:sections.collection-list.settings.image_style.label",
      "info": "t:sections.collection-list.settings.image_style.info"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 3,
      "label": "t:sections.collection-list.settings.columns_desktop.label"
    },
       {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": false,
      "label": "t:sections.collection-list.settings.show_view_all.label"
    },
    {
      "type": "select",
      "id": "collection_layout",
      "options": [
        {
          "value": "overlay",
          "label": "t:sections.main-list-collections.settings.collection_layout.options__1.label"
        },
        {
          "value": "defalut",
          "label": "t:sections.main-list-collections.settings.collection_layout.options__2.label"
        }
      ],
      "default": "defalut",
      "label": "t:sections.main-list-collections.settings.collection_layout.label"
    },
     {
      "type": "checkbox",
      "id": "collection_count",
      "default": false,
      "label": "t:sections.collection-list.settings.collection_count.label"
    },
     {
      "type": "checkbox",
      "id": "collection_description",
      "default": false,
      "label": "t:sections.collection-list.settings.collection_description.label"
    },
    {
      "type": "checkbox",
      "id": "collection_arrow",
      "default": false,
      "label": "t:sections.collection-list.settings.collection_arrow.label"
    },
   {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 160,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 160,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    },
    {
    "type": "header",
    "content": "t:sections.all.custom_class_heading.content"
    },
    {
    "type": "text",
    "id": "custom_class_name",
    "label": "t:sections.all.custom_class_name.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.swiper.swiper_slider_title"
    },
    {
      "type": "checkbox",
      "id": "swiper_enable",
      "default": false,
      "label": "t:sections.all.swiper.swiper_slider_enable"
    },
    {
      "type": "range",
      "id": "desktop_column",
      "min": 1,
      "max": 10,
      "step": 1,
      "label": "t:sections.all.swiper.desktop_column",
      "default": 4
    },
     {
      "type": "range",
      "id": "laptop_column",
      "min": 1,
      "max": 10,
      "step": 1,
      "label": "t:sections.all.swiper.laptop_column",
      "default": 4
    },
    {
      "type": "range",
      "id": "tablet_column",
      "min": 1,
      "max": 5,
      "step": 1,
      "label": "t:sections.all.swiper.tablet_column",
      "default": 3
    },
    {
      "type": "range",
      "id": "mobile_column",
      "min": 1,
      "max": 3,
      "step": 1,
      "label": "t:sections.all.swiper.mobile_column",
      "default": 1
    },
    {
      "type": "text",
      "id": "column_gap",
      "label": "t:sections.collection-list.settings.column_gap.label",
      "default": "20"
    },
    {
      "type": "checkbox",
      "id": "swiper_pagination",
      "default": false,
      "label": "t:sections.all.swiper.swiper_pagination"
    },
    {
      "type": "checkbox",
      "id": "swiper_navigation",
      "default": false,
      "label": "t:sections.all.swiper.swiper_navigation"
    },
    {
      "type": "range",
      "id": "auto_play",
      "min": 0,
      "max": 5,
      "step": 1,
      "label": "t:sections.all.swiper.auto_play",
      "default": 0
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.collection-list.settings.swipe_on_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "arrow_on_mobile",
      "default": false,
      "label": "t:sections.all.swiper.controls"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.all.swiper.options__1"
        },
        {
          "value": "2",
          "label": "t:sections.all.swiper.options__2"
        }
      ],
      "default": "1",
      "label": "t:sections.all.swiper.columns_mobile"
    }
  ],
  "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": "wrapper-bg",
    "label": "t:sections.collection-list.blocks.featured_collection.settings.wrapper-bg.label"
    },
      ]
    }
  ],
  "presets": [
    {
      "name": "collection-grid",
      "blocks": [
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        }
      ]
    }
  ]
}
{% endschema %}