description = "Post Style 2"

[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 shadow mb-12 {% if post.featured_images.count == 0 %}{% elseif this.theme.blog_post_pageheader != 'post' %}overflow-hidden{% endif %}">
        {% 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="card-img-top"/>
            </a>
        </div>
        {% endif %}
        {% endif %}
        <div class="pos-t-4 pos-r-4 position-absolute display-13 text-white p-2 rounded bg-default text-center d-inline-block">
            {{ post.published_at|date('M') }}
            <span class="d-block display-9">{{ post.published_at|date('d') }}</span>
        </div>
        <div class="p-7 {{ this.theme.blog_post_align }} position-relative">
            {% if post.user.avatar %}
            <img class="rounded-circle position-absolute pos-l-11 pos-t-6n" src="{{ post.user.avatar.getThumb(48, 48, 'crop') }}" alt="{{ post.user.avatar.file_name }}">
            {% endif %}
            {% for category in post.categories %}
            <div class="text-uppercase display-14 font-weight-medium mt-4">{% 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 %}</div>
            {% endfor %}
            <h2 class="mt-2 font-weight-light"><a href="{{ post.url }}" class="text-link">{{ post.title }}</a></h2>
            <p class="my-7">{{ post.content_html|raw }}</p>
            <div class="d-flex align-items-center">
                <a class="ml-auto text-body hover-text-default" href="{{ post.user.url}}">{{ post.user.first_name}}</a>
            </div>
        </div>
    </div>
</div>

{% if this.theme.blog_post_gallery and (post.featured_images.count > 1) %}
<div class="col-md-12" {% if this.theme.blog_post_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
    <div class="mb-12 card border-0 shadow p-7">
        <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>
</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 %}>
    <div class="mb-12 card border-0 shadow p-7">
        <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>
</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 %}