{% 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 %}
    <div class="comment-chain">
      <article id="{{ comment.id }}">
        <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}} target="_"><span commenter>{{ comment.name }}</span></a>
              {% else %}
                <span commenter>{{ comment.name }}</span>
              {% endif %}
            </small>
            <small> &nbsp; <a href="#{{ comment.id }}">{{ comment.created_at | jdate: "%d %b %Y" | habify }}</a></small>
            <small> &nbsp; <a href="#comment-form" onclick="replyTo('{{ comment.id }}')">پاسخ</a></small>
            <span style="display:none" commentId>{{ comment.id }}</span>
          </span>
          {{ comment.message | replace: "<p>", '' | replace: "</p>", newLine | replace: "<br>", newLine | strip_html | markdownify }}
        </div>
      </article>

        {% if comment.reply_to %}
          {% for cmt in comments %}
            {% if cmt.id == comment.reply_to %}
              <article class="sub-comment">

                <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 cmt.website != '' %}
                        <a href={{comment.website}} target="_"><span commenter>{{ cmt.name }}</span></a>
                      {% else %}
                        {{ cmt.name }}
                      {% endif %}
                    </small>
                    <small> &nbsp; <a href="#{{ cmt.id }}">{{ cmt.created_at | jdate: "%d %b %Y" | habify }}</a></small>
                  </span>
                  {{ cmt.message | replace: "<p>", '' | replace: "</p>", newLine | replace: "<br>", newLine | strip_html | markdownify }}
                </div>

              </article>
              {% break %}
            {% endif %}
          {% endfor %}
        {% endif %}

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