<html>
<head>
    <link rel="stylesheet" type="text/css" href="<%= cdnURL %>/css/juxt.css">
    <script src="<%= cdnURL %>/js/pjax.min.js"></script>
    <script src="<%= cdnURL %>/js/juxt.js"></script>
    <!-- Google Analytics -->
    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-195842548-1', 'auto');
        ga('send', 'pageview');
    </script>
    <!-- End Google Analytics -->

</head>
<body>
<%- include('nav_bar', { selection: 3 }); %>
<div id="main">
    <h1 id="title" class="page-header"><%= lang.global.messages %></h1>
    <div class="community-page-posts-wrapper">
        <table cellspacing="0" style="margin-top: 25px">
            <tbody id="messages-list">
            <% if(conversations.length === 0) {%>
                <p class="no-posts-text"><%= lang.messages.coming_soon %></p>
            <%} else { %>
                <% conversations.forEach(function(conversation) { %>
                    <%
                        var position = conversation.pid1.pid === user.pid.toString() ? conversation.pid2 : conversation.pid1;
                    %>
                    <tr class="message-wrapper" onclick="showMessage('<%= conversation.id %>')">
                        <td class="messages-unread-badge-wrapper">
                            <%if(!position.read) {%><div class="unread-badge"></div><%}%>
                        </td>
                        <td>
                            <%if(position.official) {%>
                                <img class="community-page-post-user-icon verified" src="<%= mii_image_CDN %>/<%= position.pid %>/normal_face.png">
                                <span class="message-page-verified-user-badge community-page-verified" style=""></span>
                            <%} else {%>
                                <img class="community-page-post-user-icon" src="<%= mii_image_CDN %>/<%= position.pid %>/normal_face.png">
                                <span class="community-page-verified-user-badge community-page-verified" style="display: none;"></span>
                            <%}%>
                        </td>
                        <td>
                            <h2 class="message-list-title"><%= position.screen_name %></h2>
                            <h4 class="message-list-timestamp"> - <%= moment(conversation.last_message_sent).fromNow() %></h4>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td colspan="2" class="message-list-preview"><%= conversation.message_preview %></td>
                    </tr>
                <% }); %>
            <%}%>
            </tbody>
        </table>
    </div>
    <img src="" onerror="wiiuBrowser.showLoadingIcon(!1);window.scroll(0, 0);">
</div>
<body onload="stopLoading();wiiuBrowser.lockUserOperation(false);">
</body>
</html>
