<div class="hs_resourses_wrap" style="background-color:{{ module.style.background.background_color.rgba }}">
    <div class="topic_wrap">
        <div class="page-center">
            <div class="blog_names">
                {% for item in module.resources %}
                <div class="blog_title {% if loop.first %} active{% endif %}" data-blog="blog_title_{{loop.index}}_{{name}}">
                    {{item.blog_name}}
                </div>
                {% endfor %}
            </div>
            <div class="blog_subcate">
                {% for item in module.resources %}
                {% set index  = loop.index %}
                <div class="nav {% if loop.first %} active{% endif %}" id="blog_title_{{loop.index}}_{{name}}">
                    {% set my_topics = blog_topics(item.select_blogs, 100) %}
                    <ul>
                        {% for item in my_topics %}
                        <li class="sub_cat {% if loop.first %} active{% endif %}" data-subcat="blog_{{index}}_{{ item|lower|replace(' ','_') }}_{{name}}"><a href="javascript:void(0)">{{ item }}</a></li>
                        {% if not loop.last %}
                        <span class="dot"><svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="1.5" cy="2" r="1.5" fill="#B2B0B0"></circle>
                            </svg>
                        </span>
                        {% endif %}
                        {% endfor %}
                    </ul>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="topic_content">
        <div class="page-center">
            <div class="page_inner">
                {% for item in module.resources %}
                {% set blog_item = item %}
                {% set all_posts = [] %}
                {% set posts = blog_recent_posts(item.select_blogs, 100) %}
                {% for post in posts %}
                {% do all_posts.append( post ) %}
                {% endfor %}
                <div class="blog_items {% if loop.first %} active {% endif %}" data-id="blog_title_{{loop.index}}_{{name}}">
                    {% set index = loop.index %}
                    {% set my_topics = blog_topics(item.select_blogs, 100) %}
                    {% for item in my_topics %}
                    <div class="cate_cards {% if loop.first %} active {% endif %}" id="blog_{{index}}_{{ item|lower|replace(' ','_') }}_{{name}}">
                        <div class="smart_heading">
                            <div class="smart_hr first">
                                <hr>
                            </div>
                            <div class="smart_hr">
                                <h3>
                                    {{item}}
                                </h3>
                            </div>
                            <div class="smart_hr last">
                                <hr>
                            </div>
                        </div>
                        <div class="cards_wrp {{item}}">
                            {% set count = 0 %}
                            <div class="left">
                                {% for post_item in all_posts %}
                                {% set all_tags_string = post_item.tag_list|join(", ") %}
                                {% if all_tags_string is string_containing item  %}
                                {% if count < 4  %}
                                {% if count == 0 %}
                                <div class="post_item">
                                    <div class="post_item_pad">
                                        <div class="item_flex">
                                            {% if post_item.featured_image%}
                                            <div class="feature_image">
                                                <a href="{{post_item.absolute_url}}">
                                                    <img src="{{post_item.featured_image}}" alt="{{post_item.name|striptags}}">
                                                </a>
                                            </div>
                                            {% endif %}
                                            <div class="content">
                                                <div class="artile">
                                                    Article
                                                </div>
                                                <h4>
                                                    <a href="{{post_item.absolute_url}}">{{post_item.name}}</a>
                                                </h4>
                                                <p>
                                                    {{ post_item.post_list_content|safe|striptags|truncatehtml(110, '' , false) }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                                {% set count = count + 1 %}
                                {% endif %}
                                {% endif %}
                                {% endfor %}
                            </div>
                            <div class="right">
                                {% for post_item in all_posts %}
                                {% set all_tags_string = post_item.tag_list|join(", ") %}
                                {% if all_tags_string is string_containing item  %}
                                {% if count < 4 %}
                                {% if count >0 %}
                                <div class="post_item">
                                    <div class="post_item_pad">
                                        <div class="item_flex">
                                            {% if post_item.featured_image%}
                                            <div class="feature_image">
                                                <img src="{{post_item.featured_image}}" alt="{{post_item.name|striptags}}">
                                            </div>
                                            {% endif %}
                                            <div class="content">
                                                <div class="artile">
                                                    Article
                                                </div>
                                                <h4>
                                                    <a href="{{post_item.absolute_url}}">{{post_item.name}}</a>
                                                </h4>
                                                <p>
                                                    {{ post_item.post_list_content|safe|striptags|truncatehtml(110, '' , false) }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                                {% set count = count + 1 %}
                                {% endif %}
                                {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                        <div class="all_tag">
                            {% set href = blog_item.bottom_view_all_link.url.href %}
                            {% if blog_item.bottom_view_all_link.url.type is equalto "EMAIL_ADDRESS" %}
                            {% set href = "mailto:" + href %}
                            {% endif %}
                            <a href="{{href}}/tag/{{item.slug}}">View All</a>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="form_wrp">
        <div class="page-center">
            <div class="form_wrp_bg">
                <div class="flex_row">
                    <div class="col8">
                        {{ module.contact_section.content }}
                    </div>
                    <div class="col4">
                        {% form
              form_to_use="{{ module.contact_section.select_form.form_id }}"
              response_response_type="{{ module.contact_section.select_form.response_type }}"
              response_message="{{ module.contact_section.select_form.message }}"
              response_redirect_id="{{ module.contact_section.select_form.redirect_id }}"
              response_redirect_url="{{module.contact_section.select_form.redirect_url}}"
              gotowebinar_webinar_key="{{ module.contact_section.select_form.gotowebinar_webinar_key }}"
              %}
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="all_posts">
        <div class="page-center">
            <div class="smart_heading">
                <div class="smart_hr first">
                    <hr>
                </div>
                <div class="smart_hr">
                    <h3>
                        All articles
                    </h3>
                </div>
                <div class="smart_hr last">
                    <hr>
                </div>
            </div>
            {% for item in module.resources %}
            <div class="blog_data {% if loop.first %} active {% endif %}" blog-data="blog_title_{{loop.index}}_{{name}}">
                {% set all_posts = blog_recent_posts(item.select_blogs, 6) %}
                <div class="blog_list flex_row">
                    {% for post in  all_posts %}
                    <div class="col4">
                        <div class="card_inner">
                            <div class="post_image">
                                <a href="{{post.absolute_url}}">
                                    <img src="{{post.featured_image}}" alt="{{item.name|striptags}}">
                                </a>
                            </div>
                            <div class="card_pad">
                                <div class="article_title">
                                    Article
                                </div>
                                <div class="post_item_content">
                                    <h4>
                                        <a href="{{post.absolute_url}}">{{post.name}}</a>
                                    </h4>
                                    <p>
                                        {{ post.post_list_content|safe|striptags|truncatehtml(112, '...' , false) }}
                                    </p>
                                    <div class="read_more">
                                        <a href="{{post.absolute_url}}">Read more</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="button_wrap text_center">
                    {% set href = item.bottom_view_all_link.url.href %}
                    {% if item.bottom_view_all_link.url.type is equalto "EMAIL_ADDRESS" %}
                    {% set href = "mailto:" + href %}
                    {% endif %}
                    <a class="hs-button" {% if item.bottom_view_all_link.url.type is equalto "CALL_TO_ACTION"  %} href="{{ href }}" {# The href here is not escaped as it is not editable and functions as a JavaScript call to the associated CTA #} {% else %} href="{{ href|escape_url }}" {% endif %} {% if item.bottom_view_all_link.open_in_new_tab %} target="_blank" {% endif %} {% if item.bottom_view_all_link.rel %} rel="{{ item.bottom_view_all_link.rel|escape_attr }}" {% endif %}>
                        View all
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
      // Handle main category tab clicks
      $('.blog_title').click(function () {
        var target = $(this).data('blog'); 
    
        $('.nav').removeClass('active');
        $('.blog_title').removeClass('active');
        $('.blog_items').removeClass('active');
        $('.blog_data').removeClass('active');
    
        $('[data-id="' + target + '"]').addClass('active');
        $('[blog-data="' + target + '"]').addClass('active');
        $('#' + target).addClass('active');
        $(this).addClass('active');
      });
    
      // Handle sub-category clicks
      $('.sub_cat').click(function () {
        var target_v2 = $(this).data('subcat'); 
        console.log(target_v2)
        $('#' + target_v2).siblings().removeClass('active'); 
        $(this).siblings().removeClass('active');
    
        $('#' + target_v2).addClass('active');
        $(this).addClass('active');
      });
    
    });
    
    
</script>