<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">
    <div id="message-viewer">
        <div class="message-viewer-top-cover"></div>
        <div class="message-viewer-bottom-cover"></div>
        <div class="message-viewer-top-banner">
            <table>
                <tbody>
                <tr>
                    <td>
                        <div class="message-viewer-top-banner-back-button" onclick="back()"></div>
                    </td>
                    <td>
                        <img id="message-viewer-icon" src="<%= mii_image_CDN %>/<%= user2.pid %>/normal_face.png">
                    </td>
                    <td>
                        <h2 id="message-viewer-name"><%= user2.user_id %></h2>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
        <div id="message-viewer-content" style="display: block;">
            <% messages.forEach(function(message) { %>
                <%if(message.pid === user.pid) {%>
                <div class="message-viewer-bubble-sent">
                    <%if(message.painting) {%>
                    <img class="message-viewer-bubble-sent-memo" src="data:image/bmp;base64,<%= message.painting_uri %>">
                    <%}else {%>
                    <p class="message-viewer-bubble-sent-text"><%= message.body %></p>
                    <%}%>
                </div>
                <div class="message-viewer-bubble-sent-timestamp"><p><%= moment(message.created_at).fromNow()%></p></div>
                <%} else if(message.pid === user2.pid) {%>
                <div class="message-viewer-bubble-receive">
                    <%if(message.painting) {%>
                        <img class="message-viewer-bubble-sent-memo" src="data:image/bmp;base64,<%= message.painting_uri %>">
                    <%}else {%>
                        <p class="message-viewer-bubble-receive-text"><%= message.body %></p>
                    <%}%>
                </div>
                <div class="message-viewer-bubble-receive-timestamp"><p><%= moment(message.created_at).fromNow()%></p></div>
                <%}%>
            <%});%>

        </div>
        <div class="message-viewer-bottom-banner">
            <table>
                <tbody>
                <tr>
                    <td>
                        <div id="message-viewer-attach-button" onclick="sendPainting('<%= conversation.id %>', '<%= user2.pid %>')"></div>
                    </td>
                    <td>
                        <form action="javascript:sendMessage('<%= conversation.id %>', '<%= user2.pid %>')">
                            <input id="message-viewer-input" type="text" placeholder="Send message..." name="message">
                        </form>
                    </td>
                    <td>
                        <div id="message-viewer-submit-button" onclick="sendMessage('<%= conversation.id %>', '<%= user2.pid %>')"></div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <img src="" onerror="wiiuBrowser.showLoadingIcon(!1);">
</div>
<body onload="stopLoading();wiiuBrowser.lockUserOperation(false);">
</body>
</html>
