<%- include('../partial/head.ejs'); %>
<%- include('../partial/head_wa.ejs'); %>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<div class="container">
    <div class="row"></div>
</div>


<script>
    
axios.get("https://elzacatecano.herokuapp.com/productos")
    .then((response)=>{
        console.log(response);
        var cantidad = response.data. length;
        for(i=0;i<cantidad;i++){
        
            const app = document.createElement("div"); // <div></div>
            app.id = "app"+response.data[i].id; 
            app.className += "col-4"
            app.innerHTML ='<div class="card bg-light" style="width: 18rem; margin: 1rem ; ">'+
                '<img src="'+ response.data[i].img_url +'" class="card-img-top" alt="..."></img>'+
                '<div class="card-body">'+
                    '<h5 class="card-title"> '+ response.data[i].producto +'</h5>'+
                    '<p class="card-text">' + response.data[i].nombre  +'</p>'+
                    '<h6 class="card-text">$'+ response.data[i].precio +'</h6>'+
                    '<a href="/iniciarsesion" class="btn btn-warning"><i class="ri-shopping-cart-2-line"></i> Inicia sesion para acceder al carrito </a>'+
                '</div>'+
            '</div>'
            const ant = document.querySelector(".row"); 
            ant.insertAdjacentElement("afterbegin", app);
        
        }
    });
    
    
</script>
<%- include('../partial/footer2.ejs'); %>
