{use_javascript src="/plugins/slider-pro/js/jquery.sliderPro.min.js"}
{use_stylesheet src="/plugins/slider-pro/css/slider-pro.min.css"}
    
    <ol class="breadcrumb hidden-xs" itemscope itemtype="https://schema.org/BreadcrumbList">
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="{url_for internal=$homepage_url absolute=true}"><span itemprop="name">{__ text="Start" langCatalogue="stNavigationFrontend"}</span></a>
            <meta itemprop="position" content="1" />
        </li>

        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
           <a itemprop="item" href="{$blog_index_url}"><span itemprop="name">{__ text="Blog" langCatalogue="stBlogFrontend"}</span></a>
           <meta itemprop="position" content="2" />
        </li>

        {if $blog_category_name}
            <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                <a itemprop="item" href="{$blog_category_url}"><span itemprop="name">{$blog_category_name}</span></a>   
            <meta itemprop="position" content="3" />
            </li>
        {/if} 
        
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item"><span itemprop="name">{$name}</span></a>
            {if $blog_category}
            <meta itemprop="position" content="4" />
            {else}
            <meta itemprop="position" content="3" />
            {/if} 
        </li>
    </ol>
    
    
    <div id="blog-show">
    
    <div class="row">
        <div {if $post_show_sidebar == 1 } class="col-sm-8" {/if}>
        
            <div class="title">
                <h1>{$name}</h1>
                {if $date != 0 && $show_date == 1}
                <div class="data text-muted">{$post_date}</div>
                {else}
                <div class="data text-muted">&nbsp</div>
                {/if}
            </div>   
            
            {if $head_description }
            
                <div class="tinymce_html clearfix">
                    {$head_description}
                </div>
            
            {/if}
            
                 
                
            {if $show_gallery == 1 && isset($gallery) }                            
            
                {if $gallery|@count == 1}
                    {foreach key=row item=image from=$gallery}
                        <img id="blog-main-image" class="img-responsive" src="{$image}" />
                    {/foreach}    
                {else}                                    
                    <div class="slider-pro" id="my-slider">
                        <div class="sp-slides">
                            {foreach key=row item=image from=$gallery}
                                <div class="sp-slide">                            
                                    <img class="sp-image" src="{$image}" />
                                    {if $show_gallery_thumb == 1 }
                                        <img class="sp-thumbnail" src="{$image}"/>
                                    {/if}    
                                </div>
                            {/foreach}    
                        </div>
                    </div>
                {/if}
                
            {/if} 
            
            <div class="tinymce_html clearfix">
                {$long_description}
            </div>
            
            {if $cta_url!=""}
            <div id="blog-cta">
            
                <div class="tinymce_html clearfix">
                    {$cta_head}
                </div>                        
            
                <div style="text-align: {$cta_position}">
                    <a id="cta-btn" class="btn btn-primary" target="{$cta_target}" href="{$cta_url}" >{$cta_name}</a>
                </div>
                
                <div class="tinymce_html clearfix">
                    {$cta_foot}
                </div>
                
            </div>
            {/if}
            
            {slot name="blog-footer" hidden="true"}{/slot}
            
        </div>
        {if $post_show_sidebar == 1 }
        <div class="sidebar {if $post_show_sidebar == 1 }col-sm-4{/if}">
            
            {if $products}
            <div class="sidebar-widget">
                <div class="title">
                    <h3>{$product_r_name}</h3>
                </div>

                <ul>
                    {foreach key=row item=product from=$products}
                    <li>{$product.link}</li>
                    {/foreach}
                </ul>
            </div>
            {/if}
            
            {if $recommends}
            <div class="sidebar-widget">
                <div class="title">
                    <h3>{$post_r_name}</h3>
                </div>

                <ul>
                    {foreach key=row item=recommend from=$recommends}
                    <li>{$recommend.link}</li>
                    {/foreach}
                </ul>
            </div>
            {/if}
            
            {if $categorys}
            <div class="sidebar-widget">
                <div class="title">
                    <h3>{__ text="Kategorie" langCatalogue="stBlogFrontend"}</h3>
                </div>
                <ul>
                    {foreach key=row item=category from=$categorys}
                    <li>{$category.link}</li>
                    {/foreach}
                </ul>
            </div>
            {/if}
            
            {if $post_from_category }
            <div class="sidebar-widget">
                <div class="title">
                
                    {if $blog_category_name}
                    <h3>
                        <a href="{$blog_category_url}">{$blog_category_name}</a></h3>
                    
                    {else}
                    <h3><a href="/blog">{__ text="Blog" langCatalogue="stBlogFrontend"}</a></h3>
                    {/if}                    
                    
                </div>                
                <ul>
                    {foreach key=row item=post from=$post_from_category}                
                     <li>{$post.link}</li>
                    {/foreach}
                </ul>
            </div>
            {/if}
            
            
        </div>
        {/if}
    </div>
    
 {if $products}

<h3>{$product_r_name}</h3>

{if $display_type=="masonary"}
<div class="row masonry-container {if $products_r_post_grid == 12}blog-one-column{/if}">
{else}
<div class="row {if $products_r_post_grid == 12}blog-one-column{/if}" data-equalizer>
    {/if}

    {foreach key=row item=product from=$products}
    <div class="product col-xs-12  col-sm-{$products_r_post_grid} col-md-{$products_r_post_grid} item">

        <div class="thumbnail" {if $display_type!="masonary"} data-equalizer-watch {/if}>
            <div class="row">


                <div class="col-xs-12 top">
                    <div class="image">
                        {$product.image}
                    </div>
                </div>

                <div class="col-xs-12 top">
                    <div class="caption">
                        {if $show_title == 1}
                        <h3 class="name">{$product.link}</h3>
                        {/if}
                        
                        <div class="description tinymce_html">{$product.description}</div>
                        
                        
                    </div>
                </div>

            </div>
        </div>
    </div>
    {/foreach}
</div>

{/if}
    
    {if $recommends}
    
     <h3>{$post_r_name}</h3>
    
    {if $r_display_type=="masonary"}
    <div class="row masonry-container {if $r_post_grid == 12}blog-one-column{/if}">
    {else}
    <div class="row {if $r_post_grid == 12}blog-one-column{/if}" data-equalizer>
    {/if}

        {foreach key=row item=blog from=$recommends}
        <div class="product col-xs-12  col-sm-{$r_post_grid} col-md-{$r_post_grid} item">

            <div class="thumbnail" {if $display_type!="masonary"} data-equalizer-watch {/if}>
                <div class="row">

                    {if $r_show_image == 1 && $blog.image_name!=""}

                    {if $r_show_image_position == "side" }
                    <div class="col-xs-12 col-md-4 side">
                        <div class="image">
                            {$blog.image_main_page_rwd}
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-8 side">
                        <div class="caption">
                            {if $r_show_title == 1}
                            <h3 class="name">{$blog.name}</h3>{/if}
                            {if $r_date != 0 && $r_show_date == 1}
                            <div class="data text-muted">{$blog.date}</div>
                            {else}
                            <div class="date-empty"></div>
                            {/if}
                            {if $blog.short_description_char_count!="..."}
                            <div class="description tinymce_html">
                                {$blog.short_description_char_count} {if $show_more == 1}
                                <a class="link-more" href="{$blog.url}">{__ text="Więcej" langCatalogue="stBlogFrontend"}</a>{/if}
                            </div>
                            {/if}
                        </div>
                    </div>
                    {/if}

                    {if $r_show_image_position == "top" }
                    <div class="col-xs-12 top">
                        <div class="image">
                            {$blog.image_main_page_rwd}
                        </div>
                    </div>

                    <div class="col-xs-12 top">
                        <div class="caption">
                            {if $r_show_title == 1}
                            <h3 class="name">{$blog.name}</h3>{/if}
                            {if $r_date != 0 && $r_show_date == 1}
                            <div class="data text-muted">{$blog.date}</div>
                            {else}
                            <div class="date-empty"></div>
                            {/if}
                            {if $blog.short_description_char_count!="..."}
                            <div class="description tinymce_html">
                                {$blog.short_description_char_count} {if $r_show_more == 1}
                                <a class="link-more" href="{$blog.url}">{__ text="Więcej" langCatalogue="stBlogFrontend"}</a>{/if}
                            </div>
                            {/if}
                        </div>
                    </div>
                    {/if}

                    {if $r_show_image_position == "float" }
                    <div class="col-xs-12 float">
                        <div class="caption">
                            {if $r_show_title == 1}
                            <h3 class="name">{$blog.name}</h3>{/if}
                            {if $r_date != 0 && $r_show_date == 1}
                            <div class="data text-muted">{$blog.date}</div>
                            {else}
                            <div class="date-empty"></div>
                            {/if}
                            {if $blog.short_description_char_count!="..."}
                            <div class="description tinymce_html">
                                <div class="float-image">{$blog.image_main_page_rwd}</div> {$blog.short_description_char_count} {if $r_show_more == 1}
                                <a class="link-more" href="{$blog.url}">{__ text="Więcej" langCatalogue="stBlogFrontend"}</a>{/if}
                            </div>
                            {/if}
                        </div>
                    </div>
                    {/if}

                    {else}
                    <div class="col-xs-12">
                        <div class="caption">
                            {if $r_show_title == 1}
                            <h3 class="name">{$blog.name}</h3>{/if}
                            {if $r_date != 0 && $r_show_date == 1}
                            <div class="data text-muted">{$blog.date}</div>
                            {else}
                            <div class="date-empty"></div>
                            {/if}
                            {if $blog.short_description_char_count!="..."}
                            <div class="description tinymce_html">
                                {$blog.short_description_char_count} {if $r_show_more == 1}
                                <a class="link-more" href="{$blog.url}">{__ text="Więcej" langCatalogue="stBlogFrontend"}</a>{/if}
                            </div>
                            {/if}
                        </div>
                    </div>
                    {/if}
                </div>
            </div>
        </div>
        {/foreach}
    </div>
    
    {/if}
    
    
</div>

{use_javascript src="imagesloaded.pkgd.min.js"}
{use_javascript src="masonry.pkgd.min.js"}
{literal}
<script type="text/javascript">
    jQuery(function ($) {
        $(document).ready(function() {
            var $container = $('.masonry-container');
            $container.imagesLoaded( function () {
                $container.masonry({
                    columnWidth: '.item',
                    itemSelector: '.item',
                    horizontalOrder: true
                });
            });

            $( '#my-slider' ).sliderPro({
                width: 960,
                height: 500,
                arrows: false,
                buttons: false,
                autoHeight:true,
                autoplay: false                
            });

            var href = "/blog";
            $('.horizontal-categories').trigger('highlight', href);

        });
    });
</script>
{/literal}