<%- include('../partials/header') -%>
  <link rel="stylesheet" href="/product/products.css">
<% var limit%>
  <h3 id="search-key">
    <%=searchkey%>
  </h3>
  <br>
  <div id="products">
    <%        var prods_count=products.length;
    if(products.length){ %>
    <nav aria-label="Page navigation example">
      <ul class="pagination justify-content-end">
        <%
        cat_prod_count=locals.cat_prod_count? cat_prod_count:1;
        page_number=locals.page_number? page_number:1;
        var last_id=products[prods_count-1]._id;
        var first_id=products[0]._id;
        var pages_count=cat_prod_count/50;
        console.log(page_number, pages_count, prods_count, cat_prod_count, last_id);
        %>
        <li class="page-item <%=page_number==1? 'disabled' : ''%>">
          <a class="page-link" href="/category/<%=cat._id%>/<%=page_number-1%>?last_id=<%=first_id%>&limit=-50">&lt;</a>
        </li>
        <% if(page_number>1){ %>
        <li class="page-item"><a class="page-link" href="/category/<%=cat._id%>/<%=parseInt(page_number)-1%>?last_id=<%=last_id%>&limit=-50"><%=parseInt(page_number)-1%></a></li>
        <%}%>
        <li class="page-item active"><a class="page-link" href=""><%=page_number%></a></li>
        <%if(page_number<pages_count){ %>
          <li class="page-item"><a class="page-link" href="/category/<%=cat._id%>/<%=parseInt(page_number)+1%>?last_id=<%=last_id%>&limit=50"><%=parseInt(page_number)+1%></a></li>
        <%}%>
        <li class="page-item <%=page_number>=pages_count? 'disabled' : ''%>">
          <a class="page-link" href="/category/<%=cat._id%>/<%=parseInt(page_number)+1%>?last_id=<%=last_id%>&limit=50">&gt;</a>
        </li>
      </ul>
    </nav>

    <div class="row">
      <% products.forEach(function(product){%>
        <div class="col-md-3">
          <figure class="card card-product">
            <div class="img-wrap" style="position: relative;">
              <a href="/product/details/<%=product._id%>"><img src="<%=product.images[0].secure_url%>"></a>
              <!--div class="top-right" style="">Top right</div-->
            </div>
            <figcaption class="info-wrap">
              <h6 class="title text-dots"><a href="/product/details/<%=product._id%>">
                  <%=product.name%>
                </a></h6>
              <div class="action-wrap">
                <div>
                  <form class="order-form" action="/order_checkout" method="GET">
                    <input style="display: none;" type="text" name="qty" id="" value="1">
                    <input style="display: none;" type="text" name="product_id" id="" value="<%=product._id%>">
                    <button onclick="add_to_cart('<%=product._id%>')" class="btn btn-primary btn-sm float-right order-btn"> Order </button>
                  </form>
                  <a class="btn btn-success btn-sm float-right add-cart-btn" onclick="add_to_cart('<%=product._id%>')">
                    Add
                    <img class="add-img" src="/images/icons/shopping-cart2.svg" alt=""></a>
                  <h6 class="in-stock-text <%=product.in_stock? 'in':'out'%>">
                    <%=product.in_stock? 'In Stock' :'Sold Out'%>
                  </h6>
                </div>
                <div class="price-wrap h5">
                  <span class="price-new">
                    <%=product.price%> DH
                  </span>
                  <!--del class="price-old">29,900 DH</del-->
                </div> <!-- price-wrap.// -->
              </div> <!-- action-wrap -->
            </figcaption>
          </figure> <!-- card // -->
        </div> <!-- col // -->
        <% }) %>

    </div> <!-- row.// -->

    <nav aria-label="Page navigation example">
      <ul class="pagination justify-content-end">
        <%
        console.log(prods_count);
        var last_id=products[prods_count-1]._id;
        var first_id=products[0]._id;
        var pages_count=cat_prod_count/50;
        console.log(page_number, pages_count, prods_count, cat_prod_count, last_id);
        %>
        <li class="page-item <%=page_number==1? 'disabled' : ''%>">
          <a class="page-link" href="/category/<%=cat._id%>/<%=page_number-1%>?last_id=<%=first_id%>&limit=-50">&lt;</a>
        </li>
        <% if(page_number>1){ %>
        <li class="page-item"><a class="page-link" href="/category/<%=cat._id%>/<%=parseInt(page_number)-1%>?last_id=<%=last_id%>&limit=-50"><%=parseInt(page_number)-1%></a></li>
        <%}%>
        <li class="page-item active"><a class="page-link" href=""><%=page_number%></a></li>
        <%if(page_number<pages_count){ %>
          <li class="page-item"><a class="page-link" href="/category/<%=cat._id%>/<%=parseInt(page_number)+1%>?last_id=<%=last_id%>&limit=50"><%=parseInt(page_number)+1%></a></li>
        <%}%>
        <li class="page-item <%=page_number>=pages_count? 'disabled' : ''%>">
          <a class="page-link" href="/category/<%=cat._id%>/<%=parseInt(page_number)+1%>?last_id=<%=last_id%>&limit=50">&gt;</a>
        </li>
      </ul>
    </nav>
<%}%>
  </div>


  <%- include('../partials/footer') -%>