{% liquid
    assign section_name = 'Blog Listing'
    assign el_id = section_name | handle | append: '-' | append: section.id

    assign settings = section.settings
    assign section_padding = settings.padding
    assign padding_class = 'sp-' | append: section_padding
    if settings.top_half_padding
        assign padding_class = padding_class | append: ' spt-' | append: section_padding | append: '-half'
    endif
    if settings.bottom_half_padding
        assign padding_class = padding_class | append: ' spb-' | append: section_padding | append: '-half'
    endif
%}
<style>
    #{{ el_id }} .swiper {
        width: calc(100% + 30px);
        margin-left: -15px;
    }
    @media only screen and (min-width:600px) {
        #{{ el_id }} .swiper {
            width: calc(100% + 40px);
            margin-left: -20px;
        }
    }
    @media only screen and (min-width:1024px) {
        #{{ el_id }} .swiper {
            width: 100%;
            margin-left: 0;
        }
    }
</style>
<section id="{{ el_id }}" class="{{ padding_class }}{% if section.settings.bg_overlay %} bg-overlay{% endif %}">
    <div class="container">
        <div class="row">
            <{{ section.settings.title_element }} class="h4 tc mb-30 d-mb-70">
                {{ section.settings.title }}
            </{{ section.settings.title_element }}>
            <div class="col-12 col-d-10 push-d-1">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        {% if section.settings.use_latest_articles %}
                            {%- assign count = 0 -%}
                            {% for art in blog.articles %}
                                {% if count < 3 %}
                                    {% for tag in article.tags %}
                                        {% if art.tags contains tag and art.id != article.id %}
                                            {%- assign count = count | plus: 1 -%}
                                            <div class="swiper-slide">
                                                {% render 'article-card',
                                                    article: art,
                                                    text_class: 'tc',
                                                    use_tag: true,
                                                    use_link: true
                                                %}
                                            </div>
                                            {% break %}
                                        {% endif %}
                                    {% endfor %}
                                {% endif %}
                            {% endfor %}
                        {% else %}
                        <div class="swiper-slide">
                            {% render 'article-card',
                                article: block.settings.article,
                                text_class: 'tc',
                                use_tag: true,
                                use_link: true
                            %}
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    function initSwiper_{{ section.id | remove: '-' }}() {
        new Swiper("#{{ el_id }} .swiper", {
            spaceBetween: 15,
            slidesPerView: 1.5,
            slidesOffsetBefore: 15,
            slidesOffsetAfter: 15,
            allowTouchMove: true,
            breakpoints: {
                600: {
                    spaceBetween: 20,
                    slidesPerView: 2.5,
                    slidesOffsetBefore: 20,
                    slidesOffsetAfter: 20,
                },
                1024: {
                    spaceBetween: 60,
                    slidesPerView: 3,
                    slidesOffsetBefore: 0,
                    slidesOffsetAfter: 0,
                }
            }
        });
    }

    initSwiper_{{ section.id | remove: '-' }}();

    document.addEventListener('shopify:section:load', () => {
        initSwiper_{{ section.id | remove: '-' }}();
    });
</script>
{% schema %}
    {
        "name": "Featured Blog",
        "blocks": [
            {
                "type": "blog",
                "name": "Blog",
                "settings": [
                    {
                        "type": "article",
                        "id": "article",
                        "label": "Choose an Article"
                    }
                ]
            }
        ],
        "settings": [
            {
                "type": "header",
                "content": "Section Padding"
            },
            {
                "type": "select",
                "id": "padding",
                "label": "Padding",
                "options": [
                    {
                        "value": "no",
                        "label": "No"
                    },
                    {
                        "value": "sm",
                        "label": "Small"
                    },
                    {
                        "value": "md",
                        "label": "Med"
                    },
                    {
                        "value": "lg",
                        "label": "Large"
                    }
                ],
                "default": "md"
            },
            {
                "type": "checkbox",
                "id": "top_half_padding",
                "label": "Top half padding",
                "default": false
            },
            {
                "type": "checkbox",
                "id": "bottom_half_padding",
                "label": "Bottom half padding",
                "default": false
            },
            {
                "type": "header",
                "content": "General Settings"
            },
            {
                "type": "checkbox",
                "id": "bg_overlay",
                "label": "Background overlay"                
            },
            {
                "type": "text",
                "id": "title",
                "label": "Title"
            },
            {
                "type": "select",
                "id": "title_element",
                "label": "Title Element",
                "options": [
                    {"value": "h1", "label": "H1"},
                    {"value": "h2", "label": "H2"},
                    {"value": "h3", "label": "H3"},
                    {"value": "h4", "label": "H4"}
                ],
                "default": "h2"
            },
            {
                "type": "checkbox",
                "id": "use_latest_articles",
                "label": "Use latest articles",
                "info": "Instead of using block"
            }
        ],
        "presets": [{ "name": "Featured Blog" }]
    }
{% endschema %}