{% extends "base.html" %} {% block title %}{{ post.title }} - Simple Blog
Template{% endblock %} {% block content %} {% from
"components/post_renderer.html" import render_post %}

<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) }} {% if post.id == 8 %}
    <div class="background-svg">
      <img src="{{ url_for('static', filename='animation.svg') }}" alt="" />
      <br />
      <p>tree source: codepen @uchardon</p>
    </div>
    {% endif %}

    <div class="blog-content">{{ post.content | safe }}</div>

    <a href="{{ url_for('home') }}" class="btn btn-default btn-custom"
      >← Back to Posts</a
    >

    <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>

    <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 %}
  </div>
</div>
{% endblock %}