{% extends 'base.html.twig' %}
{% block title %}
{{slug}} | Novamar Insurance
{% endblock %}

{% block metas %}
	<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="{{ app.request.getSchemeAndHttpHost }}/img/uploads/{{ post.uniqueCode }}/header.jpg" /> #}

	<meta property="og:image:type" content="image/jpg"/>
	<meta property="og:image:width" content="100%"/>
	<meta property="og:image:height" content="100%"/>
	<meta property="og:url" content="{{ app.request.uri }}"/>
{% endblock %}
{% block css %}
	{{encore_entry_link_tags('blogPostCSS')}}
	{{encore_entry_link_tags('blogPostAsideCSS')}} 
	<style>
		.post-header_top {
			align-items: flex-start !important;
		}
		.post-title_top {
			margin-top: 40px !important;
		}
	</style>
{% endblock %}
{% block body %}
	<div id="post-view" data-post-id={{ post_id }} data-post-name={{slug}} data-post-slug="{{ url('blog_home')}}" >
		<div v-if="name" :class="['container-fluid post-header img-filter text-center', {'post-header_top' : blogOnTopTittle}]" :style=" { backgroundImage: `url(${generateImgUrl(post.unique_code)})` }">
			<div :class="['post-title', {'post-title_top': blogOnTopTittle}]">
				<h1>[[ post.title ]]</h1>
				<span>Published Date: [[ post.public_date | formatDate('MMMM dd, yyyy') ]]</span>
			</div>
		</div>
		<div class="container" v-if="name">
			<div class="row">
				<div class="col-xl-10 col-lg-10 col-md-12 col-sm-12 col-xs-12 mt-3">
					<div class="row">
						<div v-html="post.description"></div>
						<div class="col-md-12 block-item">
							<div class="post-writed-by">
								<strong>Written by</strong>
								<span>
									[[ post.author_name ]] [[post.author_id !== "Novamar Insurance" ? "of Novamar" : ""]]
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-2 col-lg-2 col-md-12 col-sm-12 col-xs-12 mt-2">
					<aside>
						<div class="post-icon post-icon-facebook">
							<a href="http://www.facebook.com/sharer.php?u={{app.request.uri}}" target="_blank">
								<i class="fa fa-facebook"></i>
								Share
								<span>Novamar</span>
							</a>
						</div>
						<div class="post-icon post-icon-twitter">
							<a class="twitter-share-button" :href="url.twitter" target="_blank">
								<i class="fa fa-twitter"></i>
								Tweet
								<span>Novamar</span>
							</a>
						</div>
						{% include 'blog/aside-newest-posts-list.html.twig' %}	
						{% include 'blog/aside-tags-list.html.twig' %}
					</aside>
				</div>
			</div>
		</div>
	</div>
	
{% endblock %}
{% block javascript %}
	{% 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.js"></script>
	{% endif %}
	<script>
		const elementRoot = '#post-view'
	</script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" defer></script>
	{{ encore_entry_script_tags('blogJS') }}
	 <script>
        const urlbase = '{{ app.request.getSchemeAndHttpHost }}';
</script>
{% endblock %}