{% capture newLine %}
{% endcapture %}
{% capture key %}{{ page.id | remove_first: "/" }}{% endcapture %}
{% assign comments = site.data.comments[key] %}

<section id="static-comments">

  {% if comments %}
  <h4 id="comments-header">دیدگاه‌ها</h4>
  <div id="comments">

    {% for comment in comments %}
      {% if comment.reply_to == nil or comment.reply_to == '' %}
      <div class="comment-chain">
        {% include comment.html comment=comment comments=comments%}
      </div>
      {% endif %}
    {% endfor%}

  </div>
  {% endif %}

  <form id="comment-form" name="comment" netlify>
    <input name="page_id" style="display:none" value="{{page.id}}">
    <input id="reply-to" name="reply-to" style="display:none">
    <label for="message">دیدگاه<sup class="required">*</sup> &nbsp;<small>می‌توانید با <a href="http://commonmark.org/help/" target="_">مارک‌داون</a> هم بنویسید.</small><br><small id="replyToVisualClue"></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);
  }

  function replyTo(commentID) {
    var comment = document.getElementById(commentID);
    document.getElementById("reply-to").value = comment.querySelector("span[commentId]").innerText;
    document.getElementById("replyToVisualClue").innerText = "[در جواب " + comment.querySelector("span[commenter]").innerText + "]";
  }
</script>