<!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>Posts</title>
</head>

<body>

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

        <div class="body-container">

            <section class="entry">
                <div id="addnewpost"><a href="/addnewpost">Add new post</a></div>
            </section>

            <% if (posts.length > 0) { %>
                <% posts.forEach(post => { %>
                    <!-- onclick="location.href='<%= post.id %>';"-->
                    <section  class="entry">
                        <!--<section class="entry" onclick="navigateToSinglePost(<%= post.id %>)"></section>-->
                        <div class="entry-topbar" onclick="location.href='<%= post.id %>';">
                            <div>
                                <img src="images/me.png" alt="Me">
                            </div>
                            <div class="entry-datetext" onclick="location.href='<%= post.id %>';">
                                <p id="date">
                                    <%= post.created_at %>
                                </p>
                            </div>
                        </div>
                        <% if (post.imageurl != null){ %>
                            <img src="<%=post.imageurl %>" onclick="location.href='<%= post.id %>';">
                            <% } %>


                                <div class="entry-title" onclick="location.href='<%= post.id %>';">
                                    <p>
                                        <%= post.title %>
                                    </p>
                                </div>
                                <div class="entry-text" onclick="location.href='<%= post.id %>';">
                                    <p id = "demo">
                                        <%= post.body %>
                                    </p>
                                </div>
                        
                                <div class="entry-react">
                                    <img id='like-image' 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>
                    </section>

                    <% }) %>
                        <% } else { %>
                            <div class="noposts">You did not post anything...</div>
                            <% } %>
        </div>

        <%- include('./partials/footer.ejs') %>
            <script>
                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");
                }

                 // attempt to achieve navigation - not used
                function navigateToSinglePost(id) {
                    const endpoint = `${id}`;
                    fetch(endpoint, {
                        method: 'GET'
                    })

                }

                // attempt to achieve navigation with eventlistener - not working
                var elements = document.getElementsByClassName("entry");
                for (var i = 0; i < elements.length; i++) {
                    elements[i].addEventListener("click", function(event) {

                        console.log(event.target.id);
                        console.log(event.target);
                        // is not activated when like aimage is clicked
                        if (event.target.id != 'like-image'){
                            console.log("hello22!"); 
                        }
                    });

                }
            </script>
</body>

</html>