{% extends 'base.html' %}
{% load url from future %}
{% block title %} Comments {% endblock %}
{% block extra_css %}
<link type="text/css" rel="stylesheet" href="/static/css/supporter_layout.css" />
<link type="text/css" rel="stylesheet" href="/static/css/comments.css" />
{% endblock %}
{% block extra_head %}
<script type="text/javascript" src="/static/js/wishlist.js"></script>
<script type="text/javascript" src="{{ jquery_ui_home }}"></script>
<script type="text/javascript" src="/static/js/greenpanel.js"></script>
<script type="text/javascript" src="/static/js/toggle.js"></script>
<script type="text/javascript" src="/static/js/tabs.js"></script>
{% endblock %}
{% block topsection %}

<div id="js-topsection">
    <div class="js-main">
        <div class="js-topnews">
            <div class="js-topnews1">
                <div class="js-topnews2">
                    <div class="js-topnews3">
                        <div class="user-block">
                            <div id="user-block1">
                            	<div id="block-intro-text"><span class="special-user-name">Latest Comments</span></div>
                            </div>
                            <div class="user-block24"><span class="user-short-info">Here's what Ungluers are saying about their books.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
       
    </div>
</div>

{% endblock %}

{% block content %}
<div id="main-container">
    <div class="js-main">
        <div id="js-leftcol">
            {% include "explore.html" %}
        </div>

        <div id="js-maincol-fr">
        <div class="js-maincol-inner">
            <div id="content-block">
                <div id="content-block-content">
                <div style="height:46px;"></div>
					{% for comment in latest_comments %}
					{% with comment.content_object.id as id %}
                    {% with comment.user as user %}
						<div class="comments {% cycle 'row1' 'row2' %} {% if comment.content_object.last_campaign and comment.user in comment.content_object.last_campaign.managers.all %}official{% endif %}">
						  <div class="nonavatar">
   							<div class="image">
      							<a href="{% url 'work' id %}?tab=2"><img src="{{ comment.content_object.cover_image_thumbnail }}" alt="cover image" /></a>
   							</div>
      						  <span><a href="{% url 'supporter' comment.user %}">{{ comment.user.username }}</a> on <a href="{% url 'work' id %}?tab=2">{{ comment.content_object.title }}</a></span><br />
  						  	  
					    	  <span class="text">{{ comment.comment|linebreaksbr }}</span>
   						   </div>
   						   
						   <div class="avatar">
						   	  <a href="{% url 'supporter' comment.user %}">
            					<img class="user-avatar" src="{{ comment.user.profile.avatar_url }}" height="50" width="50" alt="Avatar for {{ comment.user }}" title="{{ comment.user }}" />
         					  </a>
      					   </div>
					</div>
    				{% endwith %}
  					{% endwith %}
					{% endfor %}

                </div>
            </div>    
        </div>
        </div>
    </div>
    </div>
{% endblock %}