{% extends "base.html" %}

{% load gravatar %}
{% load hk_generic %}

{% block additional_stylesheets %}
<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/thread.css" />
{% endblock %}

{% block content %}

    <header>
        {% for thread in neighbors %}
            {% if thread %}
            <a class="thread-{% ifequal forloop.counter 1 %}older{% else %}newer{% endifequal %}"
               href="{% url thread threadid=thread.thread_id, mlist_fqdn=list_address %}"
               >{{ thread.subject|strip_subject:mlist|truncatesmart:"22" }}</a>
            {% endif %}
        {% endfor %}
        <h1>{{ subject }}</h1>
    </header>

	{% include 'threads/right_col.html' %}

	<!-- main section, the email thread -->
	<section id="thread_content">

		<!-- Start first email -->
		{% include 'messages/first_email.html' %}
		<!-- End first email -->

		{% for email in replies %}
		<div class="{% cycle 'even' 'odd' %}">
			<!-- Start email -->
			{% include 'messages/message.html' %}
			<!-- End of email -->
		</div>
		{% endfor %}

	</section>

<!-- end of content -->
{% endblock %}

{% block additionaljs %}

<script src="{{ STATIC_URL }}jquery.expander.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('div.email_body').expander({
			userCollapseText : 'View Less',
			expandText : 'View More'
		});
	});
</script>

<script type="text/javascript">
	$(document).ready(function() {
		$(".voteup").click(function() {
			// @TODO: Extract the message id from the HTML DOM element instead of hard coding it in Javascript.
			message_id = this.parentElement.getAttribute('messageid');
			{% if user.is_authenticated %}
			$.ajax({
				type : "POST",
				url : '{% url message_vote mlist_fqdn=list_address %}',
				data : {
					vote : 1,
					messageid : message_id,
					list : "{{list_address}}",
					csrfmiddlewaretoken : '{{ csrf_token }}'
				},
				success : function(response) {
					console.log(response);
					location.reload();
				}
			});
			return false;
			{% else %}
				alert('You need to login in order to vote');
			{% endif %}
		});

		$(".votedown").click(function() {
			message_id = this.parentElement.getAttribute('messageid');
			{% if user.is_authenticated %}
			$.ajax({
				type : "POST",
				url : '{% url message_vote mlist_fqdn=list_address %}',
				data : {
					vote : -1,
					messageid : message_id,
					list : "{{list_address}}",
					csrfmiddlewaretoken : '{{ csrf_token }}'
				},
				success : function(response) {
					console.log(response);
					// @TODO : Remove this reload and update count using AJAX
					location.reload();
				}
			});
			return false;
			{% else %}
				alert('You need to login in order to vote');
			{% endif %}

		});

		$("#add_tag_form").submit( function () {

			   {% if user.is_authenticated %}
		        $.ajax({
		            type: "POST",
		            data : $(this).serialize(),
		            url: "{% url add_tag mlist_fqdn=list_address, email_id=threadid %}",
		            success: function(data){
		                console.log('Tag is added successfully');
		                location.reload();
		            }
		        });
		        return false;
				{% else %}
					alert('You need to login in order to add tag');
				{% endif %}
		 });

        $("ul.email_info li.attachments ul.attachments-list").hide();
        $("ul.email_info li.attachments > a").click(function() {
            $(this).next("ul").fadeToggle('fast');
        });

	});
</script>
{% endblock %}