<link rel="stylesheet" href="/css/home.css">
<link rel="stylesheet" href="/css/chat_box.css">

<div id="home-container">
    <section id="feed-posts">
            <h4>Posts</h4>
            <% if(locals.user){ %>
            <form action="/posts/create" id="new-post-form" method="POST">
                <textarea name="content" cols="30" rows="3" placeholder="Type Here..." required></textarea>
                <input type="submit" value="Post">
            </form>
            <% } %>
        
            <div id="posts-list-container">
                <ul>
                    <% for(post of posts){ %>
                        
                    <%- include('_post') -%>
                        
                    <%} %>
                </ul>
            </div>
        </section>
        
        
        <section id="user-friends">
            <h4>Friends</h4>
            <% for(u of all_users){%>
                <p>
                    <a href="/users/profile/<%= u.id %>"><%= u.name %></a>
                </p>
            <% } %>
        </section>

    <%- include('_chat_box') -%>
</div>

<!-- importing this script for creating the comments -->
<script src="/js/home_post_comments.js" ></script>
<script src="/js/home_posts.js"></script>

<!-- CHANGE :: import the script file for toggle likes, also run it over for the already present posts and comments on the page -->
<script src="js/toggle_likes.js"></script>
<script>
    $('.toggle-like-button').each(function(){
        let self = this;
        let toggleLike = new ToggleLike(self);
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
<script src="/js/chat_engine.js"></script>
<% if (locals.user){ %>
<script>
    new ChatEngine('user-chat-box', '<%= locals.user.email %>')
</script>
<% } %>