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

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