{% capture newLine %}
{% endcapture %}
<section id="static-comments">
  {% capture key %}{{ page.id | remove_first: "/" }}{% endcapture %}
  {% assign comments = site.data.comments[key] %}
  {% if comments %}
  <h4 id="comments-header">نظرات خوانندگان</h4>
  <div id="comments">
    {% for comment in comments %}
      <article>
        <div class="comment-image-wrapper">
          <img class="comment-avatar" src="https://www.gravatar.com/avatar/{{comment.email}}?s=200&d=robohash" />
        </div>
        <div class="comment-body-wrapper">
          <span class="comment-meta">
            <small>
              {% if comment.website != '' %}
                <a href={{comment.website}}>{{ comment.name }}</a>
              {% else %}
                {{ comment.name }}
              {% endif %}
            </small>
            <small> &nbsp; {{ comment.date | jdate: "%d %b %Y" | habify }}</small>
          </span>
          {{ comment.message | replace: "<p>", '' | replace: "</p>", newLine | replace: "<br>", newLine | strip_html | markdownify }}
        </div>
      </article>
    {% endfor%}
  </div>
  {% endif %}

  <form id="comment-form" name="comment" netlify-honeypot="bot-field" netlify>
    <input name="bot-field" style="display:none">
    <input name="page_id" style="display:none" value="{{page.id}}">
    <input name="page_uuid" style="display:none" value="{{page.uuid}}">
    <input name="page_date" style="display:none" value="{{page.date}}">
    <input name="page_title" style="display:none" value="{{page.title}}">
    <label for="message">دیدگاه<sup class="required">*</sup> &nbsp;<small>می‌توانید با <a href="http://commonmark.org/help/" target="_">مارک‌داون</a> هم بنویسید.</small>
      <textarea id="message" name="message" required alt="no!!" onkeyup="preview()"></textarea>
      <div id="preview"></div>
    </label>
    <label for="name">نام<sup class="required">*</sup>
      <input id="name" type="text" name="name" required>
    </label>
    <label for="email">ایمیل<sup class="required">*</sup>
      <input id="email" type="email" name="email" required>
    </label>
    <label for="website">وبسایت
      <input id="website" type="url" name="website">
    </label>
    <div style="text-align:left">
      <button type="submit" class="button">ارسال</button>
    </div>
  </form>

</section>
<script src="{{ 'assets/js/showdown.min.js' | absolute_url }}" type="text/javascript">
</script>
<script type="text/javascript">
  function preview(){
    var converter = new showdown.Converter();
    var markdown = document.getElementById("message").value;
    document.getElementById("preview").innerHTML = converter.makeHtml(markdown);
  }
</script>