<%- include('../includes/main/head.ejs')%>
<link rel='stylesheet' href='/css/product.css' />
<link rel='stylesheet' href='/css/forms.css' />
</head>

<body>
    <%- include('../includes/main/navigation.ejs')%>
    <main>
        <% if (prods.length > 0) { %>
            <div class='grid'>
                <% for(let product of prods) { %>
                    <article class="card product-item">
                        <header class="card__header">
                            <h1 class='product__title'><%= product.title %></h1>
                            <div class="card__image">
                                <img src="<%= product.imageUrl %>" alt='A book'>
                            </div>
                            <div class="card__conten">
                                <h2 class="product__price"> R$ <%= product.price %> </h2>
                                <p class="product__description"><%= product.content %></p>
                            </div>
                            <%- include('../includes/comps/add-cart-form.ejs', {product:product})%>
                        </header>
                    </article>
                <% } %> 
            </div>
        <% } else { %>
            <h1>no products</h1>
        <% } %>
    </main>
    <%- include('../includes/main/end.ejs')%>