{{ header }}
<div class="breadcrumb-container collectionBreadcrumb" 
     style="background-image: url(https://sparrow.gcc-demo.com//catalog/view/image/breadcrumCatBg.png);
            background-position: right bottom;">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-5 col-lg-4">
                <h3 class="home-title">Shop</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Donec malesuada ex et finibus lacinia. Vestibulum fauc</p>
            </div>
        </div>
    </div>
</div>

<div id="product-category" class="container">
    <div class="row">
        {{ column_left }}
        <div id="content" class="col">
            {{ content_top }}

            {% if thumb or description %}
            <div class="category_banner">
                {% if description %}
                {# <div class="col-sm-12 category_description">{{ description }}</div> #}
                {% endif %}
            </div>
            {% endif %}

            {% if subcategory_type != 'none' %}
                {% if categories %}
                <div class="refine-search col-sm-12">
                    <div class="category-list">
                        <ul class="{% if subcategory_type == 'slider' %}owl-carousel{% else %}row{% endif %}">
                            {% for category in categories %}
                            <li class="item col-md-2 col-sm-3 col-xs-4">
                                <a href="{{ category.href }}">
                                    <img src="{{ category.subcategory_image }}" />
                                    <span class="subcategory-title">{{ category.name }}</span>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                {% endif %}
            {% endif %}

            {% if products %}
            <div id="display-control" class="product-list-top">
                <div class="row">
                    <div class="pagination-right text-end col-sm-12">
                        <div class="show-wrapper">
                            <div class="col-md-1 text-end show">
                                <label for="input-limit" class="control-label">{{ text_limit }}</label>
                            </div>
                            <div class="col-md-2 text-end limit">
                                <ul id="input-limit" class="pagination-show" onchange="location = this.value;">
                                    {% for limits in limits %}
                                    <li>
                                    <a href="{{ limits.href }}"{% if limits.value == limit %} selected{% endif %}>
                                        {{ limits.text }}
                                    </a>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                        <div class="sort-by-wrapper">
                            <div class="col-md-2 text-end sort-by">
                                <label for="input-sort" class="control-label">{{ text_sort }}</label>
                            </div>
                            <div class="col-md-3 text-end sort">
                                <div class="select-wrapper">
                                    <select id="input-sort" class="form-select" onchange="location = this.value;">
                                        {% for sorts in sorts %}
                                        <option value="{{ sorts.href }}"{% if sorts.value == '%s-%s'|format(sort, order) %} selected{% endif %}>
                                            {{ sorts.text }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="product-list" class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-3">
                {% for product in products %}
                <div class="col">{{ product }}</div>
                {% endfor %}
                {% if product|length > 10 %}

                <div class="load-more my-5 text-center w-100">
                    <a class="custom-btn" href="#" id="load-more-btn">Load more</a>
                </div>
                {% endif %}

            </div>
            {% endif %}

            {% if not categories and not products %}
            <p>{{ text_no_results }}</p>
            <div class="d-inline-block pt-2 pd-2 w-100">
                <div class="float-end">
                    <a href="{{ continue }}" class="custom-btn btn btn-primary">{{ button_continue }}</a>
                </div>
            </div>
            {% endif %}
            {{ content_bottom }}
        </div>
        {{ column_right }}
    </div>
</div>
<script type="text/javascript">
  $(document).ready(function () {
    $('#load-more-btn').on('click', function (e) {
        e.preventDefault(); // Prevent the default action (such as submitting a form or following a link)

        let page = 30; // Initial page number
        let currentUrl = window.location.href + "&limit=25"; // Append limit parameter to the current URL

        // Redirect to the updated URL, causing the page to reload
        window.location.href = currentUrl;
    });
});


</script>
{{ footer }}