{{ 'sidebar-collection.aio.min.css' | asset_url | stylesheet_tag }}
{{ 'collection.aio.min.css' | asset_url | stylesheet_tag }}
{{ 'pagination.aio.min.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign sidebar_mode = section.settings.sidebar_mode
  assign pagination_type = 'default'
  assign mode_view = section.settings.col_mode_view
  assign enable_sort = section.settings.enable_sort
  assign sort_by = collection.sort_by | default: collection.default_sort_by
  assign grid_view = cart.attributes['grid_view'] | default: mode_view

  if section.settings.enable_filter and collection.filters.size > 0
    assign enable_filter = true
  else
    assign enable_filter = false
  endif
-%}

{%- if sidebar_mode != 'none-sidebar' -%}
  {{ 'left-column.aio.min.css' | asset_url | stylesheet_tag }}
  {%- capture collection_sidebar_menu -%}
    <aside class="sidebar d-none d-lg-block" id="collection-sidebar">
      {%- for block in section.blocks -%}
        {%- if block.type == 'menu' -%} 
          {%- render 'sidebar-snippet', type: 'menu', section: section, block: block -%}
        {%- endif -%}
      {%- endfor -%}
    </aside>
  {%- endcapture -%}
  {%- capture collection_sidebar -%}
    {%- render 'collection-sidebar', section: section, block: block -%}
  {%- endcapture -%}
{%- endif -%}

{%- paginate collection.products by section.settings.collection_page_limit -%}
  {%- capture filter_element -%}
    <div class="collection-filters{%- unless enable_filter %} d-none{% endunless -%}" id="main-collection-filters" style="overscroll-behavior: none;">
      <div class="collection-filters_title">{{ 'pages.collection.filter_by' | t }}</div>
      
      <div class="collection-filters-wrapper">
        {%- render 'filter-element', enable_filter: enable_filter, id: 'collection-filters-form', class: 'main-range-slider' -%}
        <div class="group-type-list-wrapper">
          {%- render 'filter-element', enable_filter: enable_filter, class: 'js-range-slider' -%}
        </div> 
      </div>
    </div>
  {%- endcapture -%}

  {%- capture collection_tool_bar -%}
    <div class="mobile-filter-icon{%- unless enable_filter %} d-none{% endunless -%}">
      {%- render 'svg', type: 'filter' -%}
      <span>{{- 'pages.collection.filter_by' | t -}}</span> 
    </div>

    {%- if mode_view != 'none' -%}
      <div class="collection-view-as d-flex align-items-center">
        <div class="grid-list">
          <span class="grid grid-4" title="Small" data-grid="grid-4">
            {%- render 'svg', type: 'grid-view-4' -%}
          </span>
          <span class="grid grid-3" title="Medium" data-grid="grid-3">
            {%- render 'svg', type: 'grid-view-3' -%}
          </span>
          <span class="grid grid-2" title="Large" data-grid="grid-2">
            {%- render 'svg', type: 'grid-view-2' -%}
          </span>
          <span class="grid grid-1" title="List" data-grid="grid-1">
            {%- render 'svg', type: 'grid-view-1' -%}
          </span>
        </div>
      </div>
    {%- endif -%}

    {%- if enable_sort -%}
      <div class="collection-sorting d-flex align-items-center">
        <label for="select-sort-by">{{ 'pages.collection.sort_by' | t }}</label>
        <div class="select-group">
          <select name="sort_by" class="select-sort-by">
            {%- for option in collection.sort_options -%}
              <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
            {%- endfor -%}
          </select>
          {%- render 'svg', type: 'bold-angle-down' -%}
        </div>
      </div>
    {%- endif -%}

    {%- if section.settings.show_products_showing -%}
      <div id="pagination-top-container" class="pagination-container">
        {%- render 'pagination', paginate: paginate -%}
      </div>
    {%- endif -%}
  {%- endcapture -%}

  {%- capture collection_product_grid -%}
    {%- if section.settings.sub_collections_type != 'none' -%}
      {%- include 'sub-collections', section: section, collection: collection -%}
    {%- endif -%}

    <div id="collection-product-grid-container" class="{{ grid_view }}">
      <div class="collection-template_title">
        <h1>{{ collection.title }}</h1>
      </div>

      {%- if section.settings.col_description and collection.description != blank -%}
        <div class="collection-template_description">{{ collection.description }}</div>
      {%- endif -%}

      <div id="collection-product-grid">
        {%- if collection_tool_bar != blank -%}
          <div class="collection-tool-bar d-flex justify-content-between align-items-center">{{ collection_tool_bar }}</div>
        {%- endif -%}

        <div id="main-collection-product-grid">
          {%- if collection.products.size > 0 -%}
            {%- for product in collection.products -%}
              {%- render 'product-item', product: product -%}
            {%- endfor -%}
          {%- else -%}
            <div class="text-left">
              <p>{{ 'pages.collection.not_matching' | t }}</p>
            </div>
          {%- endif -%}
        </div>

        {%- if paginate.pages > 1 -%}
          <div class="pagination-container">
            {%- render 'pagination', paginate: paginate -%}
          </div>
        {%- endif -%}
      </div>
    </div>
  {%- endcapture -%}

  <div class="section-collection-template collection-template{% if enable_filter and sidebar_mode != 'none' %} has-sidebar{% endif %}" data-section-id="{{ section.id }}" data-section-type="collection-template">
    <div id="collection-template-inner">
      <div class="section-body row">
        {%- if sidebar_mode == 'left' -%}
          <div class="col-12 col-lg-3 col-sidebar">
            <button type="button" class="btn-close js-sidebar-close">{%- render 'svg', type: 'close' -%}</button>
            {{ collection_sidebar_menu }}
            {{ filter_element }}
            {{ collection_sidebar }}
          </div>
          <div class="col-12 col-lg-9 col-main">{{ collection_product_grid }}</div>
          
        {%- elsif sidebar_mode == 'right' -%}
          <div class="col-12 col-lg-9 col-main">{{ collection_product_grid }}</div>
          <div class="col-12 col-lg-3 col-sidebar">
            <button type="button" class="btn-close js-sidebar-close">{%- render 'svg', type: 'close' -%}</button>
            {{ collection_sidebar_menu }}
            {{ filter_element }}
            {{ collection_sidebar }}
          </div>

        {%- else -%}
          <div class="col-12 col-sidebar no-sidebar">
            <div class="col-sidebar-inner">
              <button type="button" class="btn-close js-sidebar-close">{%- render 'svg', type: 'close' -%}</button>
              {{ filter_element }}
            </div>
          </div>
          <div class="col-12 col-main no-sidebar">{{ collection_product_grid }}</div>
        {%- endif -%}
      </div>
      
      <script type="application/json" data-collection-settings>
        {
          "enableSort": {{ enable_sort }},
          "paginationType": "{{ pagination_type }}",
          "nextPage": {%- if paginate.next != blank -%}1{%- else -%}0{%- endif -%},
          "currentPage": "{{ paginate.current_page }}",
          "isEmpty": {%- if collection.products.size > 0 -%}false{%- else -%}true{%- endif -%}
        }
      </script>

      <script type="application/json" data-collection-filter-active-values>
        {
          {%- for filter in collection.filters -%}
            "{{ filter.param_name }}": [
              {%- for value in filter.active_values -%}
                "{{ value.value }}"{%- unless forloop.last -%} , {%- endunless -%}
              {%- endfor -%}
            ]{%- unless forloop.last -%} , {%- endunless -%}
          {%- endfor -%}
        }
      </script>
    </div>
  </div>
{%- endpaginate -%}

{%- schema -%}
{
  "name": "t:sections.collection-template.name",
  "tag": "section",
  "settings": [
    {
      "type": "range",
      "id": "collection_page_limit",
      "label": "t:sections.common.items_per_page",
      "step": 1,
      "min": 9,
      "max": 50,
      "default": 12
    },
    {
      "type": "header",
      "content": "t:sections.collection-template.settings.storefront_filters.label"
    },
    {
      "type": "checkbox",
      "id": "enable_filter",
      "label": "t:sections.common.enable_widget",
      "default": true,
      "info": "t:sections.collection-template.settings.storefront_filters.info"
    },
    {
      "type": "range",
      "id": "filter_limit",
      "label": "t:sections.collection-template.settings.storefront_filters.limit",
      "step": 1,
      "min": 1,
      "max": 20,
      "default": 5
    },
    {
      "type": "header",
      "content": "t:sections.collection-template.settings.sub_collections.label"
    },
    {
      "type": "select",
      "id": "sub_collections_type",
      "label": "Select component to show",
      "options": [
        { "value": "metafield", "label": "Metafield" },
        { "value": "menu", "label": "Menu item" },
        { "value": "none", "label": "None" }
      ],
      "default": "metafield"
    },
    {
      "type": "text",
      "id": "subcategory_title",
      "label": "Heading",
      "default": "Categories"
    },
    {
      "type": "link_list",
      "id": "subcategory_menu",
      "label": "Menu item"
    },
    {
      "type": "header",
      "content": "t:sections.collection-template.settings.toolbar.label"
    },
    {
      "type": "checkbox",
      "id": "col_description",
      "label": "t:sections.collection-template.settings.toolbar.collection_description"
    },
    {
      "type": "checkbox",
      "id": "enable_sort",
      "label": "t:sections.collection-template.settings.toolbar.enable_sort",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_products_showing",
      "label": "t:sections.collection-template.settings.toolbar.products_showing",
      "default": true
    },
    {
      "type": "select",
      "id": "col_mode_view",
      "label": "t:sections.collection-template.settings.toolbar.mode_view.label",
      "options": [
        { "value": "grid-4", "label": "t:sections.collection-template.settings.toolbar.mode_view.option_1.label" },
        { "value": "grid-3", "label": "t:sections.collection-template.settings.toolbar.mode_view.option_2.label" },
        { "value": "grid-2", "label": "t:sections.collection-template.settings.toolbar.mode_view.option_3.label" },
        { "value": "grid-1", "label": "t:sections.collection-template.settings.toolbar.mode_view.option_4.label" },
        { "value": "none", "label": "t:sections.common.none" }
      ]
    },
    {
      "type": "header",
      "content": "t:sections.common.sidebar",
      "info": "t:sections.product-template.settings.sidebar.info"
    },
    {
      "type": "select",
      "id": "sidebar_mode",
      "label": "t:sections.common.style",
      "options": [
        { "value": "left", "label": "t:sections.common.left_sidebar" },
        { "value": "right", "label": "t:sections.common.right_sidebar" },
        { "value": "none", "label": "t:sections.common.none_sidebar" }
      ],
      "default": "left"
    }
  ],
  "blocks": [
    {
      "type": "menu",
      "name": "t:sections.product-template.settings.sidebar.sidebar_menu",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "t:sections.common.heading"
        },
        {
          "type": "link_list",
          "id": "menu",
          "label": "t:sections.common.menu_item"
        }
      ]
    },
    {
      "type": "banner",
      "name": "t:sections.product-template.settings.sidebar.sidebar_banner",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.common.image"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.common.link"
        }
      ]
    },
    {
      "type": "products-listing",
      "name": "t:sections.product-template.settings.sidebar.sidebar_products",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "sb_latest_product_title",
          "label": "t:sections.common.heading",
          "default": "Latest Products"
        },
        {
          "type": "collection",
          "id": "sb_latest_product_col",
          "label": "t:sections.common.collection"
        },
        {
          "type": "range",
          "id": "limit",
          "label": "t:sections.common.limit",
          "step": 1,
          "min": 1,
          "max": 12,
          "default": 8
        }
      ]
    },
    {
      "type": "service",
      "name": "t:sections.product-template.settings.sidebar.sidebar_service",
      "limit": 1,
      "settings": [
        {
          "type": "header",
          "content": "t:sections.common.block_item"
        },
        {
          "type": "checkbox",
          "id": "enable_sb_services_1",
          "label": "t:sections.common.enable_widget",
          "default": true
        },
        {
          "type": "textarea",
          "id": "sb_services_icon_1",
          "label": "t:sections.common.svg"
        },
        {
          "type": "text",
          "id": "sb_services_title_1",
          "label": "t:sections.common.text"
        },
        {
          "type": "text",
          "id": "sb_services_caption_1",
          "label": "t:sections.common.subtext"
        },
        {
          "type": "header",
          "content": "t:sections.common.block_item"
        },
        {
          "type": "checkbox",
          "id": "enable_sb_services_2",
          "label": "t:sections.common.enable_widget",
          "default": true
        },
        {
          "type": "textarea",
          "id": "sb_services_icon_2",
          "label": "t:sections.common.svg"
        },
        {
          "type": "text",
          "id": "sb_services_title_2",
          "label": "t:sections.common.text"
        },
        {
          "type": "text",
          "id": "sb_services_caption_2",
          "label": "t:sections.common.subtext"
        },
        {
          "type": "header",
          "content": "t:sections.common.block_item"
        },
        {
          "type": "checkbox",
          "id": "enable_sb_services_3",
          "label": "t:sections.common.enable_widget",
          "default": true
        },
        {
          "type": "textarea",
          "id": "sb_services_icon_3",
          "label": "t:sections.common.svg"
        },
        {
          "type": "text",
          "id": "sb_services_title_3",
          "label": "t:sections.common.text"
        },
        {
          "type": "text",
          "id": "sb_services_caption_3",
          "label": "t:sections.common.subtext"
        },
        {
          "type": "header",
          "content": "t:sections.common.block_item"
        },
        {
          "type": "checkbox",
          "id": "enable_sb_services_4",
          "label": "t:sections.common.enable_widget",
          "default": true
        },
        {
          "type": "textarea",
          "id": "sb_services_icon_4",
          "label": "t:sections.common.svg"
        },
        {
          "type": "text",
          "id": "sb_services_title_4",
          "label": "t:sections.common.text"
        },
        {
          "type": "text",
          "id": "sb_services_caption_4",
          "label": "t:sections.common.subtext"
        },
        {
          "type": "header",
          "content": "t:sections.common.block_item"
        },
        {
          "type": "checkbox",
          "id": "enable_sb_services_5",
          "label": "t:sections.common.enable_widget",
          "default": true
        },
        {
          "type": "textarea",
          "id": "sb_services_icon_5",
          "label": "t:sections.common.svg"
        },
        {
          "type": "text",
          "id": "sb_services_title_5",
          "label": "t:sections.common.text"
        },
        {
          "type": "text",
          "id": "sb_services_caption_5",
          "label": "t:sections.common.subtext"
        }
      ]
    }
  ]
}
{%- endschema -%}