{{ 'section-main-collection.css' | asset_url | stylesheet_tag }}

<div {% render 'section-attr', style: 'z-index:99' %}>
  <xo-filters-top></xo-filters-top>
  <xo-filters xo-section-id='{{ section.id }}' xo-money-format='{{ 100 | money }}'>
    <xo-container {% render 'section-layout' %}>
      {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
        {% render 'filters-refine' %}
        {%- case section.settings.collection_style -%}
          {%- when 'sidebar' -%}
            {% render 'main-collection-style1-custom', product_card_style_layout: 'style1' %}
          {%- when 'fullwidth' -%}
            {% render 'main-collection-style2-custom', product_card_style_layout: 'style1' %}
        {%- endcase -%}
      {% else %}
        {% if section.settings.show_bestsell %}
          {% render 'collection-bestsell-custom',
            product_card_style_layout: 'style1',
            title: section.settings.bestsell_title,
            columns: section.settings.columns_bestsell,
            collection: section.settings.bestsell_collection,
            show_pagination: section.settings.show_pagination,
            show_pagination_mobile: section.settings.show_pagination_mobile
          %}
        {% endif %}
        {% render 'filters-content-custom',
          product_card_style_layout: 'style1',
          products_per_page: section.settings.products_per_page,
          product_loadtype: section.settings.product_loadtype,
          product_layout: section.settings.product_layout,
          columns_mobile: section.settings.columns_mobile,
          columns_desktop: section.settings.columns_desktop
        %}
      {%- endif -%}
    </xo-container>
  </xo-filters>
</div>

<script>
  //toggle sidebar
  const triggerToggle = document.querySelector('#main-collection-style2__trigger-toggle');
  const contentToggle = document.querySelector('#main-collection-style2__toggle');
  triggerToggle?.addEventListener('click', function (e) {
    contentToggle?.classList.toggle('xo-active');
    triggerToggle?.classList.toggle('xo-active');
  });
</script>

{% schema %}
{
  "name": "t:sections.main_collection_product1.name",
  "class": "section-collection-products",
  "tag": "section",
  "settings": [
    {
      "type": "select",
      "id": "width",
      "label": "t:sections.main_collection_product1.settings.width.label",
      "options": [
        {
          "value": "box",
          "label": "Box"
        },
        {
          "value": "wide",
          "label": "Wide"
        }
      ],
      "default": "box"
    },
    {
      "type": "header",
      "content": "t:sections.main_collection_product1.settings.collection_heading.content"
    },
    {
      "type": "range",
      "id": "products_per_page",
      "min": 8,
      "max": 24,
      "step": 1,
      "default": 9,
      "label": "t:sections.main_collection_product1.settings.products_per_page.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 3,
      "label": "t:sections.main_collection_product1.settings.columns_desktop.label"
    },
    {
      "type": "select",
      "id": "collection_style",
      "label": "t:sections.main_collection_product1.settings.collection_style.label",
      "options": [
        {
          "value": "sidebar",
          "label": "t:sections.main_collection_product1.settings.collection_style.option_1.label"
        },
        {
          "value": "fullwidth",
          "label": "t:sections.main_collection_product1.settings.collection_style.option_2.label"
        }
      ],
      "default": "sidebar"
    },
    {
      "type": "select",
      "id": "sidebar",
      "label": "t:sections.main_collection_product1.settings.sidebar.label",
      "options": [
        {
          "value": "left",
          "label": "t:sections.main_collection_product1.settings.sidebar.option_1.label"
        },
        {
          "value": "right",
          "label": "t:sections.main_collection_product1.settings.sidebar.option_2.label"
        }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "filter_style",
      "label": "t:sections.main_collection_product1.settings.filter_style.label",
      "info": "t:sections.main_collection_product1.settings.filter_style.content",
      "options": [
        {
          "value": "toggleSidebar",
          "label": "t:sections.main_collection_product1.settings.filter_style.option_1.label"
        },
        {
          "value": "drawer",
          "label": "t:sections.main_collection_product1.settings.filter_style.option_2.label"
        },
        {
          "value": "dropdown",
          "label": "t:sections.main_collection_product1.settings.filter_style.option_3.label"
        }
      ],
      "default": "drawer"
    },
    {
      "type": "select",
      "id": "product_loadtype",
      "label": "t:sections.main_collection_product1.settings.product_loadtype.label",
      "options": [
        {
          "value": "paginate",
          "label": "t:sections.main_collection_product1.settings.product_loadtype.option_1.label"
        },
        {
          "value": "infinity",
          "label": "t:sections.main_collection_product1.settings.product_loadtype.option_2.label"
        }
      ],
      "default": "paginate"
    },
    {
      "type": "select",
      "id": "product_layout",
      "label": "t:sections.main_collection_product1.settings.product_layout.label",
      "options": [
        {
          "value": "grid",
          "label": "t:sections.main_collection_product1.settings.product_layout.option_1.label"
        },
        {
          "value": "list",
          "label": "t:sections.main_collection_product1.settings.product_layout.option_2.label"
        }
      ],
      "default": "grid"
    },
    {
      "type": "header",
      "content": "t:sections.main_collection_product1.settings.bestsell_heading.content"
    },
    {
      "type": "checkbox",
      "id": "show_bestsell",
      "label": "t:sections.main_collection_product1.settings.show_bestsell.label",
      "default": false
    },
    {
      "type": "text",
      "id": "bestsell_title",
      "label": "t:sections.main_collection_product1.settings.bestsell_title.label",
      "default": "BEST SELLERS"
    },
    {
      "type": "range",
      "id": "columns_bestsell",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 3,
      "label": "t:sections.main_collection_product1.settings.columns_bestsell.label"
    },
    {
      "type": "collection",
      "id": "bestsell_collection",
      "label": "t:sections.main_collection_product1.settings.bestsell_collection.label"
    },
    {
      "type": "checkbox",
      "id": "show_pagination",
      "default": true,
      "label": "t:sections.main_collection_product1.settings.show_pagination.label"
    },
    {
      "type": "checkbox",
      "id": "show_pagination_mobile",
      "default": false,
      "label": "t:sections.main_collection_product1.settings.show_pagination_mobile.label"
    },
    {
      "type": "header",
      "content": "t:sections.main_collection_product1.settings.banner_modern_heading.content"
    },
    {
      "type": "checkbox",
      "id": "show_banner_modern",
      "label": "t:sections.main_collection_product1.settings.show_banner_modern.label",
      "default": false
    },
    {
      "type": "image_picker",
      "id": "banner_modern_image",
      "label": "t:sections.main_collection_product1.settings.banner_modern_image.label",
      "info": "t:sections.main_collection_product1.settings.banner_modern_image.content"
    },
    {
      "type": "url",
      "id": "banner_modern_link",
      "label": "t:sections.main_collection_product1.settings.banner_modern_link.label"
    },
    {
      "type": "header",
      "content": "t:sections.main_collection_product1.settings.banner_heading.content"
    },
    {
      "type": "checkbox",
      "id": "show_banner",
      "label": "t:sections.main_collection_product1.settings.show_banner.label",
      "default": true
    },
    {
      "type": "image_picker",
      "id": "banner_image",
      "label": "t:sections.main_collection_product1.settings.banner_image.label"
    },
    {
      "type": "url",
      "id": "banner_link",
      "label": "t:sections.main_collection_product1.settings.banner_link.label"
    },
    {
      "type": "header",
      "content": "t:sections.main_collection_product1.settings.filt_sort_heading.content"
    },
    {
      "type": "checkbox",
      "id": "enable_filtering",
      "default": true,
      "label": "t:sections.main_collection_product1.settings.enable_filtering.label"
    },
    {
      "type": "checkbox",
      "id": "enable_sorting",
      "default": true,
      "label": "t:sections.main_collection_product1.settings.enable_sorting.label"
    },
    {
      "type": "header",
      "content": "t:sections.main_collection_product1.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.main_collection_product1.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.main_collection_product1.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.main_collection_product1.settings.columns_mobile.options__2.label"
        }
      ]
    },
    {
      "type": "header",
      "content": "t:sections.all.product_card_heading.content"
    },
    {
      "type": "checkbox",
      "id": "product_card_show_image",
      "default": true,
      "label": "t:sections.all.product_card_show_image.label"
    },
    {
      "type": "checkbox",
      "id": "product_card_show_secondary_image",
      "default": true,
      "label": "t:sections.all.product_card_show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "product_card_show_vendor",
      "default": true,
      "label": "t:sections.all.product_card_show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "product_card_show_description",
      "label": "t:sections.all.product_card_show_description.label",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "product_card_show_quick_add",
      "label": "t:sections.all.product_card_show_quick_add.label",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "product_card_show_quick_view",
      "label": "t:sections.all.product_card_show_quick_view.label",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "product_card_show_price",
      "label": "t:sections.all.product_card_show_price.label",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "product_card_show_badge",
      "label": "t:sections.all.product_card_show_badge.label",
      "default": true
    },
    {
      "type": "text",
      "id": "product_card_aspect_ratio",
      "label": "t:sections.all.product_card_aspect_ratio.label",
      "default": "1/1"
    },
    {
      "type": "color_scheme",
      "id": "card_color_scheme",
      "label": "t:sections.all.card_color_scheme.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.bg_color.label"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.bg_gradient.label"
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.all.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.all.padding_bottom.label",
      "default": 50
    }
  ]
}
{% endschema %}
