{% extends "base.twig" %}

{% block content %}

	{% if post.meta('es_proyecto') %}
	
	<div class="project-header mb-5 pb-5" style="background-image:url({% if post.thumbnail %}{{post.thumbnail|resize(1300,1300)}}{% else %}{{site.theme.link}}/public/img/cabecera-provisional.jpg{% endif %}); background-repeat:no-repeat; background-position:center center; background-size:cover; opacity:0.9;">
		<div class="overlay bg-gradient-1"></div>
		<div class="caption">
			<div class="container h-100">
				<div class="d-flex h-100 text-center align-items-center">
					<div class="w-100">
						<h1 class="scrolldown-1">
							
							<div class="title h-100 font-weight-bold text-white">
								
								<div class="mb-5">
									<img src="{% if post.thumbnail %}{{post.thumbnail|resize(250,250)}}{% else %}{{site.theme.link}}/public/img/cabecera-provisional.jpg{% endif %}" class="rounded-circle" alt="{{ site.name }}" alt="{{ site.name }}">
								</div>
								{#<div class="mt-5 mb-2">
									{{ post.title }}
								</div>#}
								<div class="mt-5 mb-2">
									<a href="#section-1" class="text-white text-decoration-none border-0">
										{{ post.title }}
										<img class="down-arrow" src="{{site.theme.link}}/public/img/flecha-logo-central.png">
									</a>
								</div>
							
							</div>
								
						</h1>
					</div>
				</div>
			</div>
		</div>
		
	</div>
	
	<div id="section-1">
	
		<div class="container pb-5">
			
			<div class="row">
				<div class="{% for term in post.terms %}{% if term.parent == 138 or term.parent == 29 %} col-md-4 border-right{% endif %}{% endfor %}">
					<div class="d-none{% for term in post.terms %}{% if term.parent == 138 %} d-block{% endif %}{% endfor %}">
					<p class="mb-1 font-weight-bold text-uppercase text-naranja letter-spacing-1">Tipo de servicio</p>
					<p>
						{% for term in post.terms %}
							{% if term.parent == 138 %}{{term.name}}<span class="separator">, </span>{% endif %}
						{% endfor %}
					</p>
					</div>
					
					<div class="d-none{% for term in post.terms %}{% if term.parent == 29 %} d-block{% endif %}{% endfor %}">
					<p class="mt-4 mb-1 font-weight-bold text-uppercase text-naranja letter-spacing-1">Área</p>
					<p>
						{% for term in post.terms %}
							{% if term.parent == 29 %}{{term.name}}<span class="separator">, </span>{% endif %}
						{% endfor %}
					</p>
					</div>
					
					{% if post.meta('cliente') %}
					<p class="mt-4 mb-1 font-weight-bold text-uppercase text-naranja letter-spacing-1">Cliente</p>
					<p>{{ post.meta('cliente') }}</p>
					{% endif %}
					
					{% if post.meta('publico_objetivo') %}
					<p class="mt-4 mb-1 font-weight-bold text-uppercase text-naranja letter-spacing-1">Público objetivo</p>
					<p>{{ post.meta('publico_objetivo') }}</p>
					{% endif %}
					
					{% if post.meta('lugar') %}
					<p class="mt-4 mb-1 font-weight-bold text-uppercase text-naranja letter-spacing-1">Lugar de realización</p>
					<p>{{ post.meta('lugar') }}</p>
					{% endif %}
					
					{% if post.meta('fecha_y_duracion') %}
					<p class="mt-4 mb-1 font-weight-bold text-uppercase text-naranja letter-spacing-1">Fecha y duración</p>
					<p>{{ post.meta('fecha_y_duracion') }}</p>
					{% endif %}
					
					{% if post.meta('enlace_a_web_externa_1') or post.meta('enlace_a_web_externa_2') or post.meta('enlace_a_web_externa_3') %}
					<p class="mt-4 mb-1 font-weight-bold text-uppercase text-naranja letter-spacing-1">Enlace a web externa</p>
					{% if post.meta('enlace_a_web_externa_1') %}<a href="{{ post.meta('enlace_a_web_externa_1') }}" target="_blank" class="d-inline-block">{{ post.meta('enlace_a_web_externa_1')|slice(0, 28) }}...</a>{% endif %}
					{% if post.meta('enlace_a_web_externa_2') %}<a href="{{ post.meta('enlace_a_web_externa_2') }}" target="_blank" class="d-inline-block pt-2">{{ post.meta('enlace_a_web_externa_2')|slice(0, 28) }}...</a>{% endif %}
					{% if post.meta('enlace_a_web_externa_3') %}<a href="{{ post.meta('enlace_a_web_externa_3') }}" target="_blank" class="d-inline-block pt-2">{{ post.meta('enlace_a_web_externa_3')|slice(0, 28) }}...</a>{% endif %}
					{% endif %}
					
				</div>
				<div class="{% for term in post.terms %}{% if term.parent == 138 or term.parent == 29 %} col-md-8{% endif %}{% endfor %}">
					<div class="pl-2">
						{{ post.content }}
					</div>
				</div>
			</div>
			
		</div>
		
		<div class="container-fluid proyectos materiales">
			
			{% if post.meta('materiales_archivo_1') or post.meta('materiales_archivo_2') or post.meta('materiales_archivo_3') %}
			<div class="section-heading border-bottom mt-5 mb-3 pt-5">
				<div class="container">
					<h2 class="title underline">Materiales</h2>
				</div>
			</div>
			
			<div class="container pt-5">
				
				<div class="d-sm-flex flex-row">
					{% if post.meta('materiales_archivo_1') %}
					<div class="d-block h-100 pr-2 d-sm-flex h-100 align-items-top mb-4">
						<a href="{{post.meta('materiales_archivo_1').url}}" target="_blank" class="border-0">
							<i class="fa fa-file-pdf-o fa-2x text-danger mb-3 d-block"></i>
							{% set bytes = post.meta('materiales_archivo_1').filesize %}
							{% set kiloBytes = (bytes / 1024)|round(2) %}
							{% set megaBytes = (kiloBytes / 1024)|round(2) %}
							{{post.meta('materiales_archivo_1').title}} ({{megaBytes}} MB)
						</a>
						{% if post.meta('materiales_archivo_1').description %}
						<p><small>{{post.meta('materiales_archivo_1').description}}</small></p>
						{% endif %}
					</div>
					{% endif %}
					{% if post.meta('materiales_archivo_2') %}
					<div class="d-block h-100 pl-2 pr-2 d-sm-flex h-100 align-items-top mb-4">
						<a href="{{post.meta('materiales_archivo_2').url}}" target="_blank" class="border-0">
							<i class="fa fa-file-pdf-o fa-2x text-danger mb-3 d-block"></i>
							{% set bytes = post.meta('materiales_archivo_2').filesize %}
							{% set kiloBytes = (bytes / 1024)|round(2) %}
							{% set megaBytes = (kiloBytes / 1024)|round(2) %}
							{{post.meta('materiales_archivo_2').title}} ({{megaBytes}} MB)
						</a>
						{% if post.meta('materiales_archivo_2').description %}
						<p><small>{{post.meta('materiales_archivo_2').description}}</small></p>
						{% endif %}
					</div>
					{% endif %}
					{% if post.meta('materiales_archivo_3') %}
					<div class="d-block h-100 pl-2 d-sm-flex h-100 align-items-top mb-4">
						<a href="{{post.meta('materiales_archivo_3').url}}" target="_blank" class="border-0">
							<i class="fa fa-file-pdf-o fa-2x text-danger mb-3 d-block"></i>
							{% set bytes = post.meta('materiales_archivo_3').filesize %}
							{% set kiloBytes = (bytes / 1024)|round(2) %}
							{% set megaBytes = (kiloBytes / 1024)|round(2) %}
							{{post.meta('materiales_archivo_3').title}} ({{megaBytes}} MB)
						</a>
						{% if post.meta('materiales_archivo_3').description %}
						<p><small>{{post.meta('materiales_archivo_3').description}}</small></p>
						{% endif %}
					</div>
					{% endif %}
				</div>
				
			</div>
			{% endif %}
			
			{% if post.meta('video') %}
			<div class="container mb-5">
				<div class="mt-5">
					<div class="embed-responsive embed-responsive-16by9">
						{{ post.meta('video') }}
					</div>
				</div>
			</div>
			{% endif %}
			
		</div>
		
		<div class="container-fluid mt-5 pb-5 proyectos relacionados">
			<div class="section-heading border-bottom mb-3 pt-5">
				<div class="container">
					<h2 class="title underline">Proyectos relacionados</h2>
				</div>
			</div>
			
			<div class="container pt-5 mb-5">
				<div class="row">

				{% for post in related %}

					<div class="col-md-4">
						<div class="project-item mb-4">
							<div class="overlay bg-gradient-1"></div>
							<img src="{{post.thumbnail|resize(500,500)}}" class="img-fluid" alt="{{post.title}}">
							<a href="{{post.link}}" class="d-block caption">
							<div class="text-center d-flex h-100 align-items-center p-3">
								<div>
									<h3>{{ post.title|truncate(12) }}</h3>
								</div>
							</div>
							</a>
						</div>
					</div>
					
				{% endfor %}

				</div>
				{#{% include 'related.twig' %}#}
			</div>
			
		</div>
		
	</div>
	
	
	{% else %}

	<div class="page-header mb-5 pb-5" style="background-image:url({% if post.thumbnail %}{{post.thumbnail|resize(1300,500)}}{% else %}{{site.theme.link}}/public/img/cabecera-provisional.jpg{% endif %}); background-repeat:no-repeat; background-position:center center; background-size:cover; opacity:0.9;">
		<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 mt-5 pt-5 actualidad">
		
		<div class="row border-bottom mb-5">
			<div class="col-lg-10 offset-lg-1 text-center">
				
				<h1 class="mb-5">{{ post.title }}</h1>

				<p class="text-uppercase mb-5 meta"><small>{% for term in post.terms %}{% if term.taxonomy != 'post_tag' %}{{term.name}} / {% endif %}{% endfor %}{{post.post_date|date('j F ')}}</small></p>
				
			</div>
		</div>
		
		<div class="row border-bottom">
			<div class="col-lg-10 offset-lg-1">
				
				{{ post.content }}
				
				<div class="mt-5 mb-5">
					
					<img src="{{post.thumbnail|resize(800)}}" class="img-fluid" />
					
				</div>
				
			</div>
		</div>
		
		<div class="text-center pt-5 pb-5">
			
			<a href="{{site.url}}/actualidad" class="btn btn-outline-primary">Volver</a>
			
		</div>
	</div>
	
	{% endif %}

{% endblock %}
