{{ header }}
<div class="container">
    <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
            <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
        <li>{{ heading_title }}</li>
    </ul>
</div>
<div class="container">
    <div class="main">
        <div class="row">
            {% if layout == "left" %}
                <div class="col-md-3 col-xs-12">
                    {% if related_posts %}
                        <div class="blog-widget-section blog-widget">
                            <div class="title">
                                <h3>{{ text_related_post }}</h3>
                            </div>
                            {% for post in related_posts %}
                                <div class="widget-content">
									<a href="{{ post.href }}"><img src="{{ post.image }}" alt="{{ post.name }}" /></a>
									<div class="latest-post-content">
										<h5 class="latest-post-name"><a href="{{ post.href }}">{{ post.name }}</a></h5>
										<div class="post-date">
                                            {{ post.date_added }}{% if post.author %}{{ " | " ~ post.author }}{% endif %}
                                        </div>
									</div>
								</div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            {% endif %}
            {% if layout == "left" or layout == "right" %}
                {% set class = 'col-md-9 col-sm-12 col-xs-12' %}
            {% else %}
                {% set class = 'col-xs-12' %}
            {% endif %}
            <div id="content" class="{{ class }}">{{ content_top }}
                <div class="post-container">
                    <div class="post-title">
                        <h1>{{ heading_title }}</h1>
                    </div>
                    <span class="post-date">{{ date }}{% if author %}{{ ' | ' ~ author }}{% endif %}</span>
                    <div class="post-description">
                        <img src="{{ image }}" alt="heading_title" />
                        <p>{{ description }}</p>
                    </div>
                </div>
                {% if related_posts and layout == "full" %}
					<div class="blog-widget-section blog-widget blog-widget-slider">
						<div class="block-title">
							<h3>{{ text_related_post }}</h3>
							{% if text_related_module %}
								<p>{{ text_related_module }}</p>
							{% endif %}
						</div>
						<div class="swiper-viewport">
							<div class="swiper-container posts-container">
								<div class="swiper-wrapper">
									{% for post in related_posts %}
										<div class="post-layout swiper-slide">
											<div class="post-grid">
												<div class="post-item">
													<div class="post-image">
														<a href="{{ post.href }}"><img src="{{ post.image_full }}" alt="{{ post.name_full }}" /></a>
													</div>
													<div class="post-cation">
														<h4 class="post-name"><a href="{{ post.href }}">{{ post.name_full }}</a></h4>
														<div class="post-date">
															{{ post.date_added }}{% if post.author %}{{ " | " ~ post.author }}{% endif %}
														</div>
														<div class="post-intro">{{ post.intro_text }}</div>
													</div>
												</div>
											</div>
										</div>
									{% endfor %}
								</div>
							</div>
							{% if slide.pagination %}
								<div class="swiper-pagination post-pagination"></div>
							{% endif %}

							{% if slide.navigation %}
								<div class="swiper-pager">
									<div class="swiper-button-next"></div>
									<div class="swiper-button-prev"></div>
								</div>
							{% endif %}
						</div>
						<script type="text/javascript">
							$(".posts-container").swiper({
								spaceBetween: 0,
								nextButton: '.swiper-button-next',
								prevButton: '.swiper-button-prev',
								speed: 600,
								slidesPerView: 3,
								slidesPerColumn: 1,
								autoplay: false,
								loop: false,
								// Responsive breakpoints
								breakpoints: {
									479: {
									  slidesPerView: 2
									},
									767: {
									  slidesPerView: 2
									},
									991: {
									  slidesPerView: 3
									  
									},
									1199: {
									  slidesPerView: 3
									  
									}
								}
							});
						</script>
					</div>
                {% endif %}
            </div>
            {% if layout == "right" %}
                <div class="col-md-3 col-xs-12">
                    {% if related_posts %}
                        <div class="blog-widget-section blog-widget">
                            <div class="title">
                                <h3>{{ text_related_post }}</h3>
                            </div>
                            {% for post in related_posts %}
                                <div class="widget-content">
									<a href="{{ post.href }}"><img src="{{ post.image }}" alt="{{ post.name }}" /></a>
									<div class="latest-post-content">
										<h5 class="latest-post-name"><a href="{{ post.href }}">{{ post.name }}</a></h5>
										<div class="post-date">
                                            {{ post.date_added }}{% if post.author %}{{ " | " ~ post.author }}{% endif %}
                                        </div>
									</div>
								</div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </div>
</div>
{{ footer }}