{% extends "blog/blog_item.html" %}
{% load wagtailcore_tags %}
{% load wagtailimages_tags %}
{% load ocyan_main %}
{% load ocyan_thumbnail %}
{% load static %}
{% load i18n %}

{% block title %}{{self.get_meta_title}}{% if page.get_site.site_name %} - {{ page.get_site.site_name }}{% endif %}{% endblock title %}
{% block body_class %}{{ block.super }} blogitem{% endblock %}

{% block content %}
<section class="mb-5 py-5 container">
	<div class="row blog-outer">
		<div class="col-lg-7 me-auto blog-border">
			{% block body %}
			<div class="mb-5">
	        	<h1 class="blog-header">{{ page.title }}</h1>	        	
	        	<span class="blog-date"><i class="fa fa-clock me-2"></i>{{ page.post_date }}</span>
			</div>

			<div class="mb-5">
				{% responsive_image self.lead_image.file alt=blog.lead_image.title classes="img-fluid blog-header-image" %}
			</div>

			<section class="blog-section">
				{% include_block page.body %}
			</section>
			{% endblock %}
		</div>
		<div class="col-lg-4 ps-lg-5">
			{% block sidebar %}
				{% if recent_blogs %}
				<h2 class="mb-3 mt-lg-0 mt-5">Recente blogs</h2>
				<div class="row">
				{% for recent_blog in recent_blogs %}
				<div class="col-lg-12 mb-3">
					<a href="{{ recent_blog.url }}" class="mb-3 d-block text-dark blog-border side_blog">
						<div class="image-wrapper">
							{% picture recent_blog.specific.lead_image.file "600x600" classes="img-fluid mb-4" alt=blog.lead_image.title %}
						</div>
						<b class="my-3 d-block">{{recent_blog.title}}</b>
					</a>
				</div>
				{% endfor %}
				</div>
				<a class="btn btn-dark w-100" href="{{ page.get_parent.url }}">{% trans "All blog articles" %}<i class="fa fa-arrow-circle-right ms-3"></i></a>
				{% endif %}
			{% endblock %}
		</div>
	</div>
</section>
{% endblock %}