feedless/app/views/profile.ejs

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

<div class="columns">
  <div class="wall">
    <div class="columns">
      <img class="profile-pic" src="<%= profileImageUrl(profile) %>" />
      <div style="padding-left: 20px">
        <div class="columns" style="align-items: center;">
          <h1><%= profile.name %></h1>
          <% if (friendshipStatus == "friends") { %>
            <div style="margin-left: 14px">✅ Friends</div>
          <% } %>
        </div>
        <%= profile.description %>

        <div class="columns profile-actions" style="margin-top: 20px">
          <% if (friendshipStatus == "no_relation") { %>
            <form action="<%= profileUrl(profile.id, "/add_friend") %>" method="POST">
              <input type="submit" class="button-blue" value="Add as friend" />
            </form>
          <% } else if (friendshipStatus == "friends") { %>
            <form action="<%= profileUrl(profile.id, "/reject_friend") %>" method="POST">
              <input type="submit" value="Undo Friendship" />
            </form>
          <% } else if (friendshipStatus == "request_sent") { %>
            <form action="<%= profileUrl(profile.id, "/reject_friend") %>" method="POST">
              <button class="button-secondary undo-request">Request sent</button>
            </form>
          <% } else if (friendshipStatus == "request_received") { %>
            <p><%= profile.name %> sent you a friendship request</p>
            <form action="<%= profileUrl(profile.id, "/add_friend") %>" method="POST">
              <input type="submit" class="button-blue" value="Accept" />
            </form>
            <form action="<%= profileUrl(profile.id, "/reject_friend") %>" method="POST">
              <input type="submit" value="Reject" />
            </form>
          <% } else if (friendshipStatus == "request_rejected") { %>
            <p>You rejected <%= profile.name %> friendship request</p>
            <form action="<%= profileUrl(profile.id, "/add_friend") %>" method="POST">
              <input type="submit" value="Add as friend" />
            </form>
          <% } %>

          <button class="button-yellow js-compose-secret-message" data-url="<%= profileUrl(profile.id, "/publish_secret") %>">
            👻 Secret Message
          </button>

          <div class="overlay" hidden></div>
          <div class="modal" hidden>
            <div class="modal-header">Write a secret message to <%= profile.name %></div>
            <div class="modal-body">
              <textarea name="message" class="compose-post js-secret-message-input" style="margin: 0"></textarea>
            </div>
            <div class="modal-footer">
              this message will disapear right after being read
              <button class="modal-confirm js-secret-publish">Publish</button>
              <div hidden class="js-sending-message"></div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <form action="<%= profileUrl(profile.id, "/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"><%= profile.name %>'s Wall</h2>
    <%- include('_posts', { posts }) %>
  </div>

  <div class="friends-communities">
    <h2>Friends</h2>
    <%- include('_friends', { friends: friends.friends }) %>
  </div>
</div>

<%- include('_footer') %>