<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>
