{% extends "base.twig" %}

{% block content %}

	<div class="page-header mb-5 pb-5" style="background-image:url({{site.theme.link}}/public/img/cabecera-provisional.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">
				{% if cat_title %}
					<h1 class="title text-white"><span class="category-politic">{{cat_title}}</span></h1>
					{% if cat_description %}<p class="teaser text-center">{{cat_description|striptags}}</p>{% endif %}
				{% elseif search_title %}
					<h1 class="title text-white">Resultados de la búsqueda: <em>{{ search_title }}</em></h1>
				{% elseif wp_title %}
					<h1 class="title text-white">{{wp_title}}</h1>
				{% elseif section_title %}
					<h1 class="title text-white">{{section_title}}</h1>
					{% if section_description %}<p class="teaser text-center">{{section_description|striptags}}</p>{% endif %}
				{% else %}
				{% endif %}
			</div>
		</div>
		</div>
	</div>
	
	<div class="container">
		
		{% for post in posts %}
				
			<div class="row border-bottom pb-5{% if loop.index != 1 %} pt-5{% endif %}">
				
				{% if post.thumbnail %}
				<div class="col-md-4">
					<img src="{{post.thumbnail|resize(800,500)}}" class="img-fluid" alt="{{post.title}}" />
				</div>
				{% endif %}
				
				<div class="{% if post.thumbnail %}col-md-8{% else %}col-md-12{% endif %}">
					
					<p class="text-uppercase"><small>{{post.post_date|date('j F ')}} / {% for term in post.terms %}{% if loop.index == 1 %}{{term.name}}{% endif %}{% endfor %}</small></p>
					
					<h2 class="mt-1 mb-3 text-capitalize font-weight-bold"><a href="{{post.link}}" class="text-decoration-none">{{ post.title }}</a></h2>
					
					<div>{{post.preview.length(55).end('...')|replace({'Read More':''})}}</div>
					{#<div>{{ post.content|truncate(45) }}</div>#}
					
				</div>
				
			</div>
		
		{% endfor %}
	
		<nav aria-label="Paginacion" class="mt-5 mb-5">
		  <ul class="pagination pagination-lg justify-content-center">
			{% if posts.pagination.prev %}<li class="page-item">
			  <a class="page-link" href="{{posts.pagination.prev.link}}" aria-label="Previous">
				<i class="fa fa-angle-left" aria-hidden="true"></i>
			  </a>
			</li>{% endif %}
			{% for page in posts.pagination.pages %}
			<li class="page-item">
				{% if page.link %}
					<a href="{{page.link}}" class="page-link">{{page.title}}</a>
				{% else %}
					<span class="page-link">{{page.title}}</span>
				{% endif %}
			</li>
			{% endfor %}
			{% if posts.pagination.next %}<li class="page-item">
			  <a class="page-link" href="{{posts.pagination.next.link}}" aria-label="Next">
				<i class="fa fa-angle-right" aria-hidden="true"></i>
			  </a>
			</li>{% endif %}
		  </ul>
		</nav>
	
	</div>
	
{% endblock %}
