<%- include('../includes/header') %>

    <!-- header END -->

    <div class="page-content bg-white">

        <!-- Inner Banner -->
        <div class="banner-wraper">
            <div class="page-banner" style="background-image:url(images/banner/img1.jpg);">
                <div class="container">
                    <div class="page-banner-entry text-center">
                        <h1>Our Products</h1>
                        <!-- Breadcrumb row -->
                        <nav aria-label="breadcrumb" class="breadcrumb-row">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item"><a href="/"><svg xmlns="http://www.w3.org/2000/svg"
                                            width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            class="feather feather-home">
                                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                            <polyline points="9 22 9 12 15 12 15 22"></polyline>
                                        </svg> Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Products</li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <img class="pt-img2 animate2" src="images/shap/circle-dots.png" alt="">
                <img class="pt-img3 animate-rotate" src="images/shap/plus-blue.png" alt="">
            </div>
            <!-- Breadcrumb row END -->
        </div>
        <!-- Inner Banner end -->
        <!-- Our Progress -->
        <section class="section-area section-sp5 work-area"
            style="background-image: url(images/background/line-bg1.png); background-repeat: no-repeat; background-position: center; background-size: 100%;">
            <div class="container-sm">
                <div class="heading-bx text-center">

                    <h1>PRODUCTS</h1>
                </div>
                <div class="row justify-content-center">
                    <% if(productsLength> 0){ products.forEach(element=> { %>
                        <div class="col-lg-4 col-sm-6 mb-30">
                            <div class="feature-container feature-bx2 feature1">
                                <div class="feature-box-xl mb-30 detailsLink" data-pcode="<%= element.p_code %>">
                                    <span class="icon-cell">
                                        <img src="<%= element.thumbnail %>" alt="">
                                    </span>
                                </div>
                                <div class="icon-content">
                                    <h6 class="ttr-title" style="color: #565acf;
                                        font-weight: 600;">
                                        <%= element.title %>
                                            </>
                                    </h6>
                                    <div class="price-center">
                                        <p class="price">₹<%= element.selling_price %>
                                        </p>
                                        <div
                                            class="border  p-2 rounded showQty-<%= element.id %> <%= element.inCart ? 'd-inline ' : 'd-none' %>">
                                            <span class="buyPro btn-secondary p-1 rounded" data-type="minus"
                                                data-id="<%= JSON.stringify(element) %>"><i class="fa fa-minus"
                                                    aria-hidden="true"></i></span>
                                            <span
                                                class="px-3 text-black qty-<%= element.id %> <%= JSON.stringify(element) %>">
                                                <%= element.quantity %>
                                            </span>
                                            <span class="buyPro btn-secondary p-1 rounded"
                                                data-id="<%= JSON.stringify(element) %>" data-type="add"><i
                                                    class="fa fa-plus" aria-hidden="true"></i></span>
                                        </div>
                                        <span data-id="<%= JSON.stringify(element) %>" data-type="remove"
                                            class="btn-danger p-1 rounded buyPro ml-1 showQty-<%= element.id %> <%= element.inCart ? '' : 'd-none' %>"><i
                                                class="fa fa-times" aria-hidden="true"></i></span>

                                        <button data-id="<%= JSON.stringify(element) %>" data-type="add"
                                            class="product-buy buyPro btn btn-primary btn-sm hideQty-<%= element.id %> <%= element.inCart ? 'd-none' : '' %>">Add
                                            To Cart<i class="btn-icon-bx fas fa-plus"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <% }) } else { %>
                            <div class="col-lg-4 col-sm-6 mb-30">
                                <div class="work-bx">
                                    <div class="work-content">
                                        <img src="images/product-not-found.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                            <% } %>
                </div>
            </div>
            <img class="pt-img1 animate1" src="images/shap/circle-orange.png" alt="">
            <img class="pt-img2 animate2" src="images/shap/plus-orange.png" alt="">
            <img class="pt-img3 animate3" src="images/shap/circle-dots.png" alt="">
        </section>

    </div>
    <!-- header END -->
    <button onclick='window.scrollTo({top: 0, behavior: "smooth"});' class="back-to-top fa fa-chevron-up"></button>
    </div>
    <%- include('../includes/footer') %>