<%- include("templates/base.ejs") %>
<div id="content">
    <div class="box-container">
        <% if (process.env.NODE_ENV != "production") { %>
            <div class="dialog warning-dialog">
                <span>hey, this is a development server! user data may be removed at any time</span>
            </div>
        <% } %>
        <div class="home-layout">
            <%- include("templates/sidebar.ejs") %>
            <div class="window main-box">
                <div class="window-content main-box-content">
                  <div class="main-box-top">
                    <div class="main-box-header">
                      <h1>hi, <%= currentUser.displayName %>!</h1>
                      <span class="post-box-counter">255</span>
                    </div>
                    <form class="post-box" method="post" action="/actions/post">
                      <input type="hidden" name="CSRFToken" value="<%= csrfToken %>">

                      <textarea class="post-box-textarea" name="content" autocomplete="off" placeholder="what are you doing today?"></textarea>
                      <input type="submit" class="post-box-button" value="Post!">
                    </form>
                    <% if (postErrorMessage != null) { %>
                    <div class="dialog error-dialog">
                      <span><%= postErrorMessage %></span>
                    </div>
                    <% } %>
                  </div>
                  <div class="main-box-tabs">
                    <div class="tab all-tab active-tab">
                      <span>All</span>
                    </div>
                    <div class="tab friends-tab">
                      <span>Friends</span>
                    </div>
                    <div class="tab popular-tab">
                      <span>Popular</span>
                    </div>
                  </div>
                  <div class="posts">
                  <% if (posts.length == 0) { %>
                    <span>it's lonely here. maybe be the first one to post?</span>
                  <% } %>
                  <% for (const post of posts) { %>
                    <div class="post">
                      <div class="post-pfp">
                          <img src="/@<%= post.author.username %>/pfp" alt="Avatar" width="48" height="48">
                      </div>
                      <div class="post-content">
                          <div class="post-row">
                              <div class="post-author">
                                  <a href="/@<%= post.author.username %>"><span class="post-author-displayname"><%= post.author.displayName %></span></a>
                                  <a href="/@<%= post.author.username %>"><span class="post-author-username">@<%= post.author.username %></span></a>
                              </div>
                          </div>
                          <div class="post-row">
                              <div class="post-text">
                                <%= post.content %>
                              </div>
                          </div>
                          <div class="post-row post-about">
                              <div class="post-created-on" data-timestamp="<%- Math.floor(post.createdOn / 1000) %>"><%- formatDistanceToNow(post.createdOn, { includeSeconds: true }) %> ago...</div>
                              <div class="reaction like-button" data-id="<%= post._id.toString() %>">
                                <img src="/img/icons/thumb-up.png" alt="" width="16" height="16">
                                <% if (post.reactions.some(reaction => reaction.author._id.toString() == req.currentUser._id)) { %>
                                <span>Unlike (<%= post.reactions.length %>)</span>
                                <% } else { %>
                                <span>Like (<%= post.reactions.length %>)</span>
                                <% } %>
                              </div>
                              <div class="reaction reply-button">
                                  <img src="/img/icons/reply.png" alt="" width="16" height="16">
                                  <span>Reply (WIP)</span>
                              </div>
                          </div>
                          <% if (post.reactions.length > 0) { %>
                          <div class="post-row post-likes">
                              <% post.reactions.forEach((reaction) => { %>
                              <img src="/@<%= reaction.author.username %>/pfp" class="post-likes-pfp" alt="Avatar" width="24" height="24" onclick="window.location.href = '/@<%= reaction.author.username %>'">
                              <% } )%>
                              <div class="post-likes-text"> liked this post.</div>
                          </div>
                          <% } %>
                      </div>
                      </div>
                  <% } %>
                </div>
                <div class="main-box-footer">
                  <a href="/posts/all.rss" class="float-right">
                    <img src="/img/icons/feed.png" alt="RSS feed" width="16" height="16">
                  </a>
                </div>
            </div>
          </div>
        </div>
    </div>
</div>
<%- include("templates/footer.ejs") %>
</body>
</html>
