{% extends "base.html" %}

{% load gravatar %}

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

{% block content %}

	{% 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 %}
		 });
	
		
	}); 
</script>
{% endblock %}