{% comment %}
  When a comment is submitted, the browser is redirected to a page that includes 
  the new comment id in its URL.
  #comments is a required ID and is used as an anchor link by Shopify.
{% endcomment %}

{%- assign number_of_comments = article.comments_count -%}

{% comment %}
  If a comment was just submitted but requires moderation, we have an extra comment to count.
{% endcomment %}
{% if comment and comment.status != 'published' %}
  {% assign number_of_comments = article.comments_count | plus: 1 %}
{% endif %}

<article role="article" itemscope itemtype="http://schema.org/Article">

  {% if article.image %}
    {{ article | img_url: '1024x1024' | img_tag: article.title }}
  {% endif %}

  <header role="banner">
    <h1>{{ article.title }}</h1>
    {% capture date %}{{ article.published_at | time_tag: format: 'month_day_year' }}{% endcapture %}
    <p>{{ 'blogs.article.author_on_date_html' | t: author: article.author, date: date }}</p>
  </header>

  <div class="rte" itemprop="articleBody">
    {{ article.content }}
  </div>

  {% if article.tags.size > 0 %}
    <ul>
      {% for tag in article.tags %}
        <li>
          <a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>{% unless forloop.last %}, {% endunless %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}

  {% if settings.social_sharing_blog %}
    {% include 'social-sharing', share_title: article.title, share_permalink: article.url, share_image: article.image %}
  {% endif %}

  {% if blog.comments_enabled? %}
    <h3>{{ 'blogs.comments.with_count' | t: count: number_of_comments }}</h3>

    {% paginate article.comments by 5 %}

    <div id="comments">
      {% if comment and comment.status and paginate.current_page == 1 %}
        <p class="form-success">
          {% if blog.moderated? and comment.status != 'published' %}
            {{ 'blogs.comments.success_moderated' | t }}
          {% else %}
            {{ 'blogs.comments.success' | t }}
          {% endif %}
        </p>
      {% endif %}

      {% if number_of_comments > 0 %}
        <ul>
          {% comment %}
            Display comment from URL parameters if it is waiting moderation
          {% endcomment %}
          {% if comment and comment.status != 'published' %}
            <li id="{{ comment.id }}">
              <div class="rte">
                {{ comment.content }}
              </div>
              {% capture date %}{{ comment.created_at | time_tag: format: 'month_day_year' }}{% endcapture %}
              <p>{{ 'blogs.article.comment_meta_html' | t: author: comment.author, date: date }}</p>
            </li>
          {% endif %}

          {% for comment in article.comments %}
            <li id="{{ comment.id }}">
              <div class="rte">
                {{ comment.content }}
              </div>
              {% capture date %}{{ comment.created_at | time_tag: format: 'month_day_year' }}{% endcapture %}
              <p>{{ 'blogs.article.comment_meta_html' | t: author: comment.author, date: date }}</p>
            </li>

          {% endfor %}
        </ul>

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

    {% endpaginate %}

    {% form 'new_comment', article %}
      <h3>{{ 'blogs.comments.title' | t }}</h3>

      {{ form.errors | default_errors }}

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

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

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

      {% if blog.moderated? %}
        <p>{{ 'blogs.comments.moderated' | t }}</p>
      {% endif %}

      <input type="submit" class="btn" value="{{ 'blogs.comments.post' | t }}">
    {% endform %}

  {% endif %}

</article>