<h1>Home</h1>
<table border="1" width="100%"><tr>
    <td width="80%">
        <p>Welcome to Tennis Balls Company</p>
        <hr>
        <% if (allrecs.length > 0) { %>
            <% allrecs.forEach((recref, index) => { %>
                <% if (recref.stock > 0) { %> <!-- Not all of the products will show, since some products are out of stock. -->
                    <product>
                        <form action="/catalog/add" method="post" >
                            <input type="hidden" name="product_id" value=<%= recref.product_id %> >
                            <table>
                                <tr> <td colspan="2"><b><%= recref.productname %></b></td></tr>
                                <tr> <td colspan="2"><img src="images/<%= recref.prodimage %>" alt="<%= recref.prodimage %>" width="100" height="100"></td></tr>
                                <tr>
                                    <td><%= Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(recref.saleprice) %></td><td>Stock: <%= recref.stock %></td>
                                    <td><a href='/product/<%= recref.product_id %>/show'>Details</a></td>
                                </tr>
                                <tr>
                                    <td>Quantity: <select name="qty" required width="3">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                    </select></td>
                                    <td><button type="submit">Add to Cart</button></td>
                                </tr>
                            </table>
                        </form>
                    </product>
                <% } %>
            <% }); %>
        <% } %>
    </td>
    <td width="20%">
        <% if (promos.length > 0) { %>
            <% promos.forEach((recref, index) => { %>
                <p><a href='/promotion/<%= recref.promotion_id %>/show'><img src="images/<%= recref.promoimage %>" alt="<%= recref.prodimage %>" width="100" height="100"></a></p>
            <% }); %>
        <% } %>
    </td>
</tr></table>