{% extends "closedverse_main/layout.html" %}
{% load static %}{% load closedverse_tags %}{% load closedverse_user %}
{% block main-body %}
{% user_sidebar request user user.profile 0 True %}
<div class="main-column messages">
  <div class="post-list-outline">

    <h2 class="label">Messages
		<span class="message-chk">
			<input type="checkbox" name="online" value="{% if request.session.messages_online %}n{% else %}1{% endif %}"{% if request.session.messages_online %} checked{% endif %}> Only show online friends
		</span>
	</h2>
	<!--
	{% if friends %}
		<form class="friend-search search" action="{% url "main:messages" %}">
			<input type="text" name="query" title="Search friends" placeholder="Search friends" minlength="2" maxlength="16">
			<input type="submit" value="q" title="Search">
		</form>
	{% endif %}
	-->
	<div class="list">
		{% if friends %}
				<ul class="list-content-with-icon-and-text arrow-list" data-next-page-url="{% if next %}?offset={{ next }}{% endif %}">
		{% for friend in friends %}
					<li class="trigger{% if not friend.get_latest_msg.mine and friend.get_latest_msg.read == False %} notify{% endif %}" data-href="{% url "main:messages-view" friend.username %}">
						{% user_icon_container friend 0 True %}

					  <div class="body">
						<p class="title">
						  <span class="nick-name"><a {% if friend.color %}style=color:{{ friend.color }}{% endif %} href="{% url "main:user-view" friend.username %}">{{ friend.nickname }}</a></span>
						  <span class="id-name">{{ friend.username }}</span>
						</p>
						{% if friend.get_latest_msg %}
						<span class="timestamp">{% time friend.get_latest_msg.created %}</span>
						<p class="text {% if friend.get_latest_msg.drawing or friend.get_latest_msg.is_rm %}type-memo {% endif %}{% if friend.get_latest_msg.mine %}my{% else %}other{% endif %}">{{ friend.get_latest_msg.trun }}</p>
						{% else %}
						<p class="text placeholder">You haven't exchanged messages with this user yet.</p>
						{% endif %}

					  </div>
					</li>
		{% endfor %}
			</ul>
	{% else %}
		{% nocontent "You don't have any friends yet." %}
	{% endif %}
	</div>
  </div>
</div>
{% endblock %}