<div class="lastest_block homeblog-latest" id="blog-{{ section.id }}">
  <div class="page-width lastest_wrapper">
    {% if section.settings.title != blank %}
    <header class="section-header text-center">
      <h2>{{ section.settings.title }}</h2>
      {% if section.settings.short_desc != blank %}
      <p>{{ section.settings.short_desc }}</p>
      {% endif %}
    </header>
    {% endif %}

    {%- assign blog = blogs[section.settings.blog] -%}

    {% unless blog.articles_count == 0 %}
    <ul class="grid grid--uniform grid--blog">
      {% for article in blog.articles limit: section.settings.post_limit %}
      <li class="grid__item medium-up--one-third">
        <article aria-labelledby="FeaturedBlogTitle-{{ forloop.index0 }}-{{ section.id }}">
          <header>
            <a href="{{ article.url }}" class="article__link">
              {% if article.image %}
              {% capture img_id %}ArticleImage-{{ article.image.id }}{% endcapture %}
              {% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}
              {%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

              {% include 'image-style', image: article.image, height: 345, wrapper_id: img_wrapper_id, img_id: img_id %}
              <div id="{{ img_wrapper_id }}" class="article__grid-image-wrapper js">
                <div class="article__grid-image-container" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
                  <img id="{{ img_id }}"
                       class="article__grid-image lazyload"
                       data-src="{{ img_url }}"
                       data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                       data-aspectratio="{{ article.image.aspect_ratio }}"
                       data-sizes="auto"
                       alt="">
                </div>
              </div>
              <noscript>
                <div class="article__grid-image-wrapper">
                  {{ article | img_url: '345x345', scale: 2 | img_tag: article.title, 'article__grid-image' }}
                </div>
              </noscript>
              {% endif %}

              {% if section.settings.blog_show_date %}
              <span class="article__date">
                <i class="fa fa-calendar" aria-hidden="true"></i> {{ article.published_at | time_tag: format: 'date' }}
              </span>
              {% endif %}

              <h3 class="article__title" id="FeaturedBlogTitle-{{ forloop.index0 }}-{{ section.id }}">
                {{ article.title }}
              </h3>
            </a>

            {% if section.settings.blog_show_author %}
            <span class="article__author">{{ 'blogs.article.by_author' | t: author: article.author }}</span>
            {% endif %}
          </header>

          <div class="article__grid-meta">
            <div class="rte article__grid-excerpt">
              {% if article.excerpt.size > 0 %}
              {{ article.excerpt }}
              {% else %}
              {{ article.content | strip_html | truncate: 100 }}
              {% endif %}
            </div>

            {% if article.tags.size > 0 %}
            <div class="article__tags rte">
              <ul class="list--inline" aria-label="{{ 'blogs.article.tags' | t }}">
                {% for tag in article.tags %}
                <li>
                  <a href="{{ blog.url }}/tagged/{{ tag | handle }}" class="article__grid-tag">{{ tag }}</a>
                </li>
                {% endfor %}
              </ul>
            </div>
            {% endif %}

            {% comment %}
            <ul class="list--inline article__meta-buttons">
              <li>
                <a href="{{ article.url }}" class="btn btn--tertiary btn--small" aria-label="{{ 'blogs.article.read_more_title' | t: title: article.title }}">
                  <i class="fa fa-link" aria-hidden="true"></i>
                  <span>{{ 'blogs.article.read_more' | t }}</span>
                </a>
              </li>

              {% if blog.comments_enabled? and article.comments_count > 0 %}
              <li>
                <a href="{{ article.url }}#comments" class="article__comment-count btn btn--tertiary btn--small">
                  {{ 'blogs.comments.comments_with_count' | t: count: article.comments_count }}
                </a>
              </li>
              {% endif %}
            </ul>
            {% endcomment %}

          </div>
        </article>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <div class="grid grid--uniform grid--blog">
      {% for i in (1..section.settings.post_limit) %}
      <div class="grid__item medium-up--one-third">
        <div class="article__grid-meta">
          <h3 class="article__title">
            <a href="#">{{ 'homepage.onboarding.blog_title' | t }}</a>
          </h3>

          {% if section.settings.blog_show_author %}
          <span class="article__author">{{ 'homepage.onboarding.blog_author' | t }}</span>
          {% endif %}

          <div class="rte article__grid-excerpt">
            {{ 'homepage.onboarding.blog_excerpt' | t }}
          </div>

          <ul class="list--inline article__meta-buttons">
            <li>
              <a href="{{ article.url }}" class="btn btn--tertiary btn--small">
                {{ 'blogs.article.read_more' | t }}
              </a>
            </li>
          </ul>
        </div>
      </div>
      {% endfor %}
    </div>
    {% endunless %}

    {% if section.settings.show_view_all %}
    <div class="text-center view_all_btn">
      <a href="{{ blog.url }}" class="btn" aria-label="{{ 'blogs.article.view_all_blogs' | t }}">
        {{ 'blogs.article.view_all' | t }}
      </a>
    </div>
    {% endif %}
  </div>
</div>


<style type="text/css">
  .lastest_block .view_all_btn .btn {
    margin-top: 20px;
    background: {{ section.settings.btn_bg_color }};
    color: {{ section.settings.btn_text_color }};
  }
  .lastest_block .view_all_btn .btn:hover {
    background: {{ section.settings.btn_bg_hover_color }};
    color: {{ section.settings.btn_text_hover_color }};
  }
</style>


{% schema %}
{
  "name": "Posts do blog com imagem",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Título",
      "default": "Posts do blog"
    },
	{
      "type": "textarea",
      "id": "short_desc",
      "label": "Descrição",
      "default": "Veja os últimos posts do nosso blog."
    },
    {
      "id": "blog",
      "type": "blog",
      "label": "Blog"
    },
    {
      "type": "range",
      "id": "post_limit",
      "label": "Posts",
      "min": 3,
      "max": 12,
      "step": 3,
      "default": 3
    },
    {
      "type": "checkbox",
      "id": "blog_show_author",
      "label": "Mostrar autor",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "blog_show_date",
      "label": "Mostrar data",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "label": "Mostrar botão 'Ver tudo'",
      "default": false
    },
	{
      "type": "color",
      "id": "btn_bg_color",
      "label": "Fundo botão 'Ver tudo'",
      "default": "#f39ac1"
	},
	{
      "type": "color",
      "id": "btn_bg_hover_color",
      "label": "Fundo botão 'Ver tudo', ao passar mouse",
      "default": "#000000"
	},
	{
      "type": "color",
      "id": "btn_text_color",
      "label": "Texto botão 'Ver tudo'",
      "default": "#ffffff"
	},
	{
      "type": "color",
      "id": "btn_text_hover_color",
      "label": "Texto botão 'Ver tudo', ao passar mouse",
      "default": "#ffffff"
	}
  ],
  "presets": [
    {
      "name": "Posts do blog com imagem",
      "category": "astron",
      "settings": {
        "blog": "News",
        "post_limit": 3
      }
    }
  ]
}
{% endschema %}
