seperate comments

templates/post_detail.html

@@ -1,16 +1,15 @@
 {% extends "base.html" %} {% block title %}{{ post.title }} - Simple Blog
 Template{% endblock %} {% block content %} {% from
-"components/post_renderer.html" import render_post %}
+"components/post_renderer.html" import render_post %} {% from
+"components/comment_renderer.html" import render_comment %}
 
 <div class="row">
   <div class="col-lg-12">
     <h1 class="post-title">{{ post.title }}</h1>
     <p class="lead">{{ post.subtitle }}</p>
-    <hr />
     <p>
       <span class="glyphicon glyphicon-time"></span> Posted on {{ post.date }}
     </p>
-    <hr />
     {{ render_post(post) }}
 
     <a href="{{ url_for('home') }}" class="btn btn-default btn-custom"
@@ -18,67 +17,10 @@ Template{% endblock %} {% block content %} {% from
     >
 
     <hr style="margin-top: 75px; margin-bottom: 40px" />
-    <div class="well">
-      <h4>Leave a Comment:</h4>
-      <form
-        role="form"
-        method="POST"
-        action="{{ url_for('post_comment', post_id=post.id) }}"
-      >
-        <div class="form-group">
-          <input
-            type="text"
-            name="author"
-            class="form-control"
-            placeholder="Your Name"
-            required
-            style="margin-bottom: 10px"
-          />
-
-          <input
-            type="text"
-            name="honeypot"
-            style="display: none !important"
-            tabindex="-1"
-            autocomplete="off"
-          />
-
-          <textarea
-            name="content"
-            class="form-control"
-            rows="3"
-            placeholder="Write something..."
-            required
-          ></textarea>
-        </div>
-        <button type="submit" class="btn btn-primary">Submit</button>
-      </form>
-    </div>
+    {% include leave_comment.html %}
 
     <hr />
-
-    {% for comment in comments %}
-    <div class="media">
-      <a class="pull-left" href="#">
-        <img
-          class="media-object"
-          src="https://ui-avatars.com/api/?name={{ comment.author }}&background=random"
-          width="64"
-          height="64"
-          alt=""
-        />
-      </a>
-      <div class="media-body">
-        <h4 class="media-heading">
-          {{ comment.author }}
-          <small>{{ comment.date }}</small>
-        </h4>
-        {{ comment.content }}
-      </div>
-    </div>
-    {% else %}
-    <p>No comments yet. Be the first!</p>
-    {% endfor %}
+    {{comment_renderer(comments)}}
   </div>
 </div>
 {% endblock %}