{% extends 'base.html.twig' %}
{# {% block title %}{{ result.title }}{% endblock %} #}
{% block metas %}
	{# <meta name="description" content="{{ result.short_description }}" /> #}
	<meta data-meta-description name="description" content=""/>
	<meta data-meta-keywords name="keywords" content=""/>
	<meta data-meta-ogtitle property="og:title" content=""/>
	<meta property="og:type" content="article"/>
	<meta
	data-meta-ogdescription property="og:description" content=""/>
	{# <meta property="og:image:secure_url" content="{% for media in result.files %}{{ app.root }}web/assets/img/uploads/{{ media.name }}{% endfor %}" /> #}
	<meta property="og:image:type" content="image/jpg"/>
	<meta property="og:image:width" content="675"/>
	<meta
	property="og:image:height" content="300"/>
{# <meta property="og:url" content="{{ app.root }}" />
    {{app.robots|raw}} #}
{% endblock %}
{% block css %}
	{{encore_entry_link_tags('blogMainCSS')}}
	{{encore_entry_link_tags('blogResponsiveCSS')}}
	<style>
		.jumbotron.blog {
			height: calc(100vh - 133px) !important;
			/* margin-top: 133px !important;*/
			padding: 0 !important;
			position: relative;
			margin-bottom: 2rem;
		}
		#banner_blog {
			position: absolute;
			width: 100%;
			max-width: 100% !important;
			height: 100%;
			object-fit: cover;
		}
		#layer_banner {
			width: 100%;
			height: 100%;
			position: relative;
			background-color: rgba(0, 0, 0, 0.4);
		}
		.jumbotron-text {
			width: 80%;
		}
		@media(max-width: 991px) {
			.jumbotron.blog {
				height: calc(100vh - 113px);
			}
		}
		@media(max-width: 576px) {
			.jumbotron-text {
				top: -120px;
				width: 95%;
				padding-top: 50px;
			}
			.jumbotron-text > h1 {
				font-size: 35px;
			}
		}
		.recent-post:hover {
			color: #2a6496
		}
	</style>
{% endblock %}
{% block body %}
	<div id="blog-post" data-post-id={{ post_id }} data-post-slug="{{ url('blog') }}" data-post-name={{slug}}>
		<div v-if="loading" class="loader-container">
			<div class="col-12 d-flex justify-content-center align-items-center blog-loader-container block">
				<img src="{{asset('/img/load75x75.gif')}}" alt="loading..." width="65">
			</div>
		</div>
		<div v-else>
			<section v-if="name">
				<div class="jumbotron blog">
					<picture>
						<source type="image/webp" :srcset="getWebpSource(post.name_img)">
						<source type="image/jpeg" :srcset="'/img/blogs/' + [[post.name_img]]">
						<img id="banner_blog" :alt="[[post.alt_img]]" :src="'/img/blogs/' + [[post.name_img]]">
					</picture>
					<div class="d-flex justify-content-center align-items-center" id="layer_banner">
						<div class="jumbotron-text text-center">
							<h1>
								[[post.title]]</h1>
							<span>Published Date: [[ post.public_date | formatDate('MMMM dd, yyyy') ]]</span>
						</div>
					</div>
				</div>
			</section>
			<section>
				<div class="container">
					<div class="row" v-if="name">
						<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 article-description">
							<h2 class="border-bottom text-center">[[post.title]]</h2>
							<div class="card-text" v-html="post.description"></div>
							{# <h4>Comments</h4>
							<div class="line"></div>
							<div id="disqus_thread"></div>
							<noscript>Please enable JavaScript to view the<a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> #}
						</div>
						<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
							<h4>Recent Posts</h4>
							<ul class="recent-post" v-for="(post, index) in recentPosts" :key="index">
								<li>
									<a :href="generatePostUrl(post.slug, post.id_blog, 'blog-post')">
										<strong>[[post.title|capitalize]]</strong>
									</a>
								</li>
							</ul>
							<h4>Tags</h4>
							<p class="p-1 m-0">
								<a v-for="tag in tags_post" :key="tag" :href="generatePostUrl(tag.tag, tag.id_tag, 'blog-tag')">
									<label class="label label-success" style="cursor:pointer;">[[formatTag(tag.tag)]]</label>
								</a>
							</p>
							<h4>Products</h4>
							<div v-for="prod in optionsProducts" :key="prod">
								<div class="Container-logo-two-lines">
									<img :src="[[prod.image]]" style="width: 100%;" alt="Mexican Travel Insurance"/>
								</div>
								<a :href="[[prod.link]]" style="color:#fff;">
									<div style="background:#f36e03;padding:15px 5px;font-size:16px;margin-bottom:10px;" class="text-center">
										<b>[[prod.title]]</b>
									</div>
								</a>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
	</div>
{% endblock %}
{% block scripts %}
	{% if app.environment != 'dev' %}
		<script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
	{% else %}
		<script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
	{% endif %}
	<script type="text/javascript">
		const elementRoot = '#blog-post'
const appenv = '{{ app.environment }}';
	</script>
	{{ encore_entry_script_tags('blogJS') }}

{% endblock %}