{%  extends('frontend/layout/base.html.twig')  %}
{% set title = 'Products' %}
{% block content %}
<section class="page-title-area">
    <div class="container">
        <div class="page-title-content">
            <h1>Products List</h1>
            <ul>
                <li><a href="{{ path('index') }}">Home</a></li>
                <li>Products List</li>
            </ul>
        </div>
    </div>
</section>
<section class="products-area ptb-70">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-12">
                <div class="woocommerce-widget-area">



                    <div class="woocommerce-widget brands-list-widget">

                        <h3 class="woocommerce-widget-title">Category</h3>

                        <ul class="brands-list-row">
                            {% if currcat == null %}
                            <li class="active"><a href="javascript:void(0)">All</a></li>
                                {% else %}
                                    <li><a href="{{ path('app_frontend_productslist',{'idd':1}) }}">All</a></li>
                            {% endif %}
                            {# @var cat \App\Entity\Category #}
                            {% for cat in category %}
                                {% if currcat == cat.name %}
                                                     <li class="active"><a href="javascript:void(0)">{{ cat.name }}</a></li>
                                    {% else %}
                                        <li><a href="{{ path('app_frontend_productslist',{'idd':1,'cat':cat.id}) }}">{{ cat.name }}</a></li>
                                {% endif %}


                           {% endfor %}
                        </ul>
                    </div>



                </div>
            </div>

            <div class="col-lg-9 col-md-12">
                <div class="drodo-grid-sorting row align-items-center">
                    <div class="col-lg-6 col-md-6 result-count">
                        <p>We found <span class="count">{{ productcount }}</span> products available for you</p>

                    </div>
                    <div class="col-lg-6 col-md-6 ordering">
                        <div class="select-box">
                            <label>Supplier:</label>
                            <select onchange="handleSelect(this)">
                                <option value="{{ path('app_frontend_productslist') }}">All</option>
                                {% for supplier in suppliers %}
                                    {% if selected is defined and selected != null %}
                                        {% if selected == supplier.SupplierName %}
                                            <option value="javascript:void(0)" selected>{{ supplier.SupplierName }}</option>
{% else %}
    <option value="{{ path('app_frontend_productslist_search_supplier',{'name':supplier.SupplierName}) }}">{{ supplier.SupplierName }}</option>
                                            {% endif %}
                                    {% else %}
                                            <option value="{{ path('app_frontend_productslist_search_supplier',{'name':supplier.SupplierName}) }}">{{ supplier.SupplierName }}</option>
                                    {% endif %}

                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    {% for product in products %}
                     {# @var product \App\Entity\Products #}
                    <div class="col-lg-4 col-md-4 col-sm-6">
                        <div class="single-products-box">
                            <div class="image">
                                <a href="{{ path('app_frontend_productview',{'id':product.id}) }}" class="d-block"><img src="{{ uploaded_asset(product.itempicturename | first) | imagine_filter('products_image_index') }}" alt="image"></a>
                                <div class="new"><a href="{{ path('app_frontend_productslist',{'idd':1,'cat':product.category.id}) }}">{{ product.category.name }}</a></div>
                            </div>

                            <div class="content">
                                <h3><a href="{{ path('app_frontend_productview',{'id':product.id}) }}">{{ product.name }}</a></h3>
                                {% if product.price != null %}
                                <div class="price">
                                    <span class="new-price">${{ product.price }}</span>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}

                    <div class="col-lg-12 col-md-12">

                        <div class="pagination-area text-center">
                            {% if currpage == 1 %}
                            <span href="javascript:void(0)" class="prev page-numbers"><i class='bx bx-chevrons-left'></i></span>
                                {% else %}
                                    <a href="{{ (pathh) ~ ('/' ~ (currpage - 1)) }}" class="prev page-numbers"><i class='bx bx-chevrons-left'></i></a>
                            {% endif %}
                            {% for i in 1..pages %}
                                {% if currpage == i %}
                                 <span class="page-numbers current" aria-current="page">{{ i }}</span>
                                    {% else %}
                                        <a href="{{ (pathh) ~ ('/' ~ (i))}}" class="page-numbers">{{ i }}</a>
                                {% endif %}

                            {% endfor %}
                            {% if currpage == pages %}
                                <span href="javascript:void(0)" class="next page-numbers"><i class='bx bx-chevrons-right'></i></span>
                            {% else %}
                                <a href="{{ (pathh) ~ ('/' ~ (currpage + 1)) }}" class="next page-numbers"><i class='bx bx-chevrons-right'></i></a>
                            {% endif %}

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}