<!DOCTYPE html>
<%- include('partials/head', { title: lang.global.messages }); %>
<body>
<%- include('partials/nav_bar', { selection: 3, pid: pid }); %>
<div id="body">
    <header id="header">
        <h1 id="page-title" class=""><%= lang.global.messages %></h1>
    </header>
    <div class="body-content" id="messages-list">
        <ul class="list-content-with-icon-and-text arrow-list">
            <% if(conversations.length === 0) {%>
                <p class="no-posts-text"><%= lang.messages.coming_soon %></p>
            <%} else { %>
                <% conversations.forEach(function(conversation) { %>
                        <%
                            // get the PID of the opposite user
                            var userObj, me;
                            if(conversation.users[0].pid === pid) {
                                userObj = conversation.users[1];
                                me = conversation.users[0];
                            }
                            else if(conversation.users[1].pid === pid) {
                                userObj = conversation.users[0];
                                me = conversation.users[1];
                            }
                        %>
                        <li>
                            <a href="/users/show?pid=<%= userObj.pid %>" data-pjax="#body"
                               class="icon-container trigger"><img src="https://mii.olv.pretendo.cc/mii/<%= userObj.pid %>/normal_face.png" class="icon<%if(userObj.official) {%> verified<%}%>"></a>
                            <a href="/friend_messages/<%= conversation.id %>" data-pjax="#body" class="arrow-button"></a>
                            <div class="body">
                                <p class="title">
                                    <span class="nick-name"><%= usersMap.get(userObj.pid) %></span>
                                    <span class="id-name">@<%= usersMap.get(userObj.pid) %></span>
                                </p>
                                <span class="timestamp"><%= moment(conversation.last_updated).fromNow() %></span>
                                <p class="text"><%= conversation.message_preview %></p>
                            </div>
                        </li>
                <% });} %>
        </ul>
    </div>
</div>
</body>
</html>