<!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>Available Cars</h3>
        <ul>
          <% let listString = renderList(vehicles) %>
          <%- listString %>
        </ul>
        <a class="btn btn-success btn-sm" href="/cars/new">Add a Car</a></li>
    </div>
    
  </main>
  <footer>
      <%- include('../partials/footer.ejs')%>
  </footer>

</body>

<% function renderList(arrList) { %>
<%   let listString = []  %>
<%   arrList.forEach((vehicle, index) => {  %>
<%        listString.push('<li><a href="/cars/' + vehicle._id + '">' + vehicle.name + '</a></li>') %>
<%    }) %>
<%    return listString.join(" ")  %>
<% } %>