<div class="home_featured-blog">
  <div class="page-width featured-blog">
    {% if section.settings.title != blank %}
    <header class="section-header title text-center animatable fadeInLeftBig animate">
      <h2>{{ section.settings.title }}</h2>
    </header>
    {% endif %}

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

    <div class="featured_blog_container">
      {% unless blog.articles_count == 0 %}
      <ul class="grid grid--uniform grid--blog" id="blogSlder-{{ section.id }}">
        {% for article in blog.articles limit: section.settings.post_limit %}
        <li class="grid__item">
          <article class="article_blog_content" aria-labelledby="FeaturedBlogTitle-{{ forloop.index0 }}-{{ section.id }}">
            <header class="animatable zoomIn animate">
              <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: 480, wrapper_id: img_wrapper_id, img_id: img_id %}
                <div id="" class="article__grid-image-wrapper js">
                  <div class="article__grid-image-container"  >
                    {% comment %}
                    <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="">
                    {% endcomment %}
                    {% include 'image-element', image: article.image, alt: article.title, additional_classes: 'article__grid-image' %}
                  </div>
                </div>
                <noscript>
                  <div class="article__grid-image-wrapper">
                    {{ article | img_url: '480x480', scale: 2 | img_tag: article.title, 'article__grid-image' }}
                  </div>
                </noscript>
                {% endif %}
              </a>
            </header>

            <div class="article__grid-meta_details animatable fadeIn animate">
              <div class="wrap-blog-inner">
                <h3 class="article__title" id="FeaturedBlogTitle-{{ forloop.index0 }}-{{ section.id }}">
                  <a href="{{ article.url }}">{{ article.title }}</a>
                </h3>

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

                {% if section.settings.blog_show_date %}
                <span class="article__date">
                  {{ article.published_at | time_tag: format: 'date' }}
                </span>
                {% endif %}

                <div class="article__grid-meta">


                  <ul class="list--inline article__meta-buttons">
                    <li>
                      <a href="{{ article.url }}" class="btn btn--tertiary btn--small read_more" aria-label="{{ 'blogs.article.read_more_title' | t: title: article.title }}">
                        {{ 'blogs.article.read_more' | t }}
                      </a>
                    </li>
                    {% comment %}
                    {% 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 %}
                    {% endcomment %}
                  </ul>
                </div>
              </div>
            </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 %}
    </div>
  </div>
</div>


{% schema %}
{
  "name": {
    "cs": "Příspěvky na blogu",
    "da": "Blogopslag",
    "de": "Blogposts",
    "en": "Blog posts",
    "es": "Entradas del blog",
    "fi": "Blogijulkaisut",
    "fr": "Articles de blog",
    "hi": "ब्लॉग पोस्ट",
    "it": "Articoli del blog",
    "ja": "ブログ記事",
    "ko": "블로그 게시물",
    "nb": "Blogginnlegg",
    "nl": "Blogberichten",
    "pl": "Posty na blogu",
    "pt-BR": "Posts do blog",
    "pt-PT": "Publicações no blogue",
    "sv": "Blogginlägg",
    "th": "โพสต์บล็อก",
    "tr": "Blog gönderileri",
    "vi": "Bài viết blog",
    "zh-CN": "博客文章",
    "zh-TW": "部落格文章"
  },
  
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": {
        "cs": "Nadpis",
        "da": "Overskrift",
        "de": "Titel",
        "en": "Heading",
        "es": "Título",
        "fi": "Otsake",
        "fr": "En-tête",
        "hi": "शीर्षक",
        "it": "Heading",
        "ja": "見出し",
        "ko": "제목",
        "nb": "Overskrift",
        "nl": "Kop",
        "pl": "Nagłówek",
        "pt-BR": "Título",
        "pt-PT": "Título",
        "sv": "Rubrik",
        "th": "ส่วนหัว",
        "tr": "Başlık",
        "vi": "Tiêu đề",
        "zh-CN": "标题",
        "zh-TW": "標題"
      },
      "default": {
        "cs": "Příspěvky na blogu",
        "da": "Blogopslag",
        "de": "Blogposts",
        "en": "Blog posts",
        "es": "Entradas del blog",
        "fi": "Blogijulkaisut",
        "fr": "Articles de blog",
        "hi": "ब्लॉग पोस्ट",
        "it": "Articoli del blog",
        "ja": "ブログ記事",
        "ko": "블로그 게시물",
        "nb": "Blogginnlegg",
        "nl": "Blogberichten",
        "pl": "Posty na blogu",
        "pt-BR": "Posts do blog",
        "pt-PT": "Publicações no blogue",
        "sv": "Blogginlägg",
        "th": "โพสต์บล็อก",
        "tr": "Blog gönderileri",
        "vi": "Bài viết blog",
        "zh-CN": "博客文章",
        "zh-TW": "部落格文章"
      }
    },
    {
      "id": "blog",
      "type": "blog",
      "label": {
        "cs": "Blog",
        "da": "Blog",
        "de": "Blog",
        "en": "Blog",
        "es": "Blog",
        "fi": "Blogi",
        "fr": "Blog",
        "hi": "ब्लॉग",
        "it": "Blog",
        "ja": "ブログ",
        "ko": "블로그",
        "nb": "Blogg",
        "nl": "Blog",
        "pl": "Blog",
        "pt-BR": "Blog",
        "pt-PT": "Blogue",
        "sv": "Blogg",
        "th": "บล็อก",
        "tr": "Blog",
        "vi": "Blog",
        "zh-CN": "博客",
        "zh-TW": "部落格"
      }
    },
    {
      "type": "range",
      "id": "post_limit",
      "label": {
        "cs": "Příspěvky",
        "da": "Opslag",
        "de": "Posts",
        "en": "Posts",
        "es": "Publicaciones",
        "fi": "Julkaisut",
        "fr": "Articles",
        "hi": "पोस्ट",
        "it": "Articoli",
        "ja": "投稿",
        "ko": "게시물",
        "nb": "Innlegg",
        "nl": "Berichten",
        "pl": "Posty",
        "pt-BR": "Posts",
        "pt-PT": "Publicações",
        "sv": "Inlägg",
        "th": "โพสต์",
        "tr": "Gönderiler",
        "vi": "Bài viết",
        "zh-CN": "文章",
        "zh-TW": "貼文"
      },
      "min": 1,
      "max": 12,
      "step": 1,
      "default": 2
    },
    {
      "type": "checkbox",
      "id": "blog_show_author",
      "label": {
        "cs": "Zobrazit autora",
        "da": "Vis forfatter",
        "de": "Autor anzeigen",
        "en": "Show author",
        "es": "Mostrar autor",
        "fi": "Näytä tekijä",
        "fr": "Afficher l'auteur",
        "hi": "लेखक दिखाएं",
        "it": "Mostra autore",
        "ja": "執筆者を表示する",
        "ko": "작성자 표시",
        "nb": "Vis forfatter",
        "nl": "Auteur weergeven",
        "pl": "Pokaż autora",
        "pt-BR": "Exibir autor",
        "pt-PT": "Mostrar autor",
        "sv": "Visa författare",
        "th": "แสดงผู้เขียน",
        "tr": "Yazarı göster",
        "vi": "Hiển thị tác giả",
        "zh-CN": "显示作者",
        "zh-TW": "顯示作者"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "blog_show_date",
      "label": {
        "cs": "Zobrazit datum",
        "da": "Vis dato",
        "de": "Datum anzeigen",
        "en": "Show date",
        "es": "Mostrar fecha",
        "fi": "Näytä päivämäärä",
        "fr": "Afficher la date",
        "hi": "दिनांक दिखाएं",
        "it": "Mostra data",
        "ja": "日付を表示する",
        "ko": "날짜 표시",
        "nb": "Vis dato",
        "nl": "Datum weergeven",
        "pl": "Pokaż datę",
        "pt-BR": "Exibir data",
        "pt-PT": "Mostrar data",
        "sv": "Visa datum",
        "th": "แสดงวันที่",
        "tr": "Tarihi göster",
        "vi": "Hiển thị ngày",
        "zh-CN": "显示日期",
        "zh-TW": "顯示日期"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "label": {
        "cs": "Zobrazit tlačítko Zobrazit vše",
        "da": "Vis knappen \"Se flere\"",
        "de": "'Alle anzeigen' Button anzeigen",
        "en": "Show 'View all' button",
        "es": "Mostrar el botón 'Ver todo'",
        "fi": "Näytä \"Näytä kaikki\" -painike",
        "fr": "Afficher le bouton “Voir tout”",
        "hi": "'सभी देखें' बटन दिखाएं",
        "it": "Mostra il pulsante \"Visualizza tutto\"",
        "ja": "「すべて表示」ボタンを表示する",
        "ko": "'모두 보기' 버튼 표시",
        "nb": "Vis «Se alle»-knapp",
        "nl": "Knop 'Alles weergeven' weergeven",
        "pl": "Pokaż przycisk „Wyświetl wszystkie”",
        "pt-BR": "Exibir botão \"Visualizar tudo\"",
        "pt-PT": "Mostrar botão 'Ver tudo'",
        "sv": "Visa \"Visa alla\"-knappen",
        "th": "แสดงปุ่ม 'ดูทั้งหมด'",
        "tr": "\"Tümünü görüntüle\" düğmesini göster",
        "vi": "Hiển thị nút \"Xem tất cả\"",
        "zh-CN": "显示“查看全部”按钮",
        "zh-TW": "顯示「檢視全部」按鈕"
      },
      "default": false
    }
  ],
  "presets": [
    {
      "name": {
        "cs": "Příspěvky na blogu",
        "da": "Blogopslag",
        "de": "Blogposts",
        "en": "Blog posts",
        "es": "Entradas del blog",
        "fi": "Blogijulkaisut",
        "fr": "Articles de blog",
        "hi": "ब्लॉग पोस्ट",
        "it": "Articoli del blog",
        "ja": "ブログ記事",
        "ko": "블로그 게시물",
        "nb": "Blogginnlegg",
        "nl": "Blogberichten",
        "pl": "Posty na blogu",
        "pt-BR": "Posts do blog",
        "pt-PT": "Publicações no blogue",
        "sv": "Blogginlägg",
        "th": "โพสต์บล็อก",
        "tr": "Blog gönderileri",
        "vi": "Bài viết blog",
        "zh-CN": "博客文章",
        "zh-TW": "部落格文章"
      },
      "category": {
        "cs": "Blog",
        "da": "Blog",
        "de": "Blog",
        "en": "Blog",
        "es": "Blog",
        "fi": "Blogi",
        "fr": "Blog",
        "hi": "ब्लॉग",
        "it": "Blog",
        "ja": "ブログ",
        "ko": "블로그",
        "nb": "Blogg",
        "nl": "Blog",
        "pl": "Blog",
        "pt-BR": "Blog",
        "pt-PT": "Blogue",
        "sv": "Blogg",
        "th": "บล็อก",
        "tr": "Blog",
        "vi": "Blog",
        "zh-CN": "博客",
        "zh-TW": "部落格"
      },
      "settings": {
        "blog": "News",
        "post_limit": 3
      }
    }
  ]
}
{% endschema %}
