description = "Blog 3 Section"

[viewBag]

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

[topPosts]
period = 5
category = 0
postPerPage = 5
postPage = "blog/blog-post"
slug = "{{ :slug }}"
==
<div {% if data.section_blog3_id %}id="{{ data.section_blog3_id }}"{% endif %} class="blog3 py-24 {{ data.section_blog3_bg }}">
    <div class="{{ data.section_blog3_container }}">
        <!-- Row  -->
        {% if data.section_blog3_header or data.section_blog3_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_blog3_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_blog3_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row">
            {% set aos = ['flip-left', 'flip-up', 'flip-right', 'flip-down', 'flip-left'] %}
            {% if data.section_blog3_type == 'latest' %}{% set posts = latestPosts.posts %}{% else %}{% set posts = topPosts.mostVisitedPosts %}{% endif %}
            {% for post in posts %}
            {% if data.section_blog3_position == 'left' %}
            {% if loop.index0 == 1 %}<div class="col-lg-6"><div class="row">{% endif %}
            {% elseif data.section_blog3_position == 'center' %}
            {% if loop.index0 == 0 or loop.index0 == 3  %}<div class="col-lg-3"><div class="row">{% endif %}
            {% elseif data.section_blog3_position == 'right' %}
            {% if loop.index0 == 0 %}<div class="col-lg-6"><div class="row">{% endif %}
            {% endif %}
            <!-- Column -->
            <div class="{% if data.section_blog3_position == 'center' and loop.index0 != 2 %}col-lg-12{% else %}col-lg-6{% endif %}">
                <div class="card border-0 mb-7 bg-transparent" {% if data.section_blog3_animation %}data-aos="{{ aos[ loop.index0 % 3 ] }}" data-aos-duration="1200"{% endif %}>
                    {% if post.featuredvideo.hasVideo %}
                    <div class="embed-responsive embed-responsive-4by3">{{ post.featuredvideo.iframe_content|raw }}</div>
                    {% elseif post.featured_images.count == 1 or (data.section_blog3_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(550, 360, 'crop') }}" alt="{{ image.title }}" class="img-fluid w-100"/>
                        </a>
                    </div>
                    {% elseif data.section_blog3_carousel and post.featured_images.count > 1 %}
                    <div id="blog3Carousel-{{ data.section_blog3_id }}{{ post.title|slug }}" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            {% for image in post.featured_images %}
                            <li data-target="#blog3Carousel-{{ data.section_blog3_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(550, 360, 'crop') }}" class="d-block w-100" alt="{{ image.title }}"></a>
                            </div>
                            {% endfor %}
                        </div>
                        <a class="carousel-control-prev" href="#blog3Carousel-{{ data.section_blog3_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="#blog3Carousel-{{ data.section_blog3_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 %}
                    <div class="{{ data.section_blog3_align }}">
                        <div class="d-flex display-13 py-2">
                            {% if data.section_blog3_type == 'latest' and data.section_blog3_category %}
                            {% for category in post.categories %}
                            <a class="text-body hover-text-default" href="{{ category.url }}">{{ category.name }}{% if not loop.last %}, {% endif %}</a>
                            {% endfor %}
                            {% endif %}
                            {% if data.section_blog3_date %}
                            <span class="ml-auto">{{ post.published_at|date('M d, Y') }}</span>
                            {% endif %}
                        </div>    
                        <h5 class="font-weight-medium mt-2"><a href="{{ post.url }}" class="text-link">{{ post.title }}</a></h5>
                        {% if data.section_blog3_desc %}
                        <p class="mt-4 mb-0">
                        {% if (data.section_blog3_position == 'left' and loop.index0 == 0) or (data.section_blog3_position == 'center' and loop.index0 == 2) or (data.section_blog3_position == 'right' and loop.index0 == 4) %}
                        {{ html_limit(post.content_html, 400)|raw }}
                        {% else %}
                        {{ html_limit(post.summary, 48)|raw ~ '…' }}
                        {% endif %}
                        </p>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- Column -->
            {% if data.section_blog3_position == 'left' %}
            {% if loop.last %}</div></div>{% endif %}
            {% elseif data.section_blog3_position == 'center' %}
            {% if loop.index0 == 1 or loop.last %}</div></div>{% endif %}
            {% elseif data.section_blog3_position == 'right' %}
            {% if loop.index0 == 3 %}</div></div>{% endif %}
            {% endif %}
            
            {% else %}
            <div class="col-md-6">{{ noPostsMessage }}</div>
            {% endfor %}
        </div>
    </div>
</div>