<!DOCTYPE html>
<html lang="en">
    <head>
        <% include ../static/partials/head.ejs %>
    </head>
    <body>
        <% include ../static/partials/navbar.ejs %>
        <main class="container">
            <div class="listContainer lists">
                <% include ../static/partials/messages.ejs %>
                <div class="imgContainer">
                    <a href="/lists/<%= listId %>/newitem">
                        <div>
                            <img src="/icons8-plus.svg" style="width: 3rem; padding-left: 1rem;" alt="add new list">
                            <p>Add item</p>
                        </div>
                    </a>
                </div>
                <% items.forEach((item) => { %>
                    <div class="items">
                        <h4><%= item.item %></h4>  
                        <h6>Max Cost: $<%= item.max %></h6>
                        <div class="itemBtns">
                            <form action="/lists/<%= listId %>/purchased/<%= item.id %>" method="get">
                                <% if(item.purchased) { %>
                                    <button type="submit" class="btn btn-sm" style="border: none;"><img src="/icons8-ok.svg" style="width: 2rem;" alt="purchased"></button>
                                <% } else { %>
                                    <button type="submit" class="btn btn-sm"><img src="/icons8-checkmark.svg"></button>
                                <% } %>
                            </form>
                            <form action="/lists/<%= listId %>/edit/<%= item.id %>" method="get">
                                <button type="submit" class="btn btn-sm">Edit</button>
                            </form>
                            <form action="/lists/<%= listId %>/destroy/<%= item.id %>" methode="get">
                                <button type="submit" class="btn btn-sm">Delete</button>
                            </form>  
                        </div>           
                    </div>
                <% }) %>
            </div>
        </main>

        <% include ../static/partials/baseScripts.ejs %>
        
    </body>
</html>