<!DOCTYPE html>
<html lang="en">

<%- include('./partials/head.ejs') %>

<body>
    <%- include('./partials/nav.ejs') %>
    <div class="container">
        <h4>Item Detail</h4>
        <div>
            <h5>item name: <%= item.name %></h5>
            <h5>item pice: $<%= item.price %></h5>
        </div>
        <a id="deleteBtn" class="delete btn" data-id="<%=item._id%>" href="">Delete</a>
    </div>
    <script>
        deleteBtn.onclick = function (e) {
            e.preventDefault();
            const id = deleteBtn.dataset.id
            // const id = e.target.getAttribute('data-id');
            console.log(id)
            const endpoint = `/items/${id}`;
            fetch(endpoint, {
                method: 'DELETE'
            }).then(res => res.json()).
                then(data => {
                    console.log('data', data)
                    window.location.href = data.redirect
                }).
                catch(err => console.log(err))
        }

    </script>

</body>

</html>