{% extends "blog/base.html" %}
{% load blog_tags %}

{% block title %}{{ post.title }} | blOgeN{% endblock %}

{% block content %}
<!-- Comments forms and Modal -->

{% if new_comment %}
<div class="card-panel teal lighten-2">
  <h5 class="center white-text">Your comment has been added successfully!</h5>
</div>
{% else %}
<div id="modal1" class="modal">
  <div class="modal-content">
    <h5>Add a new Comment</h5>
    <form action="." method="post">{% csrf_token %}
      <div class="input-field teal-text">
        <i class="material-icons prefix">person</i>
        {{ comment_form.name }}
        {{ comment_form.name.label_tag }}
      </div>
      <div class="input-field teal-text">
        <i class="material-icons prefix">mail</i>
        {{ comment_form.email }}
        {{ comment_form.email.label_tag }}
      </div>
      <div class="input-field teal-text">
        <i class="material-icons prefix">comment</i>
        {{ comment_form.body }}
        {{ comment_form.body.label_tag }}
      </div>
      <div class="center">
        <input type="submit" value="Add Comment" class="btn-large waves-effect waves-light  z-depth-5">
      </div>
    </form>
  </div>
</div>
{% endif %}
<!-- Comment forms & Modal ends -->

<!-- Post Detail -->
<h4>{{ post.title }}</h4>
      <p class="grey-text">
        <i class="material-icons">person</i>
        {{ post.author }} |
        <i class="material-icons">publish</i>
        {{ post.publish.year }}/{{ post.publish.month }} |
        <i class="material-icons">comment</i>
        {{ post.comments.count }}
      </p>
      <hr />
<p>      
{{ post.body|markdown|safe }}
<p>
  <a href="{% url 'blog:post_share' post.id %}" class="btn-large right waves-effect waves-light waves-light  z-depth-5">
    <i class="material-icons right">screen_share</i>Share</a>
  <a href="#modal1" class="btn-large modal-trigger waves-effect waves-light  z-depth-5"><i class="material-icons left">comment</i>
    Comment</a>
</p>

<!-- Post Detail ends -->

<!-- Similar post -->
<h4>Similar Post</h4>
<div class="row">
  <div class="col s12">
    {% for post in similar_post %}
    <div class="card horizontal">
      <div class="card-image">
        {% if post.image %}
        <a href="{{ post.get_absolute_url }}">
          <img src="{{ post.image.url }}" alt="Post-Image">
        </a>
        {% endif %}
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <span class="card-title">{{ post.title|truncatewords:5 }}</span>
        </div>
      </div>
    </div>
    {% empty %}
    <p>There are no Similar Post yet.</p>
    {% endfor %}
  </div>
</div>
<!-- Similar post ends -->

<!-- Comment detail -->
<div class="card">
  <div class="card-content">
    <span class="card-title">
      {% with comments.count as total_comments %}
      {{ total_comments }} comment{{ total_comments|pluralize}}
      {% endwith %}</span>
    <table class="striped  responsive-table">
      <tbody>
        {% for comment in comments %}
        <tr>
          <th>{{ comment.name }}</th>
          <th>{{ comment.created.year}}/{{ comment.created.month}}</th>
          <th>{{ comment.body|linebreaks }}</th>
        </tr>
        {% empty %}
        <p class="red-text">There are no comments yet!</p>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
<!-- Comment detail ends -->
{% endblock %}