<div class="collection-product-grid container" {% render 'overwrite-theme-style', settings: section.settings %}>
{% paginate collection.products by 8 %}

    <h2 class="headline">{{ collection.title }}</h2>

    {%- if section.settings.show_filter or section.settings.show_sort -%}
    {% comment %} ===== Mobile Version ===== {% endcomment %}
    <div class="collection-product-grid-filterbar-mobile">
        <div class="collection-product-grid-filterbar-mobile-button no-click-highlight">
            {% render 'icon-filter' %}
            {{ 'general.collection.filter_and_sort' | t }}
        </div>

        <span>
            {{ collection.products_count }} {{ 'general.collection.products' | t }}
        </span>
    </div>

    {% comment %} ===== Desktop Version ===== {% endcomment %}
    <form class="collection-product-grid-filterbar">
        {%- if section.settings.show_filter -%}
        {%- for filter in collection.filters -%}
            <div class="collection-product-grid-filter">
                <div class="collection-product-grid-filter-header">
                    {{ filter.label }} {%- if filter.active_values.size > 0 -%}({{ filter.active_values.size }}){%- endif -%}
                    {% render 'icon-arrow-right' %}
                </div>

                <div class="collection-product-grid-filter-content">
                    {%- case filter.type -%}
                    {%- when 'boolean' -%}
                    {%- when 'list' -%}
                        {%- for filter_value in filter.values -%}
                            <label class="collection-product-grid-filter-content-option {% if filter_value.count == 0 and filter_value.active == false %}disabled{% endif %}" for="Filter-{{ filter.param_name }}-{{ forloop.index }}">
                                <input type="checkbox"
                                    name="{{ filter_value.param_name }}"
                                    value="{{ filter_value.value }}"
                                    id="Filter-{{ filter.param_name }}-{{ forloop.index }}"
                                    {% if filter_value.active -%}checked{%- endif %}
                                    {% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}
                                >
                                {{ filter_value.label }}
                            </label>
                        {%- endfor -%}

                    {%- when 'price_range' -%}    
                    {%- endcase -%}

                    <div class="collection-product-grid-filter-content-footer">
                        <input type="submit" class="btn" value="{{ 'general.collection.filter_submit' | t }}">
                        <a href="{{ collection.url }}" class="collection-product-grid-filter-content-footer-reset">{{ 'general.collection.filter_reset' | t }}</a>
                    </div>
                </div>
            </div>
        {%- endfor -%}
        {%- endif -%}

        {%- if section.settings.show_sort -%}
        <div class="collection-product-grid-sort">
            {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
            <select name="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>
        </div>
        {%- endif -%}
    </form>
    {%- endif -%}

    <div class="collection-product-grid-cards collection-product-grid-cards-{{ section.settings.desktop_columns }}-columns collection-product-grid-cards-{{ section.settings.mobile_columns }}-columns-mobile {% unless section.settings.card_show_form_variant_labels %} hide-variant-labels{% endunless %}">
        {% for product in collection.products %}
            {% render 'card-product', product: product, settings: section.settings %}
        {% endfor %}
    </div>

    <div class="collection-product-grid-loading">
        {% render 'image', assetName: "Icon-Loading-Indicator.gif" %}
    </div>
    
{% endpaginate %}
</div>

{% comment %} ===== Mobile Drawer ===== {% endcomment %}
<div id="collection-filter-drawer">
    <div id="collection-filter-drawer-overlay"></div>
    
    <form id="collection-filter-drawer-content">
        <div class="collection-filter-drawer-header">
            <h2>{{ 'general.collection.filter_and_sort' | t }}</h2>
            {% render 'icon-close' %}
        </div>
    
        <div class="collection-filter-drawer-contents">
            <div class="collection-filter-drawer-filter">
                <h3>{{ 'general.collection.sort_by' | t }}</h3>

                <div class="collection-filter-drawer-filter-options">
                    <div class="collection-product-grid-sort">
                        {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
                        <select name="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>
                    </div>
                </div>
            </div>

            {%- for filter in collection.filters -%}
                <div class="collection-filter-drawer-filter">
                    <h3>{{ filter.label }}</h3>
    
                    <div class="collection-filter-drawer-filter-options">
                        {%- case filter.type -%}
                        {%- when 'boolean' -%}
                        {%- when 'list' -%}
                            {%- for filter_value in filter.values -%}
                                <label class="collection-product-grid-filter-content-option {% if filter_value.count == 0 and filter_value.active == false %}disabled{% endif %}" for="Filter-Mobile-{{ filter.param_name }}-{{ forloop.index }}">
                                    <input type="checkbox"
                                        name="{{ filter_value.param_name }}"
                                        value="{{ filter_value.value }}"
                                        id="Filter-Mobile-{{ filter.param_name }}-{{ forloop.index }}"
                                        {% if filter_value.active -%}checked{%- endif %}
                                        {% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}
                                    >
                                    {{ filter_value.label }}
                                </label>
                            {%- endfor -%}
    
                        {%- when 'price_range' -%}    
                        {%- endcase -%}
                    </div>
                </div>
            {%- endfor -%}
        </div>

        <div class="collection-filter-drawer-footer collection-product-grid-filter-content-footer">
            <input type="submit" class="btn" value="{{ 'general.collection.filter_submit' | t }}">
            <a href="{{ collection.url }}" class="collection-product-grid-filter-content-footer-reset">{{ 'general.collection.filter_reset' | t }}</a>
        </div>
    </form>
</div>

{% schema %}
{
    "name": "t:sections.collection-product-grid.name",
    "settings": [
        {
            "type": "header",
            "content": "t:sections.collection-product-grid.settings.product_card"
        },
        {
            "type": "select",
            "id": "card_image_ratio",
            "default": "auto",
            "label": "t:sections.collection-product-grid.settings.card_image_ratio",
            "options": [
                {
                    "value": "auto",
                    "label": "t:sections.collection-product-grid.settings.card_image_ratio_auto"
                },
                {
                    "value": "portrait",
                    "label": "t:sections.collection-product-grid.settings.card_image_ratio_portrait"
                },
                {
                    "value": "square",
                    "label": "t:sections.collection-product-grid.settings.card_image_ratio_square"
                }
            ]
        },
        {
            "type": "checkbox",
            "id": "card_show_badge",
            "label": "t:sections.collection-product-grid.settings.card_show_badge",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "card_left_align",
            "label": "t:sections.collection-product-grid.settings.card_left_align",
            "default": false
        },
        {
            "type": "checkbox",
            "id": "card_show_variant",
            "label": "t:sections.collection-product-grid.settings.card_show_variant",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "card_show_border",
            "label": "t:sections.collection-product-grid.settings.card_show_border",
            "default": false
        },
        {
            "type": "checkbox",
            "id": "card_show_form",
            "label": "t:sections.collection-product-grid.settings.card_show_form",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "show_quantity",
            "label": "t:sections.collection-product-grid.settings.show_quantity",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "card_show_form_variant_labels",
            "label": "t:sections.collection-product-grid.settings.card_show_form_variant_labels",
            "default": true
        },
        {
            "type": "select",
            "id": "cart_type",
            "default": "slider",
            "label": "t:sections.product-data.blocks.buy_buttons.settings.cart_type",
            "options": [
                {
                    "value": "slider",
                    "label": "t:sections.product-data.blocks.buy_buttons.settings.cart_type_slider"
                },
                {
                    "value": "page",
                    "label": "t:sections.product-data.blocks.buy_buttons.settings.cart_type_page"
                },
                {
                    "value": "none",
                    "label": "t:sections.product-data.blocks.buy_buttons.settings.cart_type_none"
                }
            ]
        },
        {
            "type": "checkbox",
            "id": "show_filter",
            "label": "t:sections.collection-product-grid.settings.show_filter",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "show_sort",
            "label": "t:sections.collection-product-grid.settings.show_sort",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "card_show_reviews",
            "label": "t:sections.collection-product-grid.settings.card_show_reviews",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "card_show_conrise_reviews",
            "label": "t:sections.collection-product-grid.settings.card_show_conrise_reviews",
            "default": false
        },
        {
            "type": "text",
            "id": "card_conrise_review_stars_metafield",
            "label": "t:sections.collection-product-grid.settings.card_conrise_review_stars_metafield",
            "info": "t:sections.collection-product-grid.settings.card_conrise_review_stars_metafield_info"
        },
        {
            "type": "text",
            "id": "card_conrise_review_number_metafield",
            "label": "t:sections.collection-product-grid.settings.card_conrise_review_number_metafield",
            "info": "t:sections.collection-product-grid.settings.card_conrise_review_number_metafield_info"
        },
        {
            "type": "range",
            "id": "desktop_columns",
            "label": "t:sections.collection-product-grid.settings.desktop_columns",
            "min": 1,
            "max": 8,
            "step": 1,
            "unit": "px",
            "default": 4
        },
        {
            "type": "range",
            "id": "mobile_columns",
            "label": "t:sections.collection-product-grid.settings.mobile_columns",
            "min": 1,
            "max": 8,
            "step": 1,
            "unit": "px",
            "default": 2
        },
        {
            "type": "text",
            "id": "subtitle_metafield",
            "label": "t:sections.collection-product-grid.settings.subtitle_metafield",
            "info": "t:sections.collection-product-grid.settings.subtitle_metafield_info"
        },
        {
            "type": "header",
            "content": "t:sections.product-data.blocks.price.settings.discount"
        },
        {
            "type": "select",
            "id": "discount_badge_type",
            "default": "percentage",
            "label": "t:sections.product-data.blocks.price.settings.badge_type",
            "options": [
                {
                    "value": "no",
                    "label": "t:sections.product-data.blocks.price.settings.badge_type_no"
                },
                {
                    "value": "percentage",
                    "label": "t:sections.product-data.blocks.price.settings.badge_type_percentage"
                },
                {
                    "value": "value",
                    "label": "t:sections.product-data.blocks.price.settings.badge_type_value"
                }
            ]
        },
        {
            "type": "range",
            "id": "discount_badge_border_radius",
            "label": "t:sections.product-data.blocks.price.settings.badge_border_radius",
            "min": 0,
            "max": 20,
            "step": 1,
            "unit": "px",
            "default": 5
        },
        {
            "type": "color",
            "id": "disount_badge_color",
            "label": "t:sections.product-data.blocks.price.settings.badge_color",
            "default": "#000000"
        },
        {
            "type": "color",
            "id": "discount_badge_text_color",
            "label": "t:sections.product-data.blocks.price.settings.badge_text_color",
            "default": "#ffffff"
        },
        {
            "type": "range",
            "id": "discount_badge_font_size",
            "label": "t:sections.product-data.blocks.price.settings.badge_font_size",
            "min": 0,
            "max": 40,
            "step": 1,
            "unit": "px",
            "default": 0,
            "info": "t:sections.product-data.blocks.price.settings.badge_font_size_info"
        },
        {
            "type": "color",
            "id": "card_border_color",
            "label": "t:sections.collection-product-grid.settings.card_border_color",
            "info": "t:sections.collection-product-grid.settings.card_border_color_info"
        },
        {
            "type": "color",
            "id": "card_background_color",
            "label": "t:sections.collection-product-grid.settings.card_background_color",
            "info": "t:sections.collection-product-grid.settings.card_background_color_info"
        },
        {
            "type": "color",
            "id": "badge_background_color",
            "label": "t:sections.collection-product-grid.settings.badge_background_color",
            "info": "t:sections.collection-product-grid.settings.badge_background_color_info"
        },
        {
            "type": "color",
            "id": "badge_text_color",
            "label": "t:sections.collection-product-grid.settings.badge_text_color",
            "info": "t:sections.collection-product-grid.settings.badge_text_color_info"
        },
        {
            "type": "header",
            "content": "t:sections.general.margin"
        },
        {
            "type": "range",
            "id": "overwrite_theme_padding_top",
            "label": "t:sections.collection-product-grid.settings.overwrite_theme_padding_top",
            "min": -50,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "range",
            "id": "overwrite_theme_padding_bottom",
            "label": "t:sections.collection-product-grid.settings.overwrite_theme_padding_bottom",
            "min": -50,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0
        }
    ]
}
{% endschema %}