<html lang="fr">
<%- include("./partials/header.ejs") %>
<body>
    <%- include("./partials/navbar.ejs") %>
    <div class="container-fluid" style="margin-top: -20px;">
        <h1 class="text-center">Boutique de produits</h1>
        <div class="row">
            <% products.forEach(product => { %>    
            <div class="col-sm-6 col-md-4" v-for="product in products">
                <div class="card text-bg-dark">
                    <img src="/<%= product.image %>" class="card-img" alt="...">
                    <div class="card-img-overlay">
                      <h5 class="card-title"><%= product.name %></h5>
                      <p class="card-text text-muted"><%= product.price %> €</p>
                      <p class="card-text"><%= product.description %></p>
                      <p class="card-text"><small><%= product.productType %></small></p>
                    </div>
                  </div>
                <div class="row g-0">
                    <div class="col-md-4">
                      <img src="/<%= product.image %>" class="img-fluid rounded-start" alt="...">
                    </div>
                    <div class="col-md-8 ">
                      <div class="card-body py-0 px-0">
                        <h5 class="card-title mb-2"><%= product.name %></h5>
                        <p class="card-text mb-1"><%= product.description %></p>
                        <p class="card-text mb-1"><small class="text-muted">Prix : <%= product.price %> €</small></p>
                        <p class="h6"><%= product.productType %></p>
                    </div>
                    </div>
                  </div>
                <div class="card">
                    <img src="/<%= product.image %>" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title"><%= product.name %></h5>
                      <p class="card-text mb-1">prix : <%=product.price %> €</p>
                      <p class="card-text mt-0"><%= product.description %></p>
                    </div>
                    <div class="card-footer">
                      <small class="h6"><%= product.productType %></small>
                    </div>
              </div>
                <div class="card">
                    <img src="\<%= product.image %>" class="card-img-top" alt="Image du produit">
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item"><%= product.name %></li>
                            <li class="list-group-item"><%= product.description %></li>
                            <li class="list-group-item">Prix: <%= product.price %> €</li>
                          </ul>
                          <div class="card-body">
                            <a href="#" class="card-link">Card link</a>
                            <a href="#" class="card-link">Another link</a>
                          </div>
                        <h5 class="card-title"></h5>
                        <p class="card-text"></p>
                        <p class="card-text"></p>
                        <p class="card-text">Type: <%= product.productType %></p>
                    </div>
                </div>
            </div>
            <% }) %>
        </div>
        
    </div>
    <%- include("./partials/footer.ejs") %>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
</body>
</html>