<html lang="en">
<head>
    <%- include('partials/head'); %>
</head>
<body>
<div id="main">
    <h2 id="title" class="page-header"><%= userMap.get(user2.pid) %></h2>
    <%- include('partials/nav_bar', { selection: 3, pid: pid }); %>
    <div id="toast"></div>
    <div id="wrapper">
		<div class="body-content message-post-list" id="message-page">
		<button id="header-post-button" class="header-button" href="#" data-module-hide="message-page" data-module-show="add-post-page" data-header="true" data-menu="true">+</button>
        <% messages.forEach(function(message) { %>
            <div id="message-<%= message.id %>" class="post scroll <%if(message.pid === pid) {%>my-post<%} else {%>other-post<%}%>">
                <a href="/users/show?pid=<%= message.pid %>" data-pjax="#body" class="scroll-focus mii-icon-container">
                    <img src="<%= cdnURL %><%= message.mii_face_url.substring(message.mii_face_url.lastIndexOf('/mii')) %>" class="mii-icon">
                </a>
                <div class="post-body">
                    <%if(message.screenshot) {%>
                        <img class="message-viewer-bubble-sent-screenshot" src="<%= cdnURL %><%= message.screenshot %>">
                    <%}%>
                    <%if(message.painting) {%>
                        <img class="message-viewer-bubble-sent-memo" src="<%= cdnURL %>/paintings/<%=message.pid%>/<%=message.id%>.png">
                    <%}else {%>
                        <p class="post-content"><%= message.body %></p>
                    <%}%>
                </div>
				<footer>
                    <span class="timestamp"><%= moment(message.created_at).fromNow()%></span>
                </footer>
            </div>
        <%});%>
		</div>
		<%- include('partials/new_post', { pid, lang, id: conversation.id, name: userMap.get(user2.pid), url: '/friend_messages/new', show: 'message-page', message_pid: user2.pid  }); %>
		<div id="painting-wrapper" class="painting-wrapper" style="display: none;">
			<div id="painting-content">
				<div class="tools">
					<div>
						<button class="clear" onclick="clearCanvas()"></button>
						<button class="undo"></button>
					</div>
					<div>
						<ul class="buttons pencil">
							<li>
								<input onclick="setPen(0)" type="radio" value="0" class="pencil small" name="tool" checked>
							</li>
							<li>
								<input onclick="setPen(1)" type="radio" value="1" class="pencil medium" name="tool">
							</li>
							<li>
								<input onclick="setPen(2)" type="radio" value="2" class="pencil large" name="tool">
							</li>
						</ul>
						<ul class="buttons eraser">
							<li>
								<input onclick="setEraser(0)" type="radio" value="0" class="eraser small" name="tool">
							</li>
							<li>
								<input onclick="setEraser(1)" type="radio" value="1" class="eraser medium" name="tool">
							</li>
							<li>
								<input onclick="setEraser(2)" type="radio" value="2" class="eraser large" name="tool">
							</li>
						</ul>
					</div>
				</div>
				<canvas width="320" height="120" id="painting">Your browser does not support the HTML canvas tag.</canvas>
				<div id="button-wrapper">
					<button onclick="closePainting(false)">Cancel</button>
					<button class="primary" onclick="closePainting(true)">OK</button>
			   </div>
			</div>
			<script src="/js/painting.js"></script>
		</div>
    </div>
	<img src="" onerror="setTimeout(function() { window.scrollTo(0, 50000); }, 500)">
</div>
</body>
</html>
