<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('../partials/head.ejs')%>
</head>
<body>
  <div class="body-overlay">
    <header>
        <%- include('../partials/header.ejs')%>
    </header>
    <main>
        <div class="container">
            <h3>Rentals</h3>
            <ul>
                <% let listString = renderList(rentals) %>
                <%- listString %>
            </ul>
            <a class="btn btn-success btn-sm" href="/rentals/new">Add a Rental</a></li>
        </div>   
    </main>
    <footer>
        <%- include('../partials/footer.ejs')%>
    </footer>
</body>

<% function renderList(arrList) { %>
<%  let listString = []  %>
<%   arrList.forEach((rental, index) => {  %>
<%        listString.push('<li><a href="/rentals/' + rental._id + '">' + rental.customer + ', ' + rental.rentalStartDate + ', ' + rental.rentalStatus + '</a></li>') %>
<%    }) %>
<%    return listString.join(" ")  %>
<% } %>