{% 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 }} .link-blog {
        opacity: .5;
    }
    #{{ el_id }} .link-blog.active {
        opacity: 1;
    }
    #{{ el_id }} .h7 {
        line-height: 22px;
    }
    #{{ el_id }} .select-sticky {
        top: 0;
    }
    #{{ el_id }} .view-more {
        width: 100%;
    }
    @media only screen and (min-width:1024px) {
        #{{ el_id }} .select-sticky {
            display: none;
        }
        #{{ el_id }} .view-more {
            width: fit-content;
        }
    }
</style>
<section id="{{ el_id }}" class="{{ padding_class }}">
    <div class="container">
        <div class="row">
            <div class="col-12 col-d-6 push-d-3">
                <{{ section.settings.title_element }} class="{{ section.settings.title_class }} tl d-tc mb-25 d-mb-35">
                    {{ section.settings.title }}
                </{{ section.settings.title_element }}>
                <div class="blog-list-tags hide-m show-d mb-80">
                    {%- assign values = 'All,' -%}
                    {%- assign option_values = 'all,' -%}

                    {%- assign default_v = 'all' -%}
                    {%- assign default_t = 'All' -%}
                    <ul class="flex jc-center colgap-35">
                        <li><a href="{{ blog.url }}" class="link-blog p3{% if current_tags == blank %} active{% endif %}">All</a></li>
                        {% for tag in blog.all_tags %}
                            {% assign tag_handle = tag | handle %}
                            {%- assign values = values | append: tag | append: ',' -%}
                            {%- assign option_values = option_values | append: tag_handle | append: ',' -%}
                            {% if current_tags contains tag %}
                                {%- assign default_v = tag_handle -%}
                                {%- assign default_t = tag -%}
                            {% endif %}
                            <li><a href="{{ blog.url }}/tagged/{{ tag | handle }}" class="link-blog p3{% if current_tags contains tag %} active{% endif %}">{{ tag }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="col-12 col-d-10 push-d-1">
                {%- assign array_values = values | remove_last: ',' | split: ',' -%}
                {%- assign array_option_values = option_values | remove_last: ',' | split: ',' -%}
                
                {% render 'global-select',
                    id: 'blog-select-tag',
                    global_select_class: 'select-sticky sticky zi-1 mb-40',
                    default_value: default_v,
                    default_text: default_t,
                    values: array_values,
                    option_values: array_option_values
                %}
                <div class="blog-list-row row flex flex-wrap">                    
                    {%- assign count = 0 -%}
                    {% for art in blog.articles %}
                        {% if count < 6 %}
                            {%- assign count = count | plus: 1 -%}
                            <div class="col-12 col-t-6 col-d-4 mb-40 d-mb-80">
                                {% render 'article-card',
                                    article: art,
                                    use_tag: true,
                                    text_class: 'tc'
                                %}
                            </div>
                        {% endif %}
                    {% endfor %}

                    {% if blog.articles.size > 6 %}
                        <div class="col-12 mt-30 d-mt-40 tc view-more-wrapper">
                            <a class="btn2 view-more" data-index="2">View More</a>
                            <script>
                                document.querySelector(".view-more").addEventListener('click', (el) => {
                                    renderBlogPosts("{{ blog.title | handle }}", el.target.dataset.index);
                                });

                                async function renderBlogPosts(handle, page) {
                                    try {
                                        const { data } = await axios.get(`${window.Shopify.routes.root}blogs/${handle}?view=more&page=${page}`);
                                        const tabContent = document.querySelector(".blog-list-row");
                                        tabContent.innerHTML = tabContent.innerHTML + data;
                                        document.querySelector(".view-more").closest('.view-more-wrapper').remove();

                                        $360.lazyLoadInstance.update();
                                    } catch (error) {
                                        console.log(error);
                                    }
                                }
                            </script>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    document.querySelector("#blog-select-tag").addEventListener('change', (e) => {
        if (e.target.value != 'all') {
            window.location.href = "{{ blog.url }}/tagged/" + e.target.value;
        } else {
            window.location.href = "{{ blog.url }}";
        }
    });
</script>
{% schema %}
    {
        "name": "Blog Listing",
        "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": "textarea",
                "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": "select",
                "id": "title_class",
                "label": "Title class",
                "options": [
                    {"value": "h1", "label": "H1"},
                    {"value": "h2", "label": "H2"},
                    {"value": "h3", "label": "H3"},
                    {"value": "h4", "label": "H4"}
                ],
                "default": "h3"
            }
        ],
        "presets": [{ "name": "Blog Listing" }]
    }
{% endschema %}