<%- include("templates/base.ejs", { css: `/@${user.username}/css` }) %>
<div id="content">
    <div class="box-container">
      <div class="profile-banner-container">
        <div class="profile-banner-image" style="background-image: url('/@<%= user.username %>/banner');"></div>
        <div class="profile-banner-info">
          <img src="/@<%= user.username %>/pfp" class="profile-banner-pfp" alt="Avatar" width="128" height="128">
          <div class="profile-banner-info-container">
            <div class="profile-banner-info-top">
              <span class="profile-banner-info-display-name"><%= user.displayName  %></span>
              <% if (user.isOwner) { %>
              <div class="profile-badge">
                <img src="/img/icons/user-business-gray.png" alt="" width="16" height="16">
                <span>Owner</span>
              </div>
              <% } %>

              <% if (user.isAdmin) { %>
              <div class="profile-badge">
                <img src="/img/icons/user-black.png" alt="" width="16" height="16">
                <span>Administrator</span>
              </div>
              <% } %>

              <% if (isLoggedIn && currentUser.username == user.username) { %>
              <span class="profile-button">
                <a href="/settings">
                  <img src="/img/icons/gear.png" alt="" width="16" height="16">
                  Edit profile
                </a>
              </span>
              <% } %>

              <% if (isLoggedIn && currentUser.username != user.username) { %>
              <span class="profile-button">
                <a href="/report?user=<%= user.username %>">
                  <img src="/img/icons/report.png" alt="" width="16" height="16">
                  Report user
                </a>
              </span>
              <% } else if (!isLoggedIn) { %>
              <span class="profile-button">
                <a href="#" onclick="alert('You must be signed in to report users.')">
                  <img src="/img/icons/report.png" alt="" width="16" height="16">
                  Report user
                </a>
              </span>
              <% } %>
            </div>
            <div class="profile-banner-info-bottom">
              <span class="profile-banner-info-username">@<%= user.username  %></span>
              <span class="profile-banner-info-createdOn">joined on <%= format(user.createdOn, "MM/dd/yyyy") %></span>
              <% if (user.lastLogin == 0) { %>
              <span class="profile-banner-info-lastLogin">has never logged in</span>
              <% } else { %>
              <span class="profile-banner-info-lastLogin">last logged in on <%= format(user.lastLogin, "MM/dd/yyyy") %></span>
              <% } %>
            </div>
          </div>
        </div>
      </div>
      <div class="profile-layout">
        <div class="profile-about window">
          <div class="window-titlebar">
            <span>Bio:</span>
          </div>
          <div class="window-content">
            <% if (user.profile.bio.length == 0) { %>
              <span>This user has nothing set as there bio.</span>
            <% } else { %>
              <div class="bio-content">
                <%- md.render(user.profile.bio) %>
              </div>
            <% } %>
          </div>
        </div>
        <div class="profile-song window">
          <div class="window-titlebar">
            <span>Song:</span>
          </div>
          <div class="window-content">
            <% if (user.profile.song.enabled) { %>
            <audio controls>
              <source src="/@<%= user.username %>/song" type="<%= user.profile.song.mime %>">
            </audio>
            <% } else { %>
            <span>This user has not uploaded a song</span>
            <% } %>
          </div>
          <% if (user.profile.song.enabled) { %>
          <div class="window-footer">
            <span><a href="/@<%= user.username %>/song">download</a></span>
          </div>
          <% } %>
        </div>
        <div class="window profile-posts">
          <div class="window-content posts">
            <% if (posts.length == 0) { %>
              <span>this user hasn't posted anything</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>
                    <% if (isLoggedIn) { %>
                    <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>
      </div>
      <div class="picture-preview">
        <img src="/@<%= user.username %>/pfp" class="picture-preview-picture" alt="Avatar" width="400" height="400">
      </div>
    </div>
</div>
<%- include("templates/footer.ejs") %>
</body>
</html>
