<%- include('./partials/header') -%>
  <link rel="stylesheet" href="/home/home.css" />
  <div class="col-xs-12">
    <div id="bg-img-home" class="image-text-overlay text-middle-left text-white" style="
      background-image: url(https://solutions.covestro.com/-/media/covestro/solution-center/industries/images/stage-images/i5_hubpage_electronics_electrical_and_appliances_large.jpg);
    ">
      <p id="img-txt">
        <span class="overlay-title">futureTech</span><br />
        <span id="img-txt-desc" class="overlay-subtext">We can provide with all you need, Lapops in best prices 🔥
          graphic
          cards 😍 PC components 😎 and much more.
        </span>
      </p>
      <div class="overlay-black"></div>
    </div>
  </div>
  <br /><br />

  <% var keys=Object.keys(cats_products); for(var i=0;i<keys.length;i++){ %>
    <div class="category-div">
      <h4 style="">
        <%=keys[i]%>
      </h4>
      <a class="btn-more"
        href="/category/<%=cats_products[keys[i]]._id%>/1?last_date=<%=cats_products[keys[i]][0]? new Date() : 0%>&limit=50"><img
          src="/images/icons/double-angle-pointing-to-right.svg" alt="" /> See
        More</a>
      <div class="row">
        <% cats_products?.[keys?.[i]]?.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 || product.images?.[0]%>" /></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="" 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.// -->
    </div>
    <br />

    <%}%>

      <br />

      <script src="/home/home.js"></script>
      <%- include('./partials/footer') -%>