17 files changed, 1089 insertions, 0 deletions

diff --git a/hyperkitty/templates/404.html b/hyperkitty/templates/404.html
new file mode 100644
index 0000000..dbc98cb
--- /dev/null
+++ b/hyperkitty/templates/404.html
@@ -0,0 +1,37 @@
+{% extends "base.html" %}
+{% load i18n %}
+{% block content %}		
+		<style>
+			#contentBox
+			{
+				padding:10px;
+				font-family: 'Times New Roman';
+				font-size:20px;
+				color:#444;
+				margin-left:300px;	
+				margin-top:100px;
+			}
+			.hello
+			{
+				font-size:100px;
+				color:#444;
+				font-family: 'Times New Roman';
+			}
+			a
+			{
+				color:#323232;
+			}
+		</style>
+
+		<div style="margin: 60px 40px 0 40px;">
+			<div id="contentBox" style="width:50%; ">
+				<span class="hello"> 404 </span>
+				<br/><br/>
+ 				<span style="font-size:60px; color:#444;font-family: 'Times New Roman';"> Oh! Snap </span> 
+				<br/><br/>
+				This is not the page you were looking for right!
+				<a href ="/">Fix This </a>
+			</div>
+		</div>
+		
+{% endblock %}
\ No newline at end of file
diff --git a/hyperkitty/templates/500.html b/hyperkitty/templates/500.html
new file mode 100644
index 0000000..6c156d7
--- /dev/null
+++ b/hyperkitty/templates/500.html
@@ -0,0 +1,37 @@
+{% extends "base.html" %}
+{% load i18n %}
+{% block content %}		
+		<style>
+			#contentBox
+			{
+				padding:10px;
+				font-family: 'Times New Roman';
+				font-size:20px;
+				color:#444;
+				margin-left:300px;	
+				margin-top:100px;
+			}
+			.hello
+			{
+				font-size:100px;
+				color:#444;
+				font-family: 'Times New Roman';
+			}
+			a
+			{
+				color:#323232;
+			}
+		</style>
+
+		<div style="margin: 60px 40px 0 40px;">
+			<div id="contentBox" style="width:50%; ">
+				<span class="hello"> 500 </span>
+				<br/><br/>
+ 				<span style="font-size:60px; color:#444;font-family: 'Times New Roman';"> Oh! Snap </span> 
+				<br/><br/>
+				This is not the page you were looking for right!
+				<a href ="/">Fix This </a>
+			</div>
+		</div>
+		
+{% endblock %}
\ No newline at end of file
diff --git a/hyperkitty/templates/api.html b/hyperkitty/templates/api.html
new file mode 100644
index 0000000..85f3cf0
--- /dev/null
+++ b/hyperkitty/templates/api.html
@@ -0,0 +1,77 @@
+{% extends "base.html" %}
+
+{% block additional_stylesheets %}
+  <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/thread.css" />
+{% endblock %}
+
+{% block content %}
+    <h2>REST API</h2>
+    <p>
+      HyperKitty comes with a small REST API allowing you to programatically retrieve 
+      emails and information.
+    </p>
+    
+    <div class="odd" style="padding-left: 1em">
+        <h3>Formats</h3>
+        <p>
+            This REST API can return the information into several formats.
+            The default format is html to allow human readibility.<br />
+            To change the format, just add 
+            <span style="font-style:italic">?format=&lt;FORMAT&gt;</span> to the url
+        </p>
+        <p>The list of available formats is:</p>
+        <ul>
+            <li>json <a>(?format=json)</a></li>
+            <li>json-p <a>(?format=json-p)</a></li>
+            <li>txt <a>(?format=txt)</a></li>
+            <li>xml <a>(?format=xml)</a></li>
+            <li>html <a>(?format=html)</a></li>
+            <li>xhtml <a>(?format=xhtml)</a></li>
+        </ul>
+    </div>
+    
+    <div class="even" style="padding-left: 1em">
+        <h3>Emails <a>/api/email/&lt;list name&gt;/&lt;Message-ID&gt;</a></h3>
+        <p>
+Using the address /api/email/&lt;list name&gt;/&lt;Message-ID&gt; you will be able to
+retrieve the information known about a specific email on the specified mailing-list.
+        </p>
+        <p> For example: <a href="/api/email/devel@fp.o/<1312985457.28933.34.camel@ankur.pc>/">
+            /api/email/devel@fp.o/&lt;1312985457.28933.34.camel@ankur.pc&gt;/
+        </a>
+        </p>
+    </div>
+    <div class="odd" style="padding-left: 1em">
+        <h3>Threads <a>/api/thread/&lt;list name&gt;/&lt;ThreadID&gt;</a></h3>
+        <p>
+        </p>
+        <p>
+Using the address /api/thread/&lt;list name&gt;/&lt;Message-ID&gt; you will be able to
+retrieve the all the email for a specific thread on the specified mailing-list.
+        </p>
+        <p> For example: <a href="/api/thread/devel@fp.o/1/">
+            /api/email/devel@fp.o/1/
+        </a>
+        </p>
+    </div>
+        <div class="even" style="padding-left: 1em">
+        <h3>Search <a>/api/search/&lt;list name&gt;/&lt;field&gt;/&lt;keyword&gt;</a></h3>
+        <p>
+        </p>
+        <p>
+Using the address /api/search/&lt;list name&gt;/&lt;field&gt;/&lt;keyword&gt; you will be able to
+search for all emails of the specified mailing-list containing the provided keyword in the given field.
+        </p>
+        <p>The list of available field is:</p>
+        <ul>
+            <li>From</li>
+            <li>Subject</li>
+            <li>Content</li>
+            <li>SubjectContent</li>
+        </ul>
+        <p> For example: <a href="/api/search/devel@fp.o/From/pingoured">
+            /api/search/devel@fp.o/From/pingoured
+        </a>
+        </p>
+    </div>
+{% endblock %}
diff --git a/hyperkitty/templates/base.html b/hyperkitty/templates/base.html
new file mode 100644
index 0000000..0ae6d4c
--- /dev/null
+++ b/hyperkitty/templates/base.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+		<meta name="ROBOTS" content="INDEX, FOLLOW" />
+		<title>{% block title %}{{ app_name|title }}{% endblock %}</title>
+		<meta name="author" content="" />
+		<meta name="dc.language" content="en" />
+		<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/normalize.css" />
+		<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/bootstrap.css" />
+		<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/style.css" />
+		{% block additional_stylesheets %} {% endblock %}
+	</head>
+	{% load i18n %}
+
+	<body>
+	<div class="navbar navbar-fixed-top">
+	      <div class="navbar-inner">
+	        <div class="container">
+	          <div class="nav-collapse collapse">
+	          	
+	           	{% if user.is_authenticated %}
+					 <li class="user_nav">
+					 	<a class="mm_logout" style="float:right;" href="{% url user_logout %}">Logout</a>
+					 </li>
+					 <li class="user_nav" style="float:right;">
+					 	<a style="float:right;" href="{% url user_profile %}">{{ user.username }}</a>
+					</li>
+				{% else %}
+					 <li class="user_nav" style="float:right;">
+					 	<a class="mm_user" style="float:right;" href="{% url user_login %}">Login</a>
+					 </li>
+					 <li class="user_nav" style="float:right;">
+					 	<a style="float:right;" href="{% url user_registration %}"> Sign Up </a>
+					</li>
+				{% endif %}		  
+
+
+	            <ul class="nav">
+
+				{% if list_address %}
+					<li id="list_name">
+						<a href="/list/{{list_address}}">{{list_address}}</a>
+					</li>
+				{% endif %}
+
+
+		        </ul>
+	          </div>
+	        </div>
+	      </div>
+	</div>
+
+
+	
+
+		<div class="container">
+			{% block content %} {% endblock %}
+		</div>
+		{% block footer %} {% endblock %}
+	</body>
+
+	<script src="{{ STATIC_URL }}js/libs/jquery-1.7.1.min.js"></script>
+	{% block additionaljs %} {% endblock %}
+</html>
diff --git a/hyperkitty/templates/index.html b/hyperkitty/templates/index.html
new file mode 100644
index 0000000..87ba148
--- /dev/null
+++ b/hyperkitty/templates/index.html
@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+{% load i18n %}
+{% block content %}
+<h1>{% trans 'Lists' %}</h1>
+
+<table class="table table-bordered table-striped">
+	<tbody>
+		{% for mlist in lists %}
+		<tr>
+			<td>{{ mlist }}</td>
+			<td><a href="/list/{{mlist}}"> Overview </a></td>
+			<td><a href="/archives/{{mlist}}"> Archives </a></td>
+		</tr>
+		{% endfor %}
+	</tbody>
+</table>
+
+{% endblock %}
diff --git a/hyperkitty/templates/login.html b/hyperkitty/templates/login.html
new file mode 100644
index 0000000..a137c97
--- /dev/null
+++ b/hyperkitty/templates/login.html
@@ -0,0 +1,58 @@
+{% extends "base.html" %}
+{% load i18n %}
+
+{% block content %}
+
+<h2>Login with username and password</h2>
+
+<form action="" method="post" class="login mm_clear">
+	{% csrf_token %}
+	{{ form.as_p }}
+	<input type=hidden name=next value={{ next }}>
+	<div class="field">
+		<button class="btn btn-primary" type="submit">
+			{% trans "Login" %}
+		</button>
+	</div>
+</form>
+
+
+<ul class="socialLogin">    								
+	<li><a title="Google" class="socialaccount_provider google" href="/login/google"><img src="{{ STATIC_URL }}img/login/google.png" alt="Google"></a></li>
+	
+	<li><a title="Yahoo" class="socialaccount_provider yahoo" href="/login/yahoo"><img src="{{ STATIC_URL }}img/login/yahoo.png" alt="Yahoo"></a></li>
+	
+	<li>
+		<form method="post" action="{% url socialauth_complete "browserid" %}">		
+			{% csrf_token %}
+			<input type="hidden" name="assertion" value="" />
+			<a rel="nofollow" id="browserid" href="#"><img src="{{ STATIC_URL }}img/login/browserid.png" alt="Login using BrowserID" /></a>
+		</form>
+	</li>
+
+</ul>
+
+{% endblock %}
+
+{% block additionaljs %}
+<!-- Include BrowserID JavaScript -->
+<script src="https://browserid.org/include.js" type="text/javascript"></script>
+<!-- Setup click handler that receives BrowserID assertion code and sends POST data -->
+<script type="text/javascript">
+	$(function() {
+		$('#browserid').click(function(e) {
+			e.preventDefault();
+			var self = $(this);
+
+			navigator.id.get(function(assertion) {
+				if (assertion) {
+					self.parent('form').find('input[type=hidden]').attr('value', assertion).end().submit();
+				} else {
+					alert('Some error occurred');
+				}
+			});
+		});
+	}); 
+</script>
+<!-- end browserid stuff -->
+{% endblock additionaljs %}
diff --git a/hyperkitty/templates/message.html b/hyperkitty/templates/message.html
new file mode 100644
index 0000000..592e85d
--- /dev/null
+++ b/hyperkitty/templates/message.html
@@ -0,0 +1,71 @@
+{% 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 %}
+
+<section id="thread_content">
+	{% include 'messages/first_email.html' with first_mail=message %}
+</section>
+
+{% endblock %}
+
+{% block additionaljs %}
+<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 : '/vote/{{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 : '/vote/{{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 %}
+	
+		});
+
+	}); 
+</script>
+
+{% endblock %}
diff --git a/hyperkitty/templates/messages/first_email.html b/hyperkitty/templates/messages/first_email.html
new file mode 100644
index 0000000..36c8468
--- /dev/null
+++ b/hyperkitty/templates/messages/first_email.html
@@ -0,0 +1,5 @@
+{% load gravatar %}
+
+<div class="first_email">
+	{% include 'messages/message.html' with email=first_mail unfolded='True' %}
+</div>
diff --git a/hyperkitty/templates/messages/message.html b/hyperkitty/templates/messages/message.html
new file mode 100644
index 0000000..feffcb9
--- /dev/null
+++ b/hyperkitty/templates/messages/message.html
@@ -0,0 +1,34 @@
+{% load gravatar %}
+
+<div class="email_header">
+	{% gravatar_img_for_email email.email 40 %}
+	<div class="email_author inline-block">
+		<span class="name"> <a href="/message/{{list_address}}/{{email.message_id}}">{{email.sender}}</a> </span>
+		<br />
+		<span class="rank">Rank 8</span>
+	</div>
+	<div class="email_date inline-block right">
+		<span class="date">{{email.date}}</span>
+		<br />
+	</div>
+</div>
+{% if unfolded %}
+	<div class="first_email_body">
+{% else %}
+	<div class="email_body">
+{% endif %}
+
+	{{email.content}}
+</div>
+<ul class="email_info inline" messageid="{{email.message_id}}">
+	<li class="neutral">
+		+{{email.likes}}/-{{email.dislikes}}
+	</li>
+	<li class="voteup">
+		<a href="#like"> Like</a>
+	</li>
+	<li class="votedown">
+		<a href="#dislike"> Dislike</a>
+	</li>
+</ul>
+
diff --git a/hyperkitty/templates/month_view.html b/hyperkitty/templates/month_view.html
new file mode 100644
index 0000000..5ba2445
--- /dev/null
+++ b/hyperkitty/templates/month_view.html
@@ -0,0 +1,111 @@
+{% extends "base.html" %}
+{% load poll_extras %}
+{% load gravatar %}
+
+{% block content %}
+
+<div id="recent_activities">
+	{% for email in threads %}
+	<!-- New thread -->
+	<div class="thread">
+		<div class="notsaved">
+			<span class="thread_title"> <a name="{{email.thread_id}}"
+				href="/thread/{{list_address}}/{{email.thread_id}}"> {{email.subject}} </a> </span>
+			<span class="thread_date"> {{email.date}}</span>
+		</div>
+		<div class="thread_content">
+			{% if email.category_tag %}
+			<div class="inline-block type type_{{email.category_tag}}">
+				<a href="/tag/{{list_address}}/{{email.category_tag}}"> {{email.category}} </a>
+			</div>
+			{% else %}
+			<div class="inline-block type type_{{email.category|lower}}">
+				<a href="/tag/{{list_address}}/{{email.category|lower}}"> {{email.category}} </a>
+			</div>
+			{% endif %}
+			<div class="inline-block gravatar">
+				{% if email.email %}
+				{% gravatar_img_for_email email.email 40 %}
+				<br />
+				{% endif %}
+				{{email.sender}}
+			</div>
+			<div class="inline-block thread_email">
+				<span class="expander"> {{email.content}} </span>
+			</div>
+		</div>
+		<div class="thread_info">
+			<ul class="tags inline">
+				<li>
+					Tags:
+				</li>
+				{% for tag in email.tags %}
+				<li>
+					<a href="/tag/{{list_address}}/{{tag}}">{{tag}}</a>
+				</li>
+				{% endfor %}
+			</ul>
+			<ul class="inline-block">
+				<li class="participant">
+					{{email.participants|length}} participants
+				</li>
+				<li class="discussion">
+					{{email.answers}} comments
+				</li>
+			</ul>
+			<ul class="inline-block">
+				<li class="like">
+					+{{email.liked}}
+				</li>
+				<li class="youlike">
+					<a href="#like"> Like</a>
+				</li>
+				<li class="youdislike">
+					<a href="#dislike"> Dislike</a>
+				</li>
+				{% if email.answers %}
+				<li class="showdiscussion">
+					<a href="#show"> Show discussion</a>
+				</li>
+				{% else %}
+				<li class="showdiscussion invisible">
+					<a href="#show"> Show discussion</a>
+				</li>
+				{% endif %}
+			</ul>
+		</div>
+	</div>
+	<!-- End of thread -->
+	{% empty %}
+	Sorry no emails could be found for your search.
+	{% endfor %}
+</div>
+<div id="archives">
+	{% for key, value in archives_length|sort %}
+	<h3>{{ key }}</h3>
+	<div>
+		<ul>
+			{% for ar_month in value %}
+			<li>
+				<a href="/archives/{{list_address}}/{{key}}/{{ar_month}}"> {{ ar_month|tomonth }} </a>
+			</li>
+			{% endfor %}
+		</ul>
+	</div>
+	{% endfor %}
+</div>
+
+{% endblock %}
+
+{% block additionaljs %}
+<script src="{{ STATIC_URL }}jquery.expander.js"></script>
+<script>
+	$(document).ready(function() {
+		$('span.expander').expander({
+			userCollapseText : 'View Less',
+			expandText : 'View More'
+		});
+	}); 
+</script>
+{% endblock %}
+
diff --git a/hyperkitty/templates/recent_activities.html b/hyperkitty/templates/recent_activities.html
new file mode 100644
index 0000000..d6f4516
--- /dev/null
+++ b/hyperkitty/templates/recent_activities.html
@@ -0,0 +1,212 @@
+{% extends "base.html" %}
+{% load poll_extras %}
+{% load gravatar %}
+
+{% block additional_stylesheets %}
+<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/stats.css" />
+{% endblock %}
+
+{% block content %}
+
+<section id="recent_activities">
+	<section id="graph">
+		<div id="fig">
+			<script type="text/javascript+protovis" >
+
+				var dates = ["{{dates_string|join:'","'}}"];
+
+				var data = {{evolution}},
+				w = 500,
+				h = 300,
+				x = pv.Scale.ordinal(pv.range(32)).splitBanded(0, w, 4/5),
+				y = pv.Scale.linear(0, {{evolution|length}}).range(0, h);
+
+				var vis = new pv.Panel()
+				.width(w)
+				.height(250)
+				.bottom(60)
+				.left(30)
+				.right(5)
+				.top(5);
+
+				var bar = vis.add(pv.Bar)
+				.data(data)
+				.event("click", function(n) self.location = "/archives/{{list_address}}/" + dates[this.index])
+				.left(function() x(this.index))
+				.width(x.range().band)
+				.bottom(0)
+				.height(y);
+
+				bar.anchor("bottom").add(pv.Label)
+				.textMargin(5)
+				.textAlign("right")
+				.textBaseline("middle")
+				.textAngle(-Math.PI / 3)
+				.text(function() xlabel(this.index));
+
+				function xlabel(ind){
+				if (!dates[ind -1]){
+				return dates[ind];
+				}
+				prev = dates[ind - 1];
+				cur = dates[ind];
+				if (prev.substring(0,7) == cur.substring(0,7)){
+				cur = cur.substring(8);
+				}
+				return cur;
+				}
+
+				var title = vis.add(pv.Label)
+				.left(250)
+				.top(16)
+				.textAlign("center")
+				.text("Activities on the list over the last 30 days");
+
+				vis.add(pv.Rule)
+				.data(y.ticks())
+				.bottom(function(d) Math.round(y(d)) - .5)
+				.strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000")
+				.add(pv.Rule)
+				.left(0)
+				.width(5)
+				.strokeStyle("#000")
+				.anchor("left").add(pv.Label)
+				.text(function(d) d.toFixed(1));
+
+				vis.render();
+
+			</script>
+		</div>
+	</section>
+	<section id="most_active">
+		<h2>Recently active discussions</h2>
+		{% for email in most_active_threads %}
+		<!-- Start thread -->
+		<div class="thread">
+			<span class="thread_id">#{{forloop.counter}}</span>
+			<span class="thread_title"> <a name="{{email.thread_id}}"
+				href="/thread/{{list_address}}/{{email.thread_id}}"> {{email.subject}} </a> </span>
+			<div class="thread_stats">
+				<ul class="inline-block">
+					{% if email.category_tag %}
+					<li class="type type_{{email.category_tag}}">
+						<a href="/tag/{{list_address}}/{{email.category_tag}}"> {{email.category}} </a>
+					</li>
+					{% else %}
+					<li class="type type_{{email.category|lower}}">
+						<a href="/tag/{{list_address}}/{{email.category|lower}}"> {{email.category}} </a>
+					</li>
+					{% endif %}
+					<li class="neutral">
+						0
+					</li>
+					<li class="participant">
+						{{email.participants|length}}
+					</li>
+					<li class="discussion">
+						{{email.answers}}
+					</li>
+				</ul>
+			</div>
+		</div>
+		<!-- End thread -->
+		{% endfor %}
+	</section>
+
+	<section id="top_discussion">
+		<h2>Top discussions the last 30 days</h2>
+		{% for email in top_threads %}
+		<!-- Start thread -->
+		<div class="thread">
+			<span class="thread_id">#{{forloop.counter}}</span>
+			<span class="thread_title"> <a name="{{email.thread_id}}"
+				href="/thread/{{list_address}}/{{email.thread_id}}"> {{email.subject}} </a> </span>
+			<div class="thread_stats">
+				<ul class="inline-block">
+					{% if email.category_tag %}
+					<li class="type type_{{email.category_tag}}">
+						<a href="/tag/{{list_address}}/{{email.category_tag}}"> {{email.category}} </a>
+					</li>
+					{% else %}
+					<li class="type type_{{email.category|lower}}">
+						<a href="/tag/{{list_address}}/{{email.category|lower}}"> {{email.category}} </a>
+					</li>
+					{% endif %}
+					<li class="neutral">
+						0
+					</li>
+					<li class="participant">
+						{{email.participants|length}}
+					</li>
+					<li class="discussion">
+						{{email.answers}}
+					</li>
+				</ul>
+			</div>
+		</div>
+		<!-- End thread -->
+		{% endfor %}
+	</section>
+
+	<section id="discussion_marker">
+		<h2>Prominent discussion maker</h2>
+		{% for author in top_author %}
+		<!-- Start discussion maker -->
+		<div class="maker">
+			<div class="inline-block maker_id">
+				#{{forloop.counter}}
+			</div>
+			<div class="inline-block gravatar">
+				{% if author.email %}
+				{% gravatar_img_for_email author.email 40 %}
+				<br />
+				{% endif %}
+			</div>
+			<div class="inline-block">
+				<span class="marker_name">{{author.name}}</span>
+				<br />
+				<span class="score">+{{author.kudos}}</span> kudos
+			</div>
+		</div>
+		<!-- End discussion maker -->
+		{% endfor %}
+
+		<h2>Tag cloud</h2>
+	</section>
+
+	<section id="discussion_by_topic">
+		<h2>Discussion by topic the last 30 days</h2>
+		{% for category, thread in threads_per_category.items %}
+		<div>
+			<h2 class="category type_{{category}}"> {{category}} </h2>
+			<ul class="category_entry">
+				{% for email in thread %}
+				<li>
+					{{email.title}}
+				</li>
+				{% endfor %}
+			</ul>
+		</div>
+		{% endfor %}
+	</section>
+</section>
+<section id="archives">
+	{% for key, value in archives_length|sort %}
+	<h3>{{ key }}</h3>
+	<div>
+		<ul>
+			{% for ar_month in value %}
+			<li>
+				<a href="/archives/{{list_address}}/{{key}}/{{ar_month}}"> {{ ar_month|tomonth }} </a>
+			</li>
+			{% endfor %}
+		</ul>
+	</div>
+	{% endfor %}
+</section>
+{% endblock %}
+
+{% block additionaljs %}
+	<script type="text/javascript" src="{{ STATIC_URL }}protovis-d3.1.js"></script>
+{% endblock %}
+
diff --git a/hyperkitty/templates/register.html b/hyperkitty/templates/register.html
new file mode 100644
index 0000000..1e96907
--- /dev/null
+++ b/hyperkitty/templates/register.html
@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+{% load i18n %}
+
+{% block content %}
+
+<form action="" method="post" class="login mm_clear">
+	{% csrf_token %}
+	{{ form.as_p }}
+	<input type=hidden name=next value={{ next }}>
+	<div class="field">
+		<button class="btn btn-primary" type="submit">
+			{% trans "Register" %}
+		</button>
+	</div>
+</form>
+
+{% endblock %}
diff --git a/hyperkitty/templates/search.html b/hyperkitty/templates/search.html
new file mode 100644
index 0000000..e0e4f8c
--- /dev/null
+++ b/hyperkitty/templates/search.html
@@ -0,0 +1,106 @@
+{% extends "base.html" %}
+{% load poll_extras %}
+{% load gravatar %}
+
+{% block content %}
+
+{% if threads.object_list %}
+<div class="pagination">
+	<span class="step-links"> {% if threads.has_previous %} <a href="{{full_path|strip_page}}/{{ threads.previous_page_number }}">previous</a> {% endif %} <span class="current"> Page {{ threads.number }} of {{ threads.paginator.num_pages }}. </span> {% if threads.has_next %} <a href="{{full_path|strip_page}}/{{ threads.next_page_number }}">next</a> {% endif %} </span>
+</div>
+{% endif %}
+
+{% for email in threads.object_list %}
+<!-- New thread -->
+<div class="thread">
+	<div class="notsaved">
+		<a href="/thread/{{list_address}}/{{email.thread_id}}"> <span class="thread_title">{{email.subject}}</span> </a>
+		<span class="thread_date">{{email.date}}</span>
+	</div>
+	<div class="thread_content">
+		{% if email.category_tag %}
+		<div class="inline-block type type_{{email.category_tag}}">
+			<a href="/tag/{{list_address}}/{{email.category_tag}}"> {{email.category}} </a>
+		</div>
+		{% else %}
+		<div class="inline-block type type_{{email.category|lower}}">
+			<a href="/tag/{{list_address}}/{{email.category|lower}}"> {{email.category}} </a>
+		</div>
+		{% endif %}
+		<div class="inline-block gravatar">
+			{% if email.email %}
+			{% gravatar_img_for_email email.email 40 %}
+			<br />
+			{% endif %}
+			{{email.sender}}
+		</div>
+		<div class="inline-block thread_email">
+			<span class="expander"> {{email.content}} </span>
+		</div>
+	</div>
+	<div class="thread_info">
+		<ul class="tags inline">
+			<li>
+				Tags:
+			</li>
+			{% for tag in email.tags %}
+			<li>
+				<a href="/tag/{{list_address}}/{{tag}}">{{tag}}</a>
+			</li>
+			{% endfor %}
+		</ul>
+		<ul class="inline-block">
+			<li class="participant">
+				{{email.participants|length}} participants
+			</li>
+			<li class="discussion">
+				{{email.answers}} comments
+			</li>
+		</ul>
+		<ul class="inline-block">
+			<li class="like">
+				+{{email.liked}}
+			</li>
+			<li class="youlike">
+				<a href="#like"> Like</a>
+			</li>
+			<li class="youdislike">
+				<a href="#dislike"> Dislike</a>
+			</li>
+			{% if email.answers %}
+			<li class="showdiscussion">
+				<a href="#show"> Show discussion</a>
+			</li>
+			{% else %}
+			<li class="showdiscussion invisible">
+				<a href="#show"> Show discussion</a>
+			</li>
+			{% endif %}
+		</ul>
+	</div>
+</div>
+<!-- End of thread -->
+{% empty %}
+Sorry no emails could be found for your search.
+{% endfor %}
+
+{% if threads.object_list %}
+<div class="pagination">
+	<span class="step-links"> {% if threads.has_previous %} <a href="{{ threads.previous_page_number }}">previous</a> {% endif %} <span class="current"> Page {{ threads.number }} of {{ threads.paginator.num_pages }}. </span> {% if threads.has_next %} <a href="{{ threads.next_page_number }}">next</a> {% endif %} </span>
+</div>
+{% endif %}
+
+{% endblock %}
+
+{% block additionaljs %}
+<script src="{{ STATIC_URL }}jquery.expander.js"></script>
+<script>
+	$(document).ready(function() {
+		$('span.expander').expander({
+			userCollapseText : 'View Less',
+			expandText : 'View More'
+		});
+	}); 
+</script>
+{% endblock %}
+
diff --git a/hyperkitty/templates/thread.html b/hyperkitty/templates/thread.html
new file mode 100644
index 0000000..abf6747
--- /dev/null
+++ b/hyperkitty/templates/thread.html
@@ -0,0 +1,99 @@
+{% 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 threads %}
+		<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 : '/vote/{{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 : '/vote/{{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 %}
+	
+		});
+
+	}); 
+</script>
+
+{% endblock %}
diff --git a/hyperkitty/templates/threads/add_tag_form.html b/hyperkitty/templates/threads/add_tag_form.html
new file mode 100644
index 0000000..65f6577
--- /dev/null
+++ b/hyperkitty/templates/threads/add_tag_form.html
@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% block header %} {% endblock %}
+
+{% block content %}
+<form action="/addtag/{{list_address}}/{{email_id}}/" method="post">
+	{% csrf_token %}
+	{{ addtag_form }}
+	<button type="submit">
+		Add
+	</button>
+</form>
+{% endblock %}
diff --git a/hyperkitty/templates/threads/right_col.html b/hyperkitty/templates/threads/right_col.html
new file mode 100644
index 0000000..9a1e448
--- /dev/null
+++ b/hyperkitty/templates/threads/right_col.html
@@ -0,0 +1,60 @@
+{% load gravatar %}
+
+<!-- right column -->
+<section id="thread_overview_info">
+	<!-- Start dates -->
+	<div id="thread_date_info">
+		<div class="days_num inline-block">
+			21
+		</div>
+		<div class="days_text inline-block">
+			days
+			<br />
+			inactive
+		</div>
+		<div id="days_old" class="days_num inline-block">
+			24
+		</div>
+		<div class="days_text inline-block">
+			days
+			<br />
+			old
+		</div>
+	</div>
+	<p id="add_to_fav">
+		<a href="#AddFav" class="notsaved">Add to favorite discussions</a>
+	</p>
+	<!-- End dates -->
+	<hr id="grey"/>
+	<div id="tags">
+		<span id="tag_title">tags </span>({{tags|length}})
+		<ul class="inline">
+			{% for tag in tags %}
+			<li>
+				{{ tag }} |
+			</li>
+			{% endfor %}
+		</ul>
+	</div>
+	<div id="add_tag">
+		<form action="/addtag/{{list_address}}/{{first_mail.message_id}}/" method="post">
+			{% csrf_token %}
+			{{ addtag_form.as_p }}
+			<button type="submit">
+				Add a tag
+			</button>
+		</form>
+	</div>
+	<div id="participants">
+		<span id="participants_title"> participants </span>({{participants|length}})
+		<ul>
+			{% for key,value in participants.items %}
+			<li>
+				{% gravatar_img_for_email value.email 20%}
+				{{key}}
+			</li>
+			{% endfor %}
+		</ul>
+	</div>
+</section>
+
diff --git a/hyperkitty/templates/user_profile.html b/hyperkitty/templates/user_profile.html
new file mode 100644
index 0000000..f0aa27e
--- /dev/null
+++ b/hyperkitty/templates/user_profile.html
@@ -0,0 +1,69 @@
+{% extends "base.html" %}
+{% load i18n %}
+{% load poll_extras %}
+
+{% block content %}
+    <h1>User Profile <span>- {{ user }}</span></h1>
+
+    <table class="table table-bordered table-striped mm_userData">
+    	<tbody>
+    		<tr>
+    			<th>{% trans 'User name' %}</th>
+    			<td>{{ user.username}}</td>
+    		</tr>
+    		<tr>
+    			<th>{% trans 'Firstname' %}</th>
+    			<td>{{ user.first_name }}</td>
+    		</tr>
+    		<tr>
+    			<th>{% trans 'Lastname' %}</th>
+    			<td>{{ user.last_name }}</td>
+    		</tr>
+		<tr>
+    			<th>{% trans 'Email' %}</th>
+    			<td>{{ user.email }}</td>
+    		</tr>
+		<tr>
+    			<th>{% trans 'Karma' %}</th>
+    			<td>{{ user_profile.karma }}</td>
+    		</tr>
+		<tr>
+    			<th>{% trans 'Date Joined' %}</th>
+    			<td>{{ user.date_joined }}</td>
+    		</tr>
+    	</tbody>
+    </table>
+    <h3> Up Votes : </h3>
+
+	<ul>
+	{% for vote in user_profile.votes %}
+		{% if vote.vote == 1 %}
+		<li>
+		{% if vote.message.content|trimString|length > 0 %}
+			<a href="/message/{{vote.list_address}}/{{vote.messageid}}">{{ vote.message.content|truncatechars:20 }}</a>
+		{% else %}
+			<a href="/message/{{vote.list_address}}/{{vote.messageid}}">Message is empty</a>
+		{% endif %}
+		</li>
+		{% endif %}
+	{% endfor %}
+	</ul>
+
+	<h3> Down Votes : </h3>
+
+	<ul>
+	{% for vote in user_profile.votes %}
+		{% if vote.vote == -1 %}
+		<li>
+		{% if vote.message.content|trimString|length > 0 %}
+			<a href="/message/{{vote.list_address}}/{{vote.messageid}}">{{ vote.message.content|truncatechars:20 }}</a>
+		{% else %}
+			<a href="/message/{{vote.list_address}}/{{vote.messageid}}">Message is empty</a>
+		{% endif %}
+		</li>
+		{% endif %}
+	{% endfor %}
+	</ul>
+
+
+{% endblock %}