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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Single post</title>
</head>

<body>
    <%- include('./partials/navbar.ejs') %>
        <div class="body-container">
            <section class="entry">
                <div class="entry-topbar">
                    <div>
                        <img src="images/me.png" alt="Me">
                    </div>
                    <div class="entry-datetext">
                        <p id="date">
                            <%= post.created_at %>
                        </p>
                    </div>
                </div>
                <% if (post.imageurl != null){ %>
                    <img src=<%=post.imageurl %> >
                    <% } %>


                        <div class="entry-title">
                            <p>
                                <%= post.title %>
                            </p>
                        </div>
                        <div class="entry-text">
                            <p>
                                <%= post.body %>
                            </p>
                        </div>
                        <div class="entry-react">
                            <img onclick="addlike(<%= post.likes %>, <%= post.id %>)" src="images/like-icon-png-0.jpg" alt="I like it!">
                            <div id=<%=post.id %> class="entry-likenumber">
                                <%= post.likes %> likes
                            </div>
                        </div>
                        <div class="delete-post">
                            <a class="delete" data-del="<%= post.id %>">Delete this post</a>
                        </div>
            </section>
        </div>
        <script>
            const delreq = document.querySelector('a.delete');
            delreq.addEventListener('click', (e) => {
                const endpoint = `/posts/${delreq.dataset.del}`;
                fetch(endpoint, {
                    method: 'DELETE',
                }).then(window.location.href = '/posts')
            });

            function addlike(likes, id) {
                document.getElementById(id).innerHTML = likes + 1 + " likes";
                //document.getElementById(id).disabled = true;
                console.log(likes);
                const endpoint = `/posts/${id}`;
                fetch(endpoint, {
                    method: 'PUT',
                    body: JSON.stringify({
                        "likes": likes + 1,
                        "id": id
                    }),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })

                console.log("Done");
            }
        </script>

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

</html>