{% comment %}
  Comments will not appear right after they are submitted, either to be checked for spam
  or to await moderation. When a comment is submitted, the browser is redirected to a page
  that includes the new comment id in its URL.
    Example: http://shopname.myshopify.com/blogs/news/2022072-my-post?comment=3721372
{% endcomment %}

{%- assign new_comment = false -%}
{% if comment and comment.created_at %}
  {%- assign new_comment = true -%}
  {%- assign new_comment_id = comment.id -%}
{% endif %}

{% if new_comment %}
  {%- assign duplicate_comment = false %}
  {% for comment in article.comments %}
    {% if comment.id == new_comment_id %}
      {%- assign duplicate_comment = true %}
      {% break %}
    {% endif %}
  {% endfor %}

  {% if duplicate_comment %}
    {%- assign number_of_comments = article.comments_count -%}
  {% else %}
    {%- assign number_of_comments = article.comments_count | plus: 1 -%}
  {% endif %}
{% else %}
  {%- assign number_of_comments = article.comments_count -%}
{% endif %}

 {% section 'article-template' %}
 

{% if blog.comments_enabled? %}
  {% if number_of_comments > 0 %}
   <div class="comment_article">
    <div class="page-width">
      <div class="grid">
        <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
          <h2 class="subheading">{{ 'blogs.comments.comments_with_count' | t: count: number_of_comments }} Comment</h2>

          {% paginate article.comments by 5 %}

            {% comment %}
              #comments is required, it is used as an anchor link by Shopify.
            {% endcomment %}
            <div id="comments">

              {% if new_comment %}
                <p class="note form-success">
                  {% if blog.moderated? %}
                    {{ 'blogs.comments.success_moderated' | t }}
                  {% else %}
                    {{ 'blogs.comments.success' | t }}
                  {% endif %}
                </p>
              {% endif %}

              <ul class="comments">
                {% comment %}
                  If a comment was just submitted with no blank field, show it.
                {% endcomment %}
                {% if new_comment %}
                  <li id="{{ comment.id }}" class="comment">
                    {% include 'comment' %}
                  </li>
                {% endif %}

                {% for comment in article.comments %}
                  {% unless comment.id == new_comment_id %}
                    <li id="{{ comment.id }}" class="comment">
                      {% include 'comment' %}
                    </li>
                  {% endunless %}
                {% endfor %}
              </ul>

              {% if paginate.pages > 1 %}
                {% include 'pagination' %}
              {% endif %}

            </div>
          {% endpaginate %}
        </div>
      </div>
    </div>
</div>
  {% endif %}


  <div class="page-width">
    <div class="grid">
      <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
        <div class="comment-form form-vertical">
          {% form 'new_comment', article %}

            <h2 class="subheading">{{ 'blogs.comments.title' | t }}</h2>

            {{ form.errors | default_errors }}

            <div class="grid">

              <div class="grid__item">
                <label for="CommentAuthor">{{ 'blogs.comments.name' | t }}</label>
                <input type="text" name="comment[author]" id="CommentAuthor" class="input-full{% if form.errors contains 'author' %} input--error{% endif %}" value="{{ form.author }}">
              </div>

              <div class="grid__item">
                <label for="CommentEmail">{{ 'blogs.comments.email' | t }}</label>
                <input type="email" name="comment[email]" id="CommentEmail" class="input-full{% if form.errors contains 'email' %} input--error{% endif %}" value="{{ form.email }}" autocorrect="off" autocapitalize="off">
              </div>

              <div class="grid__item">
                <label for="CommentBody">{{ 'blogs.comments.message' | t }}</label>
                <textarea name="comment[body]" id="CommentBody" class="input-full{% if form.errors contains 'body' %} input--error{% endif %}">{{ form.body }}</textarea>
              </div>

            </div>

            {% if blog.moderated? %}
              <p class="fine-print">{{ 'blogs.comments.moderated' | t }}</p>
            {% endif %}
            <div class="submit_comment text-right">
             <span>Comment are moderated</span>
            <input type="submit" class="btn comment_submit" value="{{ 'blogs.comments.post' | t }}">
          </div>
          {% endform %}
        </div>
      </div>
    </div>
  </div>

{% endif %}

<div class="page-width text-center return-link-wrapper">
  <a href="{{ blog.url }}" class="btn btn--secondary btn--has-icon-before return-link">
    {% include 'icon-arrow-left' %}
    {{ 'blogs.article.back_to_blog' | t: title: blog.title }}
  </a>
</div>
