<html lang="en">
<head>
    <%- include('partials/head'); %>
</head>
<body>
<div id="main">
    <h2 id="title" class="page-header"><%= lang.global.messages %></h2>
    <%- include('partials/nav_bar', { selection: 3, pid: pid }); %>
    <div id="toast"></div>
    <div id="wrapper">
        <% if(conversations.length === 0) {%>
            <li><p><%= lang.messages.coming_soon %><</p></li>
        <%} else { %>
            <ul class="list-content-with-icon-and-text arrow-list" id="news-list-content">
            <% 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>
                        <div class="hover">
                            <a href="/users/<%= userObj.pid %>" data-pjax="#body" class="icon-container notify">
                                <img src="https://pretendo-cdn.b-cdn.net/mii/<%= userObj.pid %>/normal_face.png" class="icon">
                            </a>
                            <a class="body messages" href="/friend_messages/<%= conversation.id %>">
                                <span class="text">
                                    <span class="nick-name"><%= usersMap.get(userObj.pid) %></span>
                                    <span class="timestamp">@<%= usersMap.get(userObj.pid) %></span>
                                </span>
                                <span class="text">
                                    <span class="link"> <%= conversation.message_preview %></span>
                                    <span class="timestamp"> - <%= moment(conversation.last_updated).fromNow() %></span>
                                </span>
                            </a>
                        </div>
                    </li>

        <% });} %>
        </ul>
    </div>
</div>
</body>
</html>
