{% extends "base.twig" %}

{% block content %}

	<div class="page-header mb-5 pb-5" style="background-image:url({{site.url}}/wp-content/themes/andaira/public/img/noticias_cabecera.jpg); background-repeat:no-repeat; background-position:center center; background-size:cover;">
		<div class="overlay bg-gradient-1">
		<div class="container pb-5 h-100">
			<div class="d-flex h-100 justify-content-center align-items-end">
				<h1 class="title text-white">Actualidad</h1>
			</div>
		</div>
		</div>
	</div>
	
	<div class="container-fluid mt-5 pb-5 actualidad destacamos">
		<div class="section-heading border-bottom mb-3 pt-5">
			<div class="container">
				<h2 class="title underline">Destacamos</h2>
			</div>
		</div>
		
		{% for post in mainpost %}

			<div class="row">
				{% if post.thumbnail %}
				<div class="col-md-6">
					<a href="{{post.link}}" class="d-block position-relative border-0">
					<div class="bg-overlay-1"></div>
					<img src="{{post.thumbnail|resize(800,400)}}" class="img-fluid" alt="{{post.title}}">
					</a>
				</div>
				{% endif %}
				<div class="{% if post.thumbnail %}col-md-6{% else %}container{% endif %}" style="background-color: #DDE7EC;">
					
					<h3 class="mt-5"><a href="{{post.link}}" class="text-decoration-none">{{ post.title }}</a></h3>
					
					{{post.preview.length(55).end('...')|replace({'Read More':''})}}
					
					<p class="text-uppercase meta"><small>{{post.post_date|date('j F ')}} / {% for term in post.terms %}{% if loop.index == 1 %}{{term.name}}{% endif %}{% endfor %}</small></p>
					
				</div>
			</div>

		{% endfor %}
		
		{#{{ posts_by_type('post',1,'posts_featured_image.twig') }}#}
		
	</div>
	
	<div class="container-fluid mt-5 actualidad">
		<div class="section-heading border-bottom mb-3">
			<div class="container">
				<h2 class="title underline">Más noticias</h2>
			</div>
		</div>
		
		<div class="container mb-5">
				
			{% for post in posts %}
			
				{% set iter = loop.index %}
				{#{% set number = [4,7,10,13,16,19,22,25,28,31] %}#}
				{% set number = [6,11,16,21,26,31,36,41,46,51] %}

				{% if loop.index == 1 %}<div id="iter-1">{% endif %}
				{% for i in number %}{% if i == iter %}
				
					<div class="text-center mt-5 mb-5" onclick="this.hidden=true">
						<a href="#iter-{{i}}" class="btn btn-outline-primary" data-toggle="collapse" role="button" aria-expanded="false">Ver más</a>
					</div>
				
				</div>
				
				<div id="iter-{{i}}" class="collapse">
				{% endif %}{% endfor %}
				
					<div id="loop-{{ loop.index }}" class="row border-bottom pb-3{% if loop.index != 1 %} pt-4{% endif %}">
						{% if post.thumbnail %}
						<div class="col-md-4">
							<a href="{{post.link}}" class="d-block position-relative">
							<div class="bg-overlay-2"></div>
							<img src="{{post.thumbnail|resize(800,500)}}" class="img-fluid" alt="{{post.title}}" />
							</a>
						</div>
						{% endif %}
						<div class="{% if post.thumbnail %}col-md-8{% else %}col-md-12{% endif %}">
							
							<p class="text-uppercase meta"><small>{{post.post_date|date('j F ')}} / {% for term in post.terms %}{% if loop.index == 1 %}{{term.name}}{% endif %}{% endfor %}</small></p>
							
							<h3 class="mt-1 mb-0"><a href="{{post.link}}" class="text-decoration-none">{{ post.title }}</a></h3>
							
							<div>{{post.preview.length(55).end('...')|replace({'Read More':''})}}</div>
							
						</div>
					</div>
					
				{% if loop.last %}</div>{% endif %}
					
				{% if loop.index == 30 %}
					<div class="text-center mt-5 mb-5">
						
						<p class="lead">¿No encuentras lo que buscas? Prueba aquí:</p>
						<form id="searchform2" role="search" method="get" action="{{site.url}}">
							<input class="form-control form-control-lg" type="text" placeholder="Buscar" name="s">
						</form>
						
					</div>
				{% endif %}
				
			{% endfor %}
			
			
			{#{% if posts.pagination.next %}
				<div class="text-center mt-5 mb-5">
					<a href="{{posts.pagination.next.link}}" class="btn btn-outline-primary">Ver más</a>
				</div>
			{% endif %}#}
			
			
		</div>
		
	</div>

{% endblock %}
