{%-liquid
  if article == blank
    continue
  endif
  assign article_id =  article.id
  if comment.status == 'pending'
    assign number_of_comments = article.comments_count | plus: 1
  else
    assign number_of_comments = article.comments_count
  endif
%}
{% unless article.comments_enabled? %}{% continue %}{% endunless -%}
<div class="hdt-article-comments-block hdt-section-spacing" timeline hdt-reveal="slide-in" style="--section-pt: {{ block.settings.padding_top }}px; --section-pb: {{ block.settings.padding_bottom }}px; --section-prate:{{ block.settings.padding_rate }};" {{ block.shopify_attributes }}>
  {%- if number_of_comments > 0 -%}
  {%- assign anchorId = '#Comments-' | append: article_id -%}
  <div class="hdt-line-space"></div>
  {%- paginate article.comments by 5 -%}
    {%- comment -%}
    #comments is required, it is used as an anchor link by Shopify.
    {%- endcomment -%}
    <div id="comments">
      <h2 id="Comments-{{ article_id }}" class="hdt-comments-heading hdt-h5">{% if number_of_comments == 1 %} {{ 'blogs.comments.with_count.one' | t }} {%- else -%}{{ 'blogs.comments.with_count.other' | t: count: number_of_comments }}{%- endif -%}</h2>
      <div class="hdt-row-grid hdt-grid-cols-1">
        {%- if comment.status == 'pending' and comment.content -%}
          {%- comment -%}
          If a comment was just submitted with no blank field, show it.
          {%- endcomment -%}
          <div id="{{ comment.id }}" class="hdt-comment-item comment hdt-col-item">{%- render 'comment', comment: comment -%}</div>
        {%- endif -%}
        {%- for comment in article.comments -%}
          <div id="{{ comment.id }}" class="hdt-comment-item hdt-col-item">{%- render 'comment', comment: comment -%}</div>
        {%- endfor -%}
        {%- if paginate.pages > 1 -%}
          {{ 'hdt-pagination.css' | asset_url | stylesheet_tag }}
          <div class="hdt-col-12">{%- render 'pagination', paginate: paginate, anchor: anchorId, ajax: 'false' -%}</div>
        {%- endif -%}
      </div>
    </div>
  {%- endpaginate -%}
  <div class="hdt-line-space"></div>
  {%- endif -%}
  {%- form 'new_comment', article, id: 'CommentForm' -%}
    <h2 class="hdt-comments-form__heading hdt-h5">{{ 'blogs.comments.title' | t }}</h2>
    <p class="hdt-comments-form__notes">{{ 'blogs.comments.comments_note_html' | t }}</p>
    {%- liquid
      assign post_message  = 'blogs.comments.success'
      assign blog_moderate = blog.moderated?
      if blog.moderated? and comment.status == 'pending'
        assign post_message = 'blogs.comments.success_moderated'
      elsif comment.status == 'unapproved' or comment.status == 'spam'
        assign post_message = 'blogs.comments.unapproved'
      endif
      assign error_heading = 'blogs.comments.error_heading'
      assign name          = 'blogs.comments.name'
      assign email         = 'blogs.comments.email'
      assign message       = 'blogs.comments.message'
      assign form_errors   = form.errors
      assign form_errors_messages = form_errors.messages
      render 'form-status', form: form, form_id: 'CommentForm', success_message: post_message, form_errors: form_errors, form_errors_messages: form_errors_messages, error_heading: error_heading, name: name, email: email, message: message
    -%}
    <div class="hdt-row-grid md:hdt-grid-cols-2 hdt-grid-cols-1 hdt-form-comment">
      <div class="hdt-col-item hdt-form-group">
        <label class="hdt-field__label" for="CommentForm-author">{{ name | t }} <span aria-hidden="true">*</span></label>
        <input type="text" name="comment[author]" id="CommentForm-author" class="hdt-field__input {% if form_errors contains 'author' %}hdt-input--error{% endif %}" autocomplete="name" value="{{ form.author }}" aria-required="true"{% if form_errors contains 'author' %} aria-invalid="true" aria-describedby="CommentForm-author-error"{% endif %} placeholder="">
        {%- if form_errors contains 'author' -%}<small id="CommentForm-author-error"><span class="hdt-message-error hdt-flex hdt-text-sm">{% render 'icon-error' %}{{ name | t }} <span>{{ form_errors_messages['author'] }}.</span></span></small>{%- endif -%}
      </div>
      <div class="hdt-col-item hdt-form-group">
        <label class="hdt-field__label" for="CommentForm-email">{{ email | t }} <span aria-hidden="true">*</span></label>
        <input type="email" name="comment[email]" id="CommentForm-email" autocomplete="email" class="hdt-field__input {% if form_errors contains 'email' %} hdt-input--error{% endif %}" value="{{ form.email }}" autocorrect="off" autocapitalize="off" aria-required="true" {% if form_errors contains 'email' %} aria-invalid="true" aria-describedby="CommentForm-email-error"{% endif %} placeholder="">
        {%- if form_errors contains 'email' -%} <small id="CommentForm-email-error"><span class="hdt-message-error hdt-flex hdt-text-sm">{% render 'icon-error' %}{{ email | t }} {{ form_errors_messages['email'] }}.</span></small>{%- endif -%}
      </div>
      <div class="hdt-col-item hdt-form-group hdt-CommentForm">
        <label class="hdt-form__label hdt-field__label" for="CommentForm-body">{{ message | t }} <span aria-hidden="true">*</span></label>
        <textarea rows="5" name="comment[body]" id="CommentForm-body" class="text-area hdt-field__input {% if form_errors contains 'body' %} hdt-input--error{% endif %}" aria-required="true" {% if form_errors contains 'body' %} aria-invalid="true" aria-describedby="CommentForm-body-error" {% endif %} placeholder="">{{ form.body }}</textarea>
        {%- if form_errors contains 'body' -%}<small id="CommentForm-body-error"><span class="hdt-message-error hdt-flex hdt-text-sm">{% render 'icon-error' %}{{ message | t }} {{ form_errors_messages['body'] }}.</span></small>{%- endif -%}
      </div>
    </div>
    {%- if blog_moderate -%}<p class="hdt-article-template__comment-warning">{{ 'blogs.comments.moderated' | t }}</p> {%- endif -%}
    <button type="submit" class="hdt-btn hdt-cursor-pointer hdt-oh hdt-inline-flex hdt-align-center hdt-justify-center hdt-relative hdt-btn-solid hdt-font-normal hdt-reveal--design-mode">{{ 'blogs.comments.post' | t }}</button>
  {%- endform -%}
</div>
{% schema %}
  {
    "name": "Comments",
    "tag":null,
    "settings": [
      {
        "type": "header",
        "content": "t:sections.all.padding.section_padding_heading"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "t:sections.all.padding.padding_top",
        "default": 0
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "t:sections.all.padding.padding_bottom",
        "default": 30
      },
      {
        "type": "range",
        "id": "padding_rate",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "%",
        "label": "t:sections.all.padding.padding_rate",
        "default": 75
      }
    ],
    "presets":[
      {
        "name":"Comments",
      }
    ]
  }
{% endschema %}
