<link rel="stylesheet" href="<%= assetPath('css/home.css') %>">
<link rel="stylesheet" href="<%= assetPath('css/chatting-engine.css') %>">

<section id="user-container">

    <section id="feed-posts">

        <%if(locals.user){%>
            <section id="post-form">
                <h1>What's On Your Mind</h1>
                <form action="/post/create-post"  enctype="multipart/form-data" method="post">
                    <div id="input">
                        <textarea id="content" name="content" placeholder="Write here... "></textarea>
                        <input id="file" type="file" name="img" placeholder="Post Img">
                    </div>
                    <input id="submit" type="submit" value="Post">
                </form>

            </section>
            <%}%>

                <h2>Feed</h2>
                <section id="posts-list-container">
                    <ul id="post-list">
                        <% for(post of posts){ %>

                            <%-include('_post.ejs')-%>

                        <%} %>
                    </ul>
                </section>


    </section>

    <aside>
        <%if(locals.user){%>
            <section id="friend_list">
                <h4 class="heading">Friends</h4>
                <%if(locals.user.friendship.length){%>
                    <ul class="list">
                        <%for(friend of friends){%>
                        <%if(friend.from_user==user.id){%>
                            <li class="items">
                                <p>
                                    <img class="logo" src="<%= friend.to_user.avatar %>"
                                        alt="<%= friend.to_user.name %>" width="20">
                                <p class="name">
                                    <%= friend.to_user.name %>
                                </p>
                                </p>
                                <p>
                                    <a class="remove" href="/friendship/toggle/?id=<%=friend.to_user._id%>"
                                        class="toggle-friend">
                                        <i class="fa-solid fa-user-xmark fa-1x"></i>
                                    </a>
                                </p>
                            </li>
                        <%}%>
                    <%}%>
                </ul>
                <%}else{%>
                    <ul class="list" style="list-style: none;">
                        <li id="items">
                            <p>No Friends. But You Can Make Them 😉</p>
                        </li>
                    </ul>
                <%}%>

            </section>
        <%}%>

                <section id="user_list">
                    <h4 class="heading">Users</h4>
                    <ul class="lista">
                        <%for(u of all_user){%>
                            <%if(locals.user){%>
                                <%if(locals.user.name!=u.name){%>
                                    <li class="itemsa">
                                        <img class="logoa" src="<%= u.avatar %>" alt="<%= u.name %>" onerror="this.onerror=null; this.src='img/Default.png'" width="20">
                                        <a href="/user/profile/<%=u.id%>">
                                            <%=u.name%>
                                        </a>
                                    </li>
                                    <%}%>
                                        <%}else{%>
                                            <li>
                                                <img class="logoa" src="<%= u.avatar %>" alt="<%= u.name %>" onerror="this.onerror=null; this.src='img/Default.png'" width="20">
                                                <a href="/user/profile/<%=u.id%>">
                                                    <%=u.name%>
                                                </a>
                                            </li>
                                            <%}%>

                                                <%}%>
                    </ul>
                </section>

    </aside>

    <%if(locals.user){%>

        <section id="chatting-engine">
            <ul id="chat">
            </ul>
            <div id="message">
                <form action="" method="post" id="chatting-form">
                    <input type="text" name="" id="chat-message-input" placeholder="Type your message">
                    <input type="button" value="Send" id="send-btu">
                </form>
            </div>
        </section>
        <%}%>
</section>


<script src="<%= assetPath('js/home_comment.js') %>"></script>
<script src="<%= assetPath('js/home_post.js') %>"></script>
<script src="<%= assetPath('js/home_like.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/4.5.0/socket.io.js"></script>
<script src="js/chat_engine.js"></script>

<%if(locals.user){%>
    <script>
        new ChatEngine('chatting-engine', '<%= locals.user.email %>','<%= locals.user.name %>');

        var down = setInterval(function () {
            var scrollbar = document.querySelector('#chat');
            scrollbar.scrollTop = scrollbar.scrollHeight - scrollbar.clientHeight;
        }, 1);

        // clearInterval(down,1000);

    </script>
    <%}%>