description = "Blog 2 Section"

[viewBag]

[blogPosts latestPosts]
pageNumber = "{{ :page }}"
postsPerPage = 12
noPostsMessage = "No posts found"
sortOrder = "published_at desc"
categoryPage = "blog/blog-category"
postPage = "blog/blog-post"

[topPosts]
period = 5
category = 0
postPerPage = 12
postPage = "blog/blog-post"
slug = "{{ :slug }}"
==
<div {% if data.section_blog2_id %}id="{{ data.section_blog2_id }}"{% endif %} class="blog2 py-24 {{ data.section_blog2_bg }}">
    <div class="{{ data.section_blog2_container }}">
        <!-- Row  -->
        {% if data.section_blog2_header or data.section_blog2_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_blog2_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_blog2_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row">
            {% set aos = ['fade-right', 'fade-down', 'fade-left'] %}
            {% if data.section_blog2_type == 'latest' %}{% set posts = latestPosts.posts %}{% else %}{% set posts = topPosts.mostVisitedPosts %}{% endif %}
            {% for post in posts|slice(0, (data.section_blog2_number)) %}
            <!-- Column -->
            <div class="{{data.section_blog2_column }}" {% if data.section_blog2_animation %}data-aos="{{ aos[ loop.index0 % 3 ] }}" data-aos-duration="1200"{% endif %}>
                <div class="card border-0 mb-7 bg-transparent">
                    {% if post.featuredvideo.hasVideo %}
                    <div class="embed-responsive embed-responsive-16by9">{{ post.featuredvideo.iframe_content|raw }}</div>
                    {% elseif post.featured_images.count == 1 or (data.section_blog2_carousel == '0' and post.featured_images.count > 1) %}
                    <div class="card-img-top img-hover">
                        <a href="{{ post.url }}">
                            <img src="{{ post.featured_images.first.getThumb(380, 250, 'crop') }}" alt="{{ image.title }}" class="img-fluid w-100"/>
                        </a>
                    </div>
                    {% elseif data.section_blog2_carousel and post.featured_images.count > 1 %}
                    <div id="blog2Carousel-{{ data.section_blog2_id }}{{ post.title|slug }}" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            {% for image in post.featured_images %}
                            <li data-target="#blog2Carousel-{{ data.section_blog2_id }}{{ post.title|slug }}" data-slide-to="{{ loop.index0 }}" {% if loop.index0 == 0 %}class="active"{% endif %}>
                            </li>
                            {% endfor %}
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            {% for image in post.featured_images %}
                            <div class="carousel-item card-img-top img-hover {{ loop.first ? 'active' }}">
                                <a href="{{ post.url }}"><img src="{{ image.getThumb(380, 250, 'crop') }}" class="d-block w-100" alt="{{ image.title }}"></a>
                            </div>
                            {% endfor %}
                        </div>
                        <a class="carousel-control-prev" href="#blog2Carousel-{{ data.section_blog2_id }}{{ post.title|slug }}" role="button" data-slide="prev">
                            <span class="fa fa-angle-left icon-prev" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#blog2Carousel-{{ data.section_blog2_id }}{{ post.title|slug }}" role="button" data-slide="next">
                            <span class="fa fa-angle-right icon-next" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    {% elseif post.featuredvideo.hasVideo %}
                    <div class="video-wrapper">{{ post.featuredvideo.iframe_content|raw }}</div>
                    {% endif %}
                    {% if data.section_blog2_date %}
                    <div class="pos-t-2 pos-r-2 position-absolute display-13 text-dark p-2 rounded bg-white text-center d-inline-block">
                        {{ post.published_at|date('M') }}
                        <span class="d-block display-9">{{ post.published_at|date('d') }}</span>
                    </div>
                    {% endif %}
                    {% if data.section_blog2_type == 'latest' and data.section_blog2_category %}
                    {% for category in post.categories %}
                    <a class="text-uppercase pos-t-2 pos-l-2 badge position-absolute font-weight-medium display-14 text-white rounded text-center d-inline-block" href="{{ category.url }}">
                        {{ category.name }}{% if not loop.last %}, {% endif %}
                    </a>
                    {% endfor %}
                    {% endif %}
                    <div class="{{ data.section_blog2_align }}">
                        <h4 class="font-weight-medium mt-7"><a href="{{ post.url }}" class="text-link">{{ post.title }}</a></h4>
                        {% if data.section_blog2_desc %}
                        <p class="mt-5">{{ html_limit(post.summary, 120)|raw }}</p>
                        {% endif %}
                        {% if data.section_blog2_more %}
                        <a href="{{ post.url }}" class="text-link">Read More <i class="fa fa-chevron-right ml-3 display-13"></i></a>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- Column -->
            {% else %}
            <div class="{{data.section_blog2_column }}">{{ noPostsMessage }}</div>
            {% endfor %}
        </div>
    </div>
</div>