{% extends 'base.html.twig' %}
{% block title %}Blog
{% endblock %}
{% block metas %}
	<meta name="description" content="You will be able to find information on a variety of topics that we consider important to the foreign community living in and visiting Mexico."/>
	<meta name="keywords" content="blog, mexican insurance, auto insurance, boat insurance, travel insurance, home insurance"/>
	<meta property="og:title" content="Novamar Blog"/>
	<meta property="og:description" content="You will be able to find information on a variety of topics that we consider important to the foreign community living in and visiting Mexico."/>
	<meta property="og:image" content="http://www.novamarinsurance.com.mx/web/assets/img/cover-photos/portada.jpg"/>
	<meta property="og:image:secure_url" content="{{asset('/img/portada.jpg')}}"/>
	<meta property="og:imgage:type" content="image/jpg"/>
	<meta property="og:image:width" content="851"/>
	<meta property="og:image:height" content="315"/>
{% endblock %}
{% block css %}
	{{encore_entry_link_tags('blogMainCSS')}}
	{{encore_entry_link_tags('blogResponsiveCSS')}}
{% endblock %}
{% block body %}
	<div id="blog" data-post-slug="{{ url('blog') }}">
		<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>
			<div v-if="posts.length === 0">
				<div class="col-12 text-center d-flex justify-content-center align-items-center blog-loader-container block">
					<p style="font-size: 1.5rem">
						An error ocurred while loading Blog content, please try again.<br>
						<b>
						If error persist contact <a href="mailto:support@novamar.net">Novamar Support</a>.
						</b>
					</p>
				</div>
			</div>
			<div v-else>
				<div v-if="posts.length > 0" class="jumbotron blog">
					<div v-for="post in posts" v-if="post.id_blog === count">
						<div class="jumbotron blog">
							<picture>
								<source type="image/webp" :srcset="getWebpSource(post.name_img)">
								<source type="image/jpeg" :srcset="generateImgUrl(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 id="banner_blog_short_desc">[[post.short_description.slice(0,250) ]]...
									</span>
									<div class="container">
										<p>
											<a :href="generatePostUrl(post.slug, post.id_blog, 'blog-post')" class="btn btn-orange my-2">Read more</a>
											<!-- <a href="#" class="btn btn-secondary my-2">Secondary action</a> -->
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<section>
					<div class="container-fluid mt-4" style="background-color:#f7f7f7;">
						<div class="row px-5">
							<div v-for="(post, index) in paginatedPosts.slice(1)" :key="post.id_blog" class="col-md-6 col-lg-4 col-sm-6">
								<a :href="generatePostUrl(post.slug, post.id_blog, 'blog-post')">
									<div class="card mb-3 box-shadow">
										<picture>
											<source type="image/webp" :srcset="getWebpSource(post.name_img)">
											<source type="image/jpeg" :srcset="generateImgUrl(post.name_img)">
											<img loading="lazy" class="card-img-top blog-card-image" :alt="[[post.alt_img]]" :src="generateImgUrl(post.name_img)">
										</picture>
										<div class="card-body">
											<div class="blog-content-title d-flex justify-content-center align-items-center">
												<h4 class="blog-title-cards">[[post.title]]</h4>
											</div>
											<p class="card-text mt-1">
												[[post.short_description.slice(0,180) ]]...
											</p>
										</div>
									</div>
								</a>
							</div>
						</div>
						<!-- Controles de paginación -->
						<div class="d-flex justify-content-center">
							<button @click="prevPage" :disabled="currentPage === 1" class="btn btn-novamar">Previous</button>
							<div class="pagination-buttons">
								<button v-for="page in totalPages" :key="page" @click="goToPage(page)" :class="{'active': page === currentPage}" class=" pagination-btn">
									[[ page ]]
								</button>
							</div>
							<button @click="nextPage" :disabled="currentPage === totalPages" class="btn btn-novamar">Next</button>
						</div>
					</div>
				</section>
			</div>
		</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'
const appenv = '{{ app.environment }}';
	</script>
	{{ script_tag('libraries/sweet-alert.js') }}
	{{ encore_entry_script_tags('blogJS') }}
{% endblock %}