<!DOCTYPE html>
<html lang="en">
<%- include("partials/head.ejs", { title: "Card Index for " + user.name, css: "", js: "" }) %>
<body>
    <%- include("partials/nav.ejs") %>
    <section class="hero">
        <h1><span class="federal-blue">C</span><span class="pantone-orange">a</span><span class="avocado">r</span><span class="goldenrod">d</span><span class="federal-blue">s</span></h1>
    </section>
    <section class="hero">
        <p>
            <a href="/users/<%= user._id %>/cards/new" class="btn bg-<%= user.currentColor %>">Add a card as <%= user.name %></a>
        </p>
    </section>
    <main>
        <div class="row">
            <% for (let card of cards) { %>
                <div class="col-sm-6 col-xl-3">
                    <div class="card bg-floral-white">
                        <div class="card-body text-center">
                            <h5 class="card-title bg-<%= card.bgColor %>"><%= card.target %></h5>
                            <ul class="list-group list-group-flush">
                                <% for (let blocker of card.blockers) { %>
                                    <li class="list-group-item bg-floral-white"><%= blocker %></li>
                                <% } %>
                            </ul>
                            <form method="POST" action="/users/<%= user._id %>/cards/<%= card._id %>?_method=DELETE">
                                <input type="submit" value="Del" class="btn btn-danger">
                                <a href="/users/<%= user._id %>/cards/<%= card._id %>/edit" class="btn btn-warning">Edit</a>
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal<%= card._id %>">
                                    Show
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            <% } %>
        </div>
    </main>
    <% for (let card of cards) { %>
        <div class="modal fade" id="modal<%= card._id %>" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="modal<%= card._id %>Label">Card View</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body taboo-text bg-<%= card.bgColor %>">
                        <%= card.target %>
                        <hr />
                        <%= card.blockers[0] %>
                        <br />
                        <%= card.blockers[1] %>
                        <br />
                        <%= card.blockers[2] %>
                        <br />
                        <%= card.blockers[3] %>
                        <br />
                        <%= card.blockers[4] %>
                    </div>
                </div>
            </div>
        </div>
    <% } %>
    <%- include("partials/footer.ejs") %>
</body>
</html>