<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Browse</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
    crossorigin="anonymous"></script>

  <link rel="stylesheet" href="..\..\stylesheets\index.css">
  <script src="..\..\scripts\index.js"></script>
</head>

<body style="background-color: black;">
  <div class="container-fluid">
    <%- include('header')  %>
    <%- include('searchBanner')  %>    

    <!--Carousel Banner-->
    <div class="row my-3">
      <div class="banner-carousel">
        <div class="row row-cols-3">
          <div>
            <a href="store/promotions.ejs">
              <img class="w-100" src="../../images/banner-img-1.png">
            </a>
          </div>
          <div>
            <a href="store/promotions.ejs">
              <img class="w-100" src="../../images/banner-img-2.png">
            </a>
          </div>
          <div>
            <a href="store/promotions.ejs">
              <img class="w-100" src="../../images/banner-img-3.png">
            </a>
          </div>
        </div>
      </div>
    </div>

    <!--Menu-->
    <div class="row menu my-3">
      <div class="col"><button>Publishers</button></div>
      <div class="col"><button>Genre</button></div>
      <div class="col"><button>Product Type</button></div>
      <div class="col"><button>Rule System</button></div>
      <div class="col"><button>Languages</button></div>
      <div class="col"><button>Format</button></div>
    </div>

    <!-- Product Banner -->
    <div class="row my-4">
      <div class="col px-5">
        <div class="carousel p-0">
          <div class="carousel-title row">
            <div class="col-11">
              <h5 style="color: white;">
                Bestselling Titles
              </h5>
            </div>
            <div class="col-1">
              <a href="" style="color: white; font-weight: bold;">View All</a>
            </div>
          </div>
          <div class="row carousel-content">
            <div class="col-sm-12 my-auto">
              <div class="row">
                <!--Product-->
                <% for (product of products) { %>
                  <div class="col d-flex justify-content-center">
                    <div>
                      <a href=<%= "store/product/" + product.productid %>>
                        <div style="height: 190px; width: 140px; background-color: red;">
                          <img style="height: 100%; width: 100%;" src=<%= "../../images/products/" + product.productimage %>>
                        </div>
                      </a>
                      <p class="product-info line-clamp"><strong><%= product.productname %></strong></p>
                      <p class="product-info line-clamp"><strong>$<%= product.productprice %></strong></p>
                    </div>
                  </div>
                <% } %>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

    <!-- Product Banner -->
    <div class="row my-4">
      <div class="col px-5">
        <div class="carousel p-0">
          <div class="carousel-title row">
            <div class="col-11">
              <h5 style="color: white;">
                Everyday Gaming Products
              </h5>
            </div>
            <div class="col-1">
              <a href="" style="color: white; font-weight: bold;">View All</a>
            </div>
          </div>
          <div class="row carousel-content">
            <div class="col-sm-12 my-auto">
              <div class="row">
                <!--Product-->
                <% for (product of products) { %>
                  <div class="col d-flex justify-content-center">
                    <div>
                      <a href=<%= "store/product/" + product.productid %>>
                        <div style="height: 190px; width: 140px; background-color: red;">
                          <img style="height: 100%; width: 100%;" src=<%= "../../images/products/" + product.productimage %>>
                        </div>
                      </a>
                      <p class="product-info line-clamp"><strong><%= product.productname %></strong></p>
                      <p class="product-info line-clamp"><strong>$<%= product.productprice %></strong></p>
                    </div>
                  </div>
                <% } %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Product Banner -->
    <div class="row my-4">
      <div class="col px-5">
        <div class="carousel p-0">
          <div class="carousel-title row">
            <div class="col-11">
              <h5 style="color: white;">
                Weird new games!
              </h5>
            </div>
            <div class="col-1">
              <a href="" style="color: white; font-weight: bold;">View All</a>
            </div>
          </div>
          <div class="row carousel-content">
            <div class="col-sm-12 my-auto">
              <div class="row">
                <!--Product-->
                <% for (product of products) { %>
                  <div class="col d-flex justify-content-center">
                    <div>
                      <a href=<%= "store/product/" + product.productid %>>
                        <div style="height: 190px; width: 140px; background-color: red;">
                          <img style="height: 100%; width: 100%;" src=<%= "../../images/products/" + product.productimage %>>
                        </div>
                      </a>
                      <p class="product-info line-clamp"><strong><%= product.productname %></strong></p>
                      <p class="product-info line-clamp"><strong>$<%= product.productprice %></strong></p>
                    </div>
                  </div>
                <% } %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <%- include('footer') %>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

</html>