{% unless settings.breadcrumb_styles == 'none' %}{% include 'breadcrumb' %}{% endunless %}

{%- assign _layout = section.settings.layout -%}
{%- assign _sidebar_style = section.settings.sidebar_style -%}
{% assign genaral_layout = settings.general_placement %}

{% if _layout == 'none-sidebar' %}
  {%- assign _main_class = "col-12" -%}
{% else %}
  {%- assign _sb_class = "col-lg-3 d-none d-lg-block" -%}
  {%- assign _main_class = "col-lg-9 col-sm-12 col-12" -%}
{% endif %}

{%- 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 %}

<div class="page-article layout-{{ _layout }}">
  {% if genaral_layout == 'wide' %}<div class="container-fluid">{% endif %}
    <div class="row">
  
      {% if _layout == 'left-sidebar' %}
        {% if _sidebar_style == '1' %}
          {% include 'sidebar-blog' %}
        {% else %}
          {% include 'sidebar-blog-2' %}
        {% endif %}
      {% endif %}

      <div class="{{ _main_class }}">

        <article class="post">
          {% if article.image %}
            <div class="post-image">
              <img src="{{ article | img_url: '1170x' }}" alt="Article" />
            </div>
          {% endif %}

          <div class="post-content">

            <h1 class="post-title">{{ article.title }}</h1>

            <div class="post-info">
              <ul class="list-inline">
                <li><span class="post-author">{{ 'blogs.article.posted_by' | t }} <span>{{ article.author | escape }}</span></span></li>
                <li><span class="post-date">{{ 'blogs.article.on' | t }} <span>{{ article.created_at | date: "%B %d, %Y" }}</span></span></li>
                <li><a href="/blogs/{{ blog.title | handleize }}" class="post-t"><span class="cate-title">{{ 'blogs.article.categories' | t }} <span>{{ blog.title }}</span></span></a></li>
              </ul>
            </div>

            <div class="post-des">{{ article.content }}</div>  
          </div>

          <div class="tag-share">
            {% if section.settings.show_post_tag %}
              <div class="post-tag">
                <ul class="list-inline">
                  <li><a href="{{ blog.url }}">{{ 'blogs.all' | t }}</a></li>

                  {% assign _total_tags = section.settings.total_tags %}
                  {% for tag in article.tags limit: _total_tags %}
                    {% if current_tags contains tag %}
                      <li class="active">{{ tag | link_to_remove_tag: tag }}</li>
                    {% else %}
                      <li>{{ tag | link_to_tag: tag }}</li>
                    {% endif %}
                  {% endfor %}
                </ul>
              </div>   
            {% endif %}


            {% if section.settings.show_share_buttons %}
              {% include 'social-sharing' %}
            {% endif %}
          </div>

          {% if section.settings.show_author %}
            <div class="post-author-info">
              {% assign _author_heading = section.settings.author_heading %}
              {% assign _author_title = section.settings.author_title %}
              {% assign _author_description = section.settings.author_description %}

              {% unless _author_heading == blank %}<h5 class="author-heading">{{ _author_heading }}</h5>{% endunless %}

              <div class="media">
                <div class="image mr-3"><img src="{{ section.settings.author_image | img_url: "180x" }}" alt="Admin" /></div>
                <div class="text media-body">
                  <h4 class="author mt-0">{{ article.author }}</h4>
                  {% unless _author_title == blank %}<span class="author-title">{{ _author_title }}</span>{% endunless %}
                  {% unless _author_description == blank %}<div class="author-description">{{ _author_description }}</div>{% endunless %}
                </div>
              </div>
            </div>
          {% endif %}

          <div class="prev-next-article">
            <a class="prev-article" href="{{blog.previous_article}}"><i class="demo-icon icon-left-open-1"></i> {{ 'blogs.article.prev_article' | t }}</a>
            <a class="next-article" href="{{blog.next_article}}">{{ 'blogs.article.next_article' | t }} <i class="demo-icon icon-right-open-1"></i></a>
          </div>
        </article>

        {% if section.settings.show_related_article %}
          <div class="related-article-wrapper">
            {% assign _related_heading = section.settings.related_heading %}
            {% assign _total_related_articles = section.settings.total_related_articles %}

            {% unless _related_heading == blank %}<h2 class="related-heading">{{ _related_heading }}</h2>{% endunless %}

            {% unless blog.articles_count == 0 %}
              <div class="related-article-inner">
                {% for article in blog.articles limit: _total_related_articles %}
                  <div class="related-article media">
                    <a href="{{article.url}}"><img class="align-self-center mr-3" src="{{ article.image.src | img_url: '500x' }}" alt="{{ article.image.alt }}"></a>

                    <div class="media-body">
                      <div class="date-and-blog"><span class="post-date">{{ article.created_at | date: "%B %d, %Y" }}</span> <span class="blog-title"><a href="{{blog.url}}">{{ blog.title }}</a></span></div> 
                      <h3 class="post-title"><a href="{{article.url}}">{{ article.title }}</a></h3>   
                      <span class="post-view"><i class="demo-icon icon-eye"></i>{{ article.comments_count }}</span>
                    </div>
                  </div>
                {% endfor %}
              </div> 
            {% endunless %}   
          </div> 
        {% endif %}
            
        {% if blog.comments_enabled? %}
          {% if number_of_comments > 0 %}
            <div class="grid-comments">
              <h2>{{ 'blogs.comments.comments_with_count' | t: count: number_of_comments }}</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>
          {% endif %}
            
          <div class="comment-form">
            {% form 'new_comment', article %}

              <h3>{{ 'blogs.comments.title' | t }}</h3>

              {{ form.errors | default_errors }}

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

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

                <div class="row">
                  <div class="control-wrapper col-md-6 col-sm-12">
                    <label class="input-label">{{ 'blogs.comments.name_title' | t }} <span>*</span></label>
                    <input required type="text" name="comment[author]" id="comment-author" class="{% if form.errors contains 'author' %} input-error{% endif %}" placeholder="{{'blogs.comments.name' | t }}" value="{{ form.author }}">
                  </div>

                  <div class="control-wrapper col-md-6 col-sm-12">
                    <label class="input-label">{{ 'blogs.comments.email_title' | t }} <span>*</span></label>
                    <input required type="email" name="comment[email]" id="comment-email" class="{% if form.errors contains 'email' %} input-error{% endif %}" placeholder="{{'blogs.comments.email' | t }}" value="{{ form.email }}" autocorrect="off" autocapitalize="off">
                  </div>
                </div>
              </div>

              <input type="submit" class="btn btn-1" value="{{ 'blogs.comments.submit' | t }}">
            {% endform %}
          </div>
            
        {% endif %}
        
      </div>

      {% if _layout == 'right-sidebar' %}
        {% if _sidebar_style == '1' %}
          {% include 'sidebar-blog' %}
        {% else %}
          {% include 'sidebar-blog-2' %}
        {% endif %}
      {% endif %}
    
    </div>
  {% if genaral_layout == 'wide' %}</div>{% endif %}
</div>


{% schema %}
  {
    "name": "Article pages",
    "settings": [
      {
        "type": "image_picker",
        "id": "breadcrumb_image",
        "label": "Breadcrumb image"
      },
      {
        "type": "select",
        "id": "layout",
        "label": "Section Layout Mode",
        "options": [
          {
            "value": "left-sidebar",
            "label": "Left sidebar"
          },
          {
            "value": "right-sidebar",
            "label": "Right sidebar"
          },
          {
            "value": "none-sidebar",
            "label": "None sidebar"
          }
        ],
        "default": "right-sidebar"
      },
      {
        "type":"select",
        "id":"sidebar_style",
        "label":"Sidebar Style",
        "options":[
          {"value":"1","label":"Style #1"},
          {"value":"2","label":"Style #2"}
        ],
        "default":"2"
      },
      {
        "type": "checkbox",
        "id": "show_post_tag",
        "label": "Show article tags",
        "default": true
      },
      {
        "type":"text",
        "id":"total_tags",
        "label":"Total tags to show",
        "default":"3"
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons",
        "default": true
      },
      {
        "type":"paragraph",
        "content":"----Author"
      },
      {
        "type":"checkbox",
        "id":"show_author",
        "label":"Show Author",
        "default":true
      },
      {
        "type":"text",
        "id":"author_heading",
        "label":"Heading",
        "default":"About Author"
      },
      {
        "type": "image_picker",
        "id": "author_image",
        "label": "Author Image"
      },
      {
        "type":"text",
        "id":"author_title",
        "label":"Author Title",
        "default":"Blogger & Photographer"
      },
      {
        "type":"textarea",
        "id":"author_description",
        "label":"Author Description"
      },
      {
        "type":"header",
        "content":"Related Articles"
      },
      {
        "type":"checkbox",
        "id":"show_related_article",
        "label":"Show related article",
        "default":true
      },
      {
        "type":"text",
        "id":"related_heading",
        "label":"Heading",
        "default":"RELATED <span class=highlight>ARTICLES</span>"
      },
      {
        "type":"text",
        "id":"total_related_articles",
        "label":"Total articles",
        "default":"4"
      },
      {
        "type": "header",
        "content": "Sidebar Categories"
      },
      {
        "type": "text",
        "id": "blog_categories_title",
        "label": "Heading",
    "default": "Categories"
      },
      {
        "type": "link_list",
        "id": "blog_categories_menu",
        "label": "Menu item",
        "info": "Blank to hide"
      },
      {
        "type": "header",
        "content": "Sidebar Search"
      },
      {
        "type": "checkbox",
        "id": "enable_search_blog",
        "label": "Enable Search Form",
        "default": true
      },
      {
        "type": "header",
        "content": "Sidebar Posts"
      },
      {
        "type": "text",
        "id": "sidebar_post_title",
        "label": "Heading",
    "default": "Recent posts"
      },
      {
        "type": "blog",
        "id": "sidebar_post",
        "label": "Blog item",
    "info": "Blank to hide"
      },
      {
        "type": "text",
        "id": "sidebar_post_limit",
        "label": "Total items",
        "default": "3"
      },
      {
        "type":"header",
        "content":"Sidebar Social Sharing Widget"
      },
      {
        "type":"checkbox",
        "id":"show_ss_widget",
        "label":"Show social sharing widget",
        "default":true
      },
      {
        "type":"text",
        "id":"sidebar_ss_heading",
        "label":"Heading",
        "default":"Social"
      },
      {
        "type": "header",
        "content": "Sidebar Tags"
      },
      {
        "type": "checkbox",
        "id": "enable_sidebar_tags",
        "label": "Enable Sidebar Tags",
        "default": true
      },
      {
        "type": "text",
        "id": "sidebar_tags_title",
        "label": "Heading",
    "default": "Tags"
      }
    ]
  }
{% endschema %}