<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('partials/head'); %>
    <link rel="stylesheet" href="/css/product.css">
</head>

<body>
    <header>
        <%- include('partials/header'); %>
    </header>

    

    <!--
    <div id="content">
        <div id="productPicture">
            <img src="/images/examples.jpg" alt="">
        </div>
        <div id="info">
            <h2><%= product.productName %></h2><br>
            <p class="badge">Nr.:<%= product.id %></p><br>

            <p class="seller">Verkäufer: <%= product.sellerName%></p><br>

            <p class="product-detail"><b>Preis:</b> <%= product.price %> € / Stück</h2>
            <p class="product-detail"><b>Kategorie:</b> <%= category.name %></h2>
            <p style="word-wrap: break-word;"></p>
            <div>
                <label style="margin-right: 30px; margin-left: 0px;

                <% if(product.quantity > 0){%>
                    color: green;">
                    Lieferbar in <%= product.delivery_time %> - <%= product.delivery_time + 1 %> Tagen</label><br><br>
                    <div style=" float:right;">
                        <span><input type="number" id="quantity" min="1" max="<%= product.quantity %>" style="width: 30px; margin-left: 20px" value="1" ></span>
                        <label>/<%= product.quantity %></label><br>
                        <button class ="order-button"onclick="window.open('/order/<%= product.id %>/' + document.getElementById('quantity').value, '_self')">Bestellen</button>    
                    </div>
                <% } else { %>
                    color: red; font-weight:bold;">
                    Aktuell nicht lieferbar!</label>
                    <% } %>
            </div>
        </div>
        

        <div id="description">
            <h2>Beschreibung</h2>
            <p><%= product.productDescription %> </p>
        </div>
        <% if(loggedIn){ %>
        <div id="newReview">
            <h2 style="padding-left: 30px;">Rezensionen</h2>
            <form class="form" action="/review/create/<%= product.id %>" method="post">
                <label for="title">
                    <p>Titel: </p>
                    <input type="text" name="title">
                </label>

                <label for="rating">
                    <p>Bewertung (0-10): </p>
                    <input type="number" name="rating" max="10" min="0">
                </label>

                <label for="content">
                    <textarea name="content" id="" max="500" cols="30" rows="10"></textarea>
                </label>
                
                <input style="width: 150px" type="submit" value="Senden">
            </form>
        </div>
        <% } %>
        <div id="reviews">
            <% if(reviews.length > 0){ %>
                <% for(let i = 0; i < reviews.length; i++){ %>
                    <div id="reviewTemplate">
                        <div style="width: 100%; display: block; float: left;">
                            <div id= data >
                                <h3 style="padding-left: 20px; float:left"><%= reviews[i].name %></h3>
                                <p style="float:right; padding-right: 20px;">Bewertung: <%= reviews[i].rating %></p>
                            </div>
                            <div id="text" >
                                <h3 style="padding-left: 20px; padding-right: 20px; width: 100%;"><%= reviews[i].title %></h3>
                                <p style="padding-left: 20px; padding-right: 20px;"><%= reviews[i].content %></p>
                            
                            </div>
                        </div>
                    </div>
        <% } %>
        <% }else{ %>
            <div style="width: 100%; height: 100px;">Leider hat dieses Produkt noch keine Bewertung. :(</div>
            <% } %>
        </div>
    </div> -->
    <%- include('partials/footer'); %>
    <script src="/js/bootstrap.js"></script>
</body>
</html>