<%- include('./include/_head.ejs') %>
<body>
    <%- include('./include/_navbar.ejs') %>
    <div class="container mh-85">
        <table class="table table-striped table-bordered table-responsive mt-5 w-auto">
            <thead class="thead-dark">
                <tr>
                    <th>#</th>
                    <th>Image</th>
                    <th>Title</th>
                    <th>Episodes</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <% watchlist.forEach( (anime, index) => { %>
                    <tr>
                        <td><%= (index+1) %></td>
                        <td><img class="table-image mx-auto d-block" src="<%= anime.image_url %>" alt=""></td>
                        <td class="w-75"><a href="/anime/<%= anime.mal_id %>"><%= anime.title %></a></td>
                        <td><%= anime.episodes %></td>
                        <td><a href="/remove-anime/<%= anime.mal_id %>">Remove</a></td>
                    </tr>
                <% }); %>
            </tbody>
          </table>
    </div>
    <%- include('./include/_footer.ejs') %>
</body>
</html>