{% extends 'base.html' %}
{% load static %}
{% load currency %}
{% currency_context %}


{%block body%}
<main class="main pages mb-80">
    <div class="page-header breadcrumb-wrap">
        <div class="container">
            <div class="breadcrumb">
                <a href="{%url 'home:index' %}" rel="nofollow"><i class="fi-rs-home mr-5"></i>Home</a>
                <span></span> Products List
            </div>
        </div>
    </div>
    <div class="page-content pt-50">
        <div class="container">
            <div class="archive-header-2 text-center">
                <h1 class="display-2 mb-50">Products List</h1>
                <div class="row">
                    <div class="col-lg-5 mx-auto">
                        <div class="sidebar-widget-2 widget_search mb-50">
                            <div class="search-form">
                                <form  action="{% url 'products:product-search'%}" method="post">
                                    {% csrf_token %}
                                    <input name="search-product" type="text" placeholder="Search Items (by name)..." autocomplete="off" required />
                                    <button type="submit"><i class="fi-rs-search"></i></button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
      
            
            {%if qs.has_other_pages %}
            <div class="pagination-area mt-20 mb-20">
                
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-start">
                        {%if qs.has_previous%}
                        <li class="page-item">
                            <a class="page-link" href="?page={{qs.previous_page_number}}"><i class="fi-rs-arrow-small-left"></i></a>
                        </li>
                        {%endif%}
                        <li class="page-item active"><a class="page-link" href="#">{{qs.number}}</a></li>
                        {%if qs.paginator.num_pages > qs.number  %}
                        
                        <li class="page-item"><a class="page-link" href="?page={{qs.number|add:1}}">{{qs.number|add:1}}</a></li>
                        {%endif%}
                         <!-- <li class="page-item"><a class="page-link" href="#">3</a></li> -->
                        <li class="page-item"><a class="page-link dot" href="#">...</a></li>
                        
                        <li class="page-item"><a class="page-link" href="?page={{qs.paginator.num_pages}}">{{qs.paginator.num_pages}}</a></li>
                        {%if qs.has_next%}
                        <li class="page-item">
                            <a class="page-link" href="?page={{qs.next_page_number}}"><i class="fi-rs-arrow-small-right"></i></a>
                        </li>
                        {%endif%}
                    </ul>
                </nav>
            </div>
            {%endif%}
        </div>
    </div>
</main>
{%endblock body%}

{%block script%}
    <!-- Vendor JS-->
    <script src="{% static 'assets/js/vendor/modernizr-3.6.0.min.js'%}"></script>
    <script src="{% static 'assets/js/vendor/jquery-3.6.0.min.js'%}"></script>
    <script src="{% static 'assets/js/vendor/jquery-migrate-3.3.0.min.js'%}"></script>
    <script src="{% static 'assets/js/vendor/bootstrap.bundle.min.js'%}"></script>
    <script src="{% static 'assets/js/plugins/slick.js'%}"></script>
    <script src="{% static 'assets/js/plugins/jquery.syotimer.min.js'%}"></script>
    <script src="{% static 'assets/js/plugins/wow.js'%}"></script>
    <script src="{% static 'assets/js/plugins/jquery-ui.js'%}"></script>
    <script src="{% static 'assets/js/plugins/perfect-scrollbar.js'%}"></script>
    <script src="{% static 'assets/js/plugins/magnific-popup.js'%}"></script>
    <script src="{% static 'assets/js/plugins/select2.min.js'%}"></script>
    <script src="{% static 'assets/js/plugins/waypoints.js'%}"></script>
    <script src="{% static 'assets/js/plugins/counterup.js'%}"></script>
    <script src="{% static 'assets/js/plugins/jquery.countdown.min.js'%}"></script>
    <script src="{% static 'assets/js/plugins/images-loaded.js'%}"></script>
    <script src="{% static 'assets/js/plugins/isotope.js'%}"></script>
    <script src="{% static 'assets/js/plugins/scrollup.js'%}"></script>
    <script src="{% static 'assets/js/plugins/jquery.vticker-min.js'%}"></script>
    <script src="{% static 'assets/js/plugins/jquery.theia.sticky.js'%}"></script>
    <script src="{% static 'assets/js/plugins/jquery.elevatezoom.js'%}"></script>
    <!-- Template  JS -->
    <script src="{% static 'assets/js/main.js'%}"></script>
    <script src="{% static 'assets/js/shop.js'%}"></script>

{%endblock script%}