feedless/app/views/home.ejs

<%- include('_header', { main_class: "screen-center", body_class: "home-page" }) %>

<div class="columns">
  <div class="secret-chat">

    <% if (secretMessages.length == 0) { %>
      <div class="column-side-padding">You don't have any secret messages yet</div>
    <% } else { %>
      <div class="js-secret-messages">
        <h2 class="column-side-padding">Secret Messages</h2>
        <% secretMessages.reverse().map(message => { %>
          <div>
            <button class="secret-button js-secret-message" data-key="<%= message.key %>">
              <img class="link-profile-pic" src="<%= profileImageUrl(message.value.authorProfile) %>" class="post-profile-pic" />
              <div style="flex-grow: 1;">
                <%= message.value.authorProfile.name %> <br />
                <small>👁 new message</small>
              </div>
            </button>
            <div class="overlay"></div>
            <div class="modal">
              <a href="<%= profileUrl(message.value.authorProfile.id) %>" class="modal-header">
                <img src="<%= profileImageUrl(message.value.authorProfile) %>" class="post-profile-pic" />
                <div style="padding-left: 10px"><%= message.value.authorProfile.name %></div>
              </a>
              <div class="modal-body">
                <%= message.value.content.text %>
              </div>
              <div class="modal-footer">
                after you close this box the message will be gone forever
                <button class="modal-confirm">Close</button>
              </div>
            </div>
          </div>
        <% }) %>
      </div>
    <% } %>
  </div>

  <div class="wall">
    <div class="columns">
      <img class="profile-pic" src="<%= profileImageUrl(profile) %>" />
      <div style="padding-left: 20px">
        <h1><%= profile.name %></h1>

        <%= profile.description %>
      </div>
    </div>

    <form action="/publish" method="POST" style="padding-top: 20px;">
      <textarea name="message" class="compose-post"></textarea>
      <div class="reverse-columns" style="margin-top: 10px">
        <input type="submit" value="Publish" />
      </div>
    </form>

    <h2 style="margin: 0">Your Wall</h2>
    <% if (posts.length > 0) { %>
      <%- include('_posts', { posts }) %>
    <% } else { %>
      <div style="padding-top: 15px;">
        <div class="post">
          You have no posts yet, publish something!
        </div>
      </div>
    <% } %>
  </div>

  <div class="friends-communities">
    <% if (friends.requestsReceived.length) { %>
      <h2>Friend Requests</h2>
      <%- include('_friends', { friends: friends.requestsReceived }) %>
    <% } %>

    <h2 style="margin-top: 30px">Friends</h2>
    <%- include('_friends', { friends: friends.friends }) %>

    <h2 style="margin-top: 30px">Requests Sent</h2>
    <%- include('_friends', { friends: friends.requestsSent }) %>
  </div>
</div>

<%- include('_footer') %>