description = "Post Style 1"

[viewBag]
==
<?php
function onStart()
{
    $this->addCss('assets/vendor/owl-carousel/css/owl.carousel.min.css');
    $this->addCss('assets/vendor/swipebox/css/swipebox.min.css');
    $this->addCss('assets/vendor/owl-carousel/css/owl.theme.default.min.css');
    $this->addJs('assets/vendor/owl-carousel/js/owl.carousel.min.js');
    $this->addJs('assets/vendor/swipebox/js/jquery.swipebox.min.js');
}
?>
==
{% set post = blogPost.post %}
<div class="col-md-12" {% if this.theme.blog_post_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
    <div class="card border-0 mb-12 bg-transparent">
        {% if this.theme.blog_post_pageheader == 'default' or this.theme.blog_post_pageheader == 'both' %}
        {% if post.featuredvideo.hasVideo %}
        <div class="embed-responsive embed-responsive-16by9">{{ post.featuredvideo.iframe_content|raw }}</div>
        {% elseif post.featured_images.count > 1 and this.theme.blog_post_image == 'gallery' %}
        <div id="postCarousel{{ post.title|slug }}" class="carousel slide img-hover" data-ride="carousel">
            <ol class="carousel-indicators">
                {% for image in post.featured_images %}
                <li data-target="#postCarousel{{ 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 {% if loop.first %}active{% endif %}">
                    <a href="{{ post.url }}"><img src="{{ image.getThumb(1000, (this.theme.blog_post_height), 'crop') }}" class="d-block w-100" alt="{{ post.title }}"></a>
                </div>
                {% endfor %}
            </div>
            <a class="carousel-control-prev" href="#postCarousel{{ 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="#postCarousel{{ 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.featured_images.count == 1 or (post.featured_images.count > 1 and this.theme.blog_post_image == 'image') %}
        <div class="img-hover">
            <a href="{{ post.url }}">
                <img src="{{ post.featured_images.first.getThumb(1000, (this.theme.blog_post_height), 'crop') }}" alt="{{ image.description }}" class="img-fluid w-100"/>
            </a>
        </div>
        {% endif %}
        {% endif %}
        <div class="{{ this.theme.blog_post_align }}">
            <ul class="list-inline text-uppercase mt-10 display-13 font-weight-medium">
                {% if post.user.avatar or post.user.first_name %}
                <li class="list-inline-item pr-2">
                    {% if post.user.avatar %}
                    <img class="rounded-circle mr-1" src="{{ post.user.avatar.getThumb(40, 40, 'crop') }}" alt="{{ post.user.avatar.file_name }}">
                    {% endif %}
                    <a class="text-body hover-text-default" href="{{ post.user.url}}">{{ post.user.first_name}}</a>
    			</li>
    			{% endif %}
                <li class="list-inline-item pr-2"><span><i class="fa fa-calendar display-13 text-body mr-1"></i> {{ post.published_at|date('M d, Y') }} </span></li>
                {% for category in post.categories %}
                <li class="list-inline-item">{% if loop.first %}<i class="fa fa-folder display-13 text-body mr-1"></i>{% endif %} <a href="{{ category.url }}" class="text-body hover-text-default">{{ category.name }}</a>{% if not loop.last %}, {% endif %}</li>
                {% endfor %}
                {% if this.theme.blog_post_disqus %}
                <li class="list-inline-item"><i class="fa fa-comments display-13 text-body" aria-hidden="true"></i> <a href="{{ post.url }}#disqus_thread"></a></li>
                {% endif %}
            </ul>
            <h2 class="pt-5 font-weight-light"><a href="{{ post.url }}" class="text-link">{{ post.title }}</a></h2>
            <p class="my-7">{{ post.content_html|raw }}</p>
        </div>
    </div>
</div>

{% if this.theme.blog_post_gallery and (post.featured_images.count > 1) %}
<div class="col-md-12 mb-12" {% if this.theme.blog_post_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
    <h4 class="mb-7 {{ this.theme.blog_post_align }}">Post Gallery</h4>
    <div class="owl-carousel owl-theme post-carousel">
        {% for image in post.featured_images %}
        <div class="item img-hover overflow-hidden rounded">
            <a href="{{ image.getThumb(false, false, 'auto') }}" class="swipebox" caption="<b class='text-white display-11'>{{ image.title }}</b><br><em class='text-light'>{{ image.description }}</em>">
                <img src="{{ image.getThumb(300, 300, 'crop') }}" class="img-fluid rounded" alt="{{ image.title }}" />
            </a>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

{% if this.theme.blog_post_disqus %}
<div class="col-md-12" {% if this.theme.blog_post_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
    <h4 class="mb-7 {{ this.theme.blog_post_align }}">Comments</h4>
    <div id="disqus_thread"></div>
    <script>
        (function() { // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        s.src = 'http://{{ this.theme.blog_post_disqus_url }}/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
{% endif %}

{% if this.theme.blog_post_navigation %}
{% partial "blog/pagenav" %}
{% endif %}

{% if this.theme.blog_post_gallery and (post.featured_images.count > 0) %}
{% put scripts %}
<script>
//Carousel
$('.post-carousel').owlCarousel({
	loop: true,
	margin: 15,
	center: true,
	nav: false,
	dots: false,
	autoplay: true,
	lazyLoad: true,
	responsiveClass: true,
	responsive: {
		0: {
			items: 2,
			nav: false
		},
		768: {
			items: 3
		},
		1170: {
			items: 4
		},
		1800: {
			items: 4
		}
	}
});

;( function( $ ) {
    $( '.swipebox' ).swipebox( {
		hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices
		removeBarsOnMobile : true, // false will show top bar on mobile devices
		hideBarsDelay : 5000, // delay before hiding bars on desktop
		videoMaxWidth : 1600 // videos max width
    } );
} )( jQuery );
</script>
{% endput %}
{% endif %}