Basic Nested & Collapsible Comments

templates/post.html

@@ -4,6 +4,22 @@
 	{% call super() %}
 	<meta name="author" content="u/{{ post.author }}">
 {% endblock %}
+
+{% macro comment(item) -%}
+
+<div class="comment">
+	<div class="comment_left">
+		<h3 class="comment_score">{{ item.score }}</h3>
+		<div class="line"></div>
+	</div>
+	<details class="comment_right" open>
+		<summary class="comment_data">
+			<a class="comment_author" href="/u/{{ item.author }}">u/{{ item.author }}</a> • <span class="datetime">{{ item.time }}</span>
+		</summary>
+		<h4 class="comment_body">{{ item.body }}</h4>
+
+{%- endmacro %}
+
 {% block content %}
 	<div class="post highlighted">
 		<div class="post_left">
@@ -40,19 +56,21 @@
 		<div id="sort_controversial"><a href="?sort=controversial">Controversial</a></div>
 		<div id="sort_old"><a href="?sort=old">Old</a></div>
 	</div>
-	{% for comment in comments %}
-	<div class="comment">
-		<div class="comment_left">
-			<div class="comment_upvote">↑</div>
-			<h3 class="comment_score">{{ comment.score }}</h3>
+
+	{% for c in comments -%}
+		<div class="thread">
+			{% call comment(c) %}
+			<div class="replies">
+				{% for reply in c.replies %}
+					{% call comment(reply) %}
+					<div class="replies">
+						{% for response in reply.replies %}
+							{% call comment(response) %}</details></div>
+						{% endfor %}
+					</div></details></div>
+				{% endfor %}
+			</div></details></div>
 		</div>
-		<div class="comment_right">
-			<h4>
-				Posted by <a class="comment_author" href="/u/{{ comment.author }}">u/{{ comment.author }}</a>
-				<span class="datetime">{{ comment.time }}</span>
-			</h4>
-			<h4 class="comment_body">{{ comment.body }}</h4>
-		</div>
-	</div><br>
-	{% endfor %}
+	{%- endfor %}
+
 {% endblock %}

templates/user.html

@@ -46,7 +46,6 @@
 		{% else %}
 		<div class="comment">
 			<div class="comment_left">
-				<div class="comment_upvote">↑</div>
 				<h3 class="comment_score">{{ post.score }}</h3>
 			</div>
 			<div class="comment_right">