<!-- /sections/article-full-width.liquid -->
{% assign number_of_comments = article.comments_count %}

{% comment %}
  If a comment was just submitted and it has no blank fields, we have an extra comment to count.
{% endcomment %}
{% if comment and comment.created_at %}
  {% assign number_of_comments = article.comments_count | plus: 1 %}
{% endif %}

{% assign sidebar_enable = false %}
{% if article.tags != blank and section.settings.sidebar_tags %}
  {% assign sidebar_enable = false %}
{% elsif section.settings.recent %}
  {% assign sidebar_enable = false %}
{% endif %}


{% assign blog_grid = 'large--one-whole' %}
{% if sidebar_enable %}
  {% assign blog_grid = 'large--one-whole' %}
{% endif %}


{% case section.settings.grid %}
  {% when 0 %}
    {%- assign grid_item_width = '0px' -%}
  {% when 1 %}
    {%- assign grid_item_width = '10px' -%}
  {% when 2 %}
    {%- assign grid_item_width = '30px' -%}
  {% when 3 %}
    {%- assign grid_item_width = '60px' -%}
  {% when 4 %}
    {%- assign grid_item_width = '90px' -%}

{% endcase %}

<div data-section-id="{{ section.id }}" data-section-type="article">

  
{% if section.settings.banner_image == false %}

  <div class="full-width" page-margin style="margin: 0px {{ grid_item_width }};">

    <div class="grid">

      <article class="grid__item {{ blog_grid }}" itemscope itemtype="http://schema.org/Article">

        <div class="blog__article blog_no_banner">
          <header>
            <h1 class="h2" itemprop="headline">{{ article.title }}</h1>
            {% if section.settings.blog_show_meta %}
              {% capture author %}<span itemprop="author" itemscope itemtype="https://schema.org/Person"><span class="strong" itemprop="name">{{ article.author }}</span></span>
              {% endcapture %}
              {% capture date %}<time itemprop="datePublished" datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>{% endcapture %}
              <p class="blog__article--light">{{ 'blogs.article.author_on_date_html' | t: author: author, date: date }}</p>
            {% endif %}
          </header>
          
          <div class="blog__article__content rte" itemprop="articleBody">
            {{ article.content }}
          </div>  
  
{% endif %}    

{% if section.settings.banner_image == true %}
  
  {% if article.image %}
    {%- assign img_url = article.image.src | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
    <div class="homepage-image {{ section.settings.image_height }}" id="FeaturedImage-{{ section.id }}"
      {% if section.settings.parallax %}
        data-parallax-src="{{ article.image | img_url: '18x' }}"
        data-src="{{ img_url }}"
        data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100, 4480, 5800]"
        data-aspectratio="{{  article.image.aspect_ratio }}"
        data-sizes="auto"
      {% endif %}>
      {% if section.settings.image_height == 'use_image' %}
        <div class="lazy-image" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%; background-image: url('{{ article.image | img_url: '1x1' }}');">
          <img class="lazyload fade-in" {% if section.settings.parallax %} style="opacity: 0;"{% endif %}
            alt="{{ article.image.alt | default: article.title }}"
            data-src="{{ img_url }}"
            data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100, 4480, 5800]"
            data-aspectratio="{{  article.image.aspect_ratio }}"
            data-parent-fit="cover"
            data-sizes="auto"/>
        </div>
      {% endif %}
      {% if section.settings.parallax == false and section.settings.image_height != 'use_image' %}
        <div class="background-size-cover lazyload"  data-bgset="{% include 'bgset', image: article.image %}"></div>
      {% endif %}
      <noscript>
        <img src="{{ article.image | img_url: '720x' }}" alt="{{ article.image.alt | default: article.title }}" class="responsive-wide-image"/>
      </noscript>
    </div>
  {% endif %}


  <div class="full-width" style="margin: 0px {{ grid_item_width }};">

    <div class="grid">

      <article class="grid__item {{ blog_grid }}" itemscope itemtype="http://schema.org/Article">

        <div class="blog__article{% if article.image %} blog__article--over-image{% endif %}">
          <header>
            <h1 class="h2" itemprop="headline">{{ article.title }}</h1>
            {% if section.settings.blog_show_meta %}
              {% capture author %}<span itemprop="author" itemscope itemtype="https://schema.org/Person"><span class="strong" itemprop="name">{{ article.author }}</span></span>
              {% endcapture %}
              {% capture date %}<time itemprop="datePublished" datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>{% endcapture %}
              <p class="blog__article--light">{{ 'blogs.article.author_on_date_html' | t: author: author, date: date }}</p>
            {% endif %}
          </header>

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

{% endif %}  
          
          {% if section.settings.tags %}
            {% include 'tags-article' %}
          {% endif %}
          {% if section.settings.social %}
            {% capture link %}{{ shop.url }}{{ article.url }}{% endcapture %}
            {% capture shareTitle %}{{ article.title | url_param_escape }}{% endcapture %}
            <div class="share text-center" data-permalink="{{ link }}">
              {% if settings.share_enable_facebook %}
                <a target="_blank" href="//www.facebook.com/sharer.php?u={{ link }}" class="share__link">
                  <span class="icon icon-facebook" aria-hidden="true"></span>
                  <span class="share__text">{{ 'general.share.facebook' | t }}</span>
                </a>
              {% endif %}
              {% if settings.share_enable_twitter %}
                <a target="_blank" href="//twitter.com/share?url={{ link }}&amp;text={{ shareTitle }}" class="share__link">
                  <span class="icon icon-twitter" aria-hidden="true"></span>
                  <span class="share__text">{{ 'general.share.twitter' | t }}</span>
                </a>
              {% endif %}
              {% if settings.share_enable_pinterest %}
                <a target="_blank" href="http://pinterest.com/pin/create/button/?url={{ link }}&amp;media={{ article.image | img_url: '1024x1024' | prepend: 'http:' }}&amp;description={{ shareTitle }}" class="share__link">
                  <span class="icon icon-pinterest" aria-hidden="true"></span>
                  <span class="share__text">{{ 'general.share.pinterest' | t }}</span>
                </a>
              {% endif %}
              {% if settings.share_enable_google %}
                <a target="_blank" href="//plus.google.com/share?url={{ link }}" class="share__link">
                  <span class="icon icon-google" aria-hidden="true"></span>
                  <span class="share__text">{{ 'general.share.google' | t }}</span>
                </a>
              {% endif %}
            </div>
          {% endif %}
        </div>
        {% if blog.next_article or blog.previous_article %}
          <p class="clearfix">
            {% if blog.previous_article %}
              <span class="left">
                <a href="{{ blog.previous_article }}" class="btn btn--secondary btn--small uppercase">
                  &larr; {{ 'blogs.article.older_post' | t }}
                </a>
              </span>
            {% endif %}
            {% if blog.next_article %}
              <span class="right">
                <a href="{{ blog.next_article }}" class="btn btn--secondary btn--small uppercase">
                  {{ 'blogs.article.newer_post' | t }} &rarr;
                </a>
              </span>
            {% endif %}
          </p>
        {% endif %}


        {% if blog.comments_enabled? %}
          <hr class="hr--clear">

          {% if article.comments_count > 0 %}
          <p class="uppercase h4">{{ 'blogs.comments.comments_with_count' | t: count: number_of_comments }}</p>
          {% endif %}

          <hr class="hr--clear">

          {% comment %}
            Just like blog.liquid page, define how many comments should be on each page.
          {% endcomment %}
          {% paginate article.comments by 5 %}
            {% comment %}
              #Comments is required, it is used as an anchor link by Shopify.
            {% endcomment %}
            <div id="Comments">

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

              {% if number_of_comments > 0 %}
                <ul>
                  {% comment %}
                    If a comment was just submitted with no blank field, show it.
                  {% endcomment %}
                  {% if comment and comment.created_at %}
                    <li id="{{ comment.id }}" class="comment first{% if article.comments_count == 0 %} last{% endif %}">
                      {% include 'comment' %}
                    </li>
                  {% endif %}

                  {% comment %}
                    Showing the rest of the comments.
                  {% endcomment %}
                  {% for comment in article.comments %}
                    <li id="{{ comment.id }}" class="comment{% unless number_of_comments > article.comments_count %}{% if forloop.first %} first{% endif %}{% endunless %}{% if forloop.last %} last {% endif %}">
                      {% include 'comment' %}
                    </li>
                  {% endfor %}
                </ul>

                {% if paginate.pages > 1 %}
                  <hr class="hr--clear">
                  <div class="text-center">
                    {% include 'pagination-custom' %}
                  </div>
                {% endif %}

                <hr class="hr--clear">

              {% endif %}

              {% comment %}
                Comment submission form
              {% endcomment %}
              {% form 'new_comment', article %}

                {% comment %}
                  #AddCommentTitle is used simply as an anchor link
                {% endcomment %}
                <p class="uppercase h4" id="AddCommentTitle">{{ 'blogs.comments.title' | t }}</p>

                {{ form.errors | default_errors }}

                <div class="grid">

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

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

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

                </div>

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

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

                {% comment %}
                  Assign variable to be used after timber.init() is run in theme.liquid
                {% endcomment %}
                {% if form.errors %}
                  {% assign newHash = 'AddCommentTitle' %}
                {% endif %}

                {% if form.posted_successfully? %}
                  {% assign newHash = 'Comments' %}
                {% endif %}

              {% endform %}

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

      </article>
      {% if sidebar_enable %}
        <div class="grid__item large--one-third blog__sidebar">
          <h2 class="uppercase h4">{{ blog.title }}</h2>
          <a class="icon-fallback-text blog__rss" href="{{ blog.url }}.atom" title="{{ shop.name }} RSS" target="_blank">
            <span class="icon icon-rss"></span>
            <span class="fallback-text">RSS</span>
          </a>
          <hr class="hr--small">
          {% if blog.all_tags != blank and section.settings.sidebar_tags %}
          <h5 class="uppercase h5">{{ 'blogs.article.tags' | t }}</h2>
            {% for tag in blog.all_tags %}
              <a class="blog__tag" href="/blogs/{{ blog.handle }}/tagged/{{ tag | handleize }}">{{ tag }}</a>
            {% endfor %}
            <div class="page-margin"></div>
          {% endif %}
          {% if section.settings.recent %}
            {% assign counter = 0 %}
            {% assign article_limit = 2 %}
            {% assign current_article = article %}
            {% assign blog_grid = 'one-whole' %}
            <div class="grid">
              {% for article in blog.articles %}
                {% unless article.handle == current_article.handle %}
                  {% include 'article-grid-item' %}
                  {% assign counter = counter | plus: 1 %}
                  {% if counter == article_limit %}
                    {% break %}
                  {% endif %}
                {% endunless %}
              {% endfor %}
            </div>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div> 
</div>


{% schema %}
{
  "name": "Article full width",
  "settings": [
    {
      "type": "header",
      "content": "Article full width"
    },
    {
      "type": "checkbox",
      "id": "blog_show_meta",
      "label": "Show date and author",
      "default": true
    },
	{
      "type": "checkbox",
      "id": "social",
      "label": "Show social sharing"
    },
    {
      "type": "header",
      "content": "Featured Image"
    },
    {
      "type": "select",
      "id": "image_height",
      "label": "Image height",
      "options": [
        { "value": "use_image", "label": "Image height"},
        { "value": "use_screen_two_thirds", "label": "Tall"},
        { "value": "use_screen_one_half", "label": "Medium"},
        { "value": "use_screen_one_third", "label": "Short"},
        { "value": "use_screen_one_fifth", "label": "Tiny"}
      ],
      "default": "use_screen_one_third"
    },
    {
      "type": "checkbox",
      "id": "parallax",
      "default": true,
      "label": "Enable parallax scroll"
    },
    {
      "type": "checkbox",
      "id": "banner_image",
      "default": true,
      "label": "Enable banner image"
    },
    {
      "type": "header",
      "content": "Width"
    },
    {
      "type":    "range",
      "id":      "grid",
      "min":     0,
      "max":     4,
      "step":    1,
      "label":   "Margin",
      "default": 1
    }
  ]
}
{% endschema %}

{% stylesheet %}

.blog__article {border: none; box-shadow: 0px 0px 0px rgba(0,0,0,0.0);}

  span.right {margin-right: 10px !important;}
  span.left {margin-left: 10px !important;}

  #Comments {
      margin: 0px 10px !important;
  }


  @media screen and (max-width: 480px) {
      .full-width {
          margin: 0px !important;
      }
  }

{% endstylesheet %}