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

    <h1>Todos</h1>
    <ul>
    <% todos.forEach( el => { %>
            <li class='todoItem' data-id='<%=el._id%>'>
                <span class='<%= el.completed === true ? 'completed' : 'not'%>'><%= el.todo %></span>
                <span class='del'> Delete </span>
            </li>
    <% }) %>    
    </ul>

    <h2><%= user.userName %> has <%= left %> things left to do.</h2>

    <form action="/todos/createTodo" method='POST'>
        <input type="text" placeholder="Enter Todo Item" name='todoItem'>
        <input type="submit">
    </form>

    <a href="/logout">Logout</a>

    <script src="js/main.js"></script>

<%- include('partials/footer') -%>