<%- partial('sidebar') %>

<div id='content'>
	<div class='panel'>
		<div class='header'>
			<ul class='breadcrumb'>
				<li><a href='/'>主页</a><span class='divider'>/</span></li>
				<li class='active'>新消息</li>
			</ul>
		</div>
		<% if (locals.hasnot_read_messages && hasnot_read_messages.length > 0) { %>
		<%- partial('message/message', { collection: hasnot_read_messages, as: 'message' }) %>
		<div class='cell'>
			<button id='mark_all_messages_btn' class='btn fr'>标记所有消息为已读</button>
			<div class='sep10'></div>
			<div class='sep10'></div>
		</div>
		<% } else { %>
		<div class='inner'>
			<p>无消息</p>
		</div>
		<% } %>
	</div>
	<div class='sep10'></div>
	<div class='panel'>
		<div class='header'>
			<span class='col_fade'>过往信息</span>
		</div>
		<% if (locals.has_read_messages && has_read_messages.length > 0) { %>
		<%- partial('message/message', { collection: has_read_messages, as: 'message' }) %>
		<% } else { %>
		<div class='inner'>
			<p>无消息</p>
		</div>
		<% } %>
	</div>
</div>

<script type='text/javascript'>
$(document).ready(function() {
	$('.mark_read_btn').click(function() {
		var $me = $(this);
		var message_id = $me.parent().attr('message_id');
		var data = {
			message_id: message_id,
			_csrf: '<%- csrf %>'
		};
		$.post('/messages/mark_read', data, function(data) {
			if (data.status === 'success') {
				$me.parent().toggleClass('message');
				$me.parent().find('.unread').each(function(index) {
					$($me.parent().find('.unread')[index]).removeClass('unread');
					var count = parseInt($('.messages_count').html()) - 1;
					$('.messages_count').html(count);
				})
			}
		}, 'json');
	});
	$('#mark_all_messages_btn').click(function() {
		var $parent = $(this).parent().parent();
		$.post('/messages/mark_all_read', { _csrf: '<%- csrf %>' }, function(data) {
			if (data.status === 'success') {
				$parent.find('.message').each(function() {
					$me = $(this);
					$me.toggleClass('message');
					$me.find('.marked_icon').show();
					$me.find('.unread').removeClass('unread');
					$('.messages_count').html(0);
				});
			}
		}, 'json');
	});
});
</script>
