{% extends "base.twig" %}

{% block content %}

	{#<div class="page-header mb-5 pb-5" style="background-image:url({{site.url}}/wp-content/uploads/2020/05/Andaira_Proyectos@2x.png); background-repeat:no-repeat; background-position:center center; background-size:cover;">#}
	<div class="page-header mb-5 pb-5" style="background-image:url('{{site.url}}/wp-content/themes/andaira/public/img/proyectos_cabecera-1.jpg'); background-repeat:no-repeat; background-position:center center; background-size:cover;">
		<div class="overlay bg-gradient-9">
		<div class="container pb-5 h-100">
			<div class="d-flex h-100 justify-content-center align-items-end">
				<h1 class="title text-white">Proyectos</h1>
			</div>
		</div>
		</div>
	</div>
	
	<div id="main-filter" class="container-fluid mt-5 proyectos">
		
		<div class="mt-5 pt-5">
			<div class="container text-center mb-5">
				<a href="#areas-filter" class="filter-trigger btn btn-danger btn-lg mr-5" data-toggle="collapse" aria-expanded="true" aria-controls="areas-filter">Filtrar por áreas</a>
				<a href="#servicios-filter" class="filter-trigger btn btn-primary btn-lg collapsed" data-toggle="collapse" aria-expanded="true" aria-controls="servicios-filter" onclick="this.classlist.toggle('active')">Filtrar por servicio</a>
			</div>
		</div>
		
		<div id="areas-filter" class="mb-5 mt-2 pb-5 pt-2 collapse show" data-parent="#main-filter">
			<div class="container-fluid pb-3 term-filter border-bottom ">
				<div class="row text-uppercase font-weight-bold d-flex flex-row mr-5 ml-5">
					<div class="term-filter-item">
						{#<!--<span class="d-block h-100 p-4 d-flex h-100 align-items-top border-right"><small>Áreas de trabajo</small></span>-->#}
						<a href="#projects0" data-toggle="collapse" aria-expanded="true" aria-controls="projects0" class="projects-tab-0 d-block h-100 p-4 d-flex h-100 align-items-top border-right"><small>Áreas de trabajo</small></a>
					</div>
					{% for term in areas %}
						<div class="term-filter-item">
							<a href="#projects{{loop.index}}" data-toggle="collapse" aria-expanded="true" aria-controls="projects{{loop.index}}" class="d-block h-100 p-4 d-flex h-100 align-items-top {% if not loop.last %}border-right{% endif %}"><small>{{term.name}}</small></a>
						</div>
					{% endfor %}
				</div>
			</div>
		
			<div class="container mt-5 mb-5">
				<div id="projects0" class="row collapse show" data-parent="#areas-filter">
					{{ posts_by_term('category','proyectos',-1,'post','related_proyectos_item.twig') }}
				</div>
				
				{% for term in areas %}
				<div id="projects{{loop.index}}" class="row collapse" data-parent="#areas-filter">
					{% set slug = term.slug %}
					
					{{ posts_by_term('category',slug,-1,'post','related_proyectos_item.twig') }}
					
				</div>
				{% endfor %}
			</div>
		</div>
		
		<div id="servicios-filter" class="mb-5 mt-2 pb-5 pt-2 collapse" data-parent="#main-filter">
			<div class="container-fluid pb-3 term-filter border-bottom">
				<div class="row text-uppercase font-weight-bold d-flex flex-row mr-5 ml-5">
					<div class="term-filter-item">
						{#<!--<span class="d-block h-100 p-4 d-flex h-100 align-items-top border-right"><small>Filtrar por servicio</small></span>-->#}
						<a href="#servicios0" data-toggle="collapse" aria-expanded="true" aria-controls="servicios0" class="servicios-tab-0 d-block h-100 p-4 d-flex h-100 align-items-top border-right"><small>Filtrar por servicio</small></a>
					</div>
					{% for term in serviciosterms %}
						<div class="term-filter-item">
							<a href="#{{term.slug}}" data-toggle="collapse" aria-expanded="true" aria-controls="{{term.slug}}" class="d-block h-100 p-4 d-flex h-100 align-items-top {% if not loop.last %}border-right{% endif %}"><small>{{term.name}}</small></a>
						</div>
					{% endfor %}
				</div>
			</div>
		
			<div class="container mt-5 mb-5">
				<div id="servicios0" class="row collapse show" data-parent="#servicios-filter">
					{{ posts_by_term('category','servicios',-1,'post','related_proyectos_item.twig') }}
				</div>
				{% for term in serviciosterms %}
				<div id="{{term.slug}}" class="row collapse" data-parent="#servicios-filter">
					{% set slug = term.slug %}
					
					{{ posts_by_term('category',slug,-1,'post','related_proyectos_item.twig') }}
				</div>
				{% endfor %}
			</div>
		</div>
		
	</div>

{% endblock %}
