{% extends "base.twig" %}

{% block content %}
	
	<div class="page-section page-section__vacatures-splash">
		<div class="grid-container">	
			<div class="grid-x grid-padding-x text-center align-top align-center">
		
					<div class="large-12 cell already-visible">
						<h1>{{ localization.jobs.pageheader }}</h1>
						<p class="lead">{{ localization.jobs.lead }}</p>
					</div>
					
					<div class="small-12 medium-5 cell already-visible">
						<form class="search-jobs" action="/vacatures" method="get">
		
							<div class="input-group">
								<input class="input-group-field" type="text" placeholder="{{ localization.jobs.placeholder }}" name="q" id="test" value="{{ search_string }}" autocomplete="off">
								<input type="hidden" id="categories-selected" name="category" value="{{ parameters.category|join(",") }}">
								<input type="hidden" id="education-selected" name="education" value="{{ parameters.education|join(",") }}">
								<input type="hidden" id="hours-selected" name="hours" value="{{ parameters.hours|join(",") }}">
								<input type="hidden" id="salary-min-selected" name="salary-min" value="{{ parameters.salary_min }}">
								<input type="hidden" id="salary-max-selected" name="salary-max" value="{{ parameters.salary_max }}">
								<input type="hidden" id="salary-interval-selected" name="salary-interval" value="{{ parameters.salary_interval }}">
																
								<div class="input-group-button">
									<input type="submit" class="button" value="{{ localization.jobs.button }}" id="search-jobs">
								</div>
							</div>
		
						</form>
					</div>
			   
			</div>
		</div>
	</div>
								
	<div class="page-section page-section__filter-jobs sticky" data-sticky data-top-anchor="filter-jobs:top" data-margin-top="0" id="filter-jobs" data-post-action="{{ localization.jobs.search_url }}">
		<div class="grid-container filter-jobs-inner">
				<div class="grid-x align-center">
			
					<div class="cell small-12">
						<div class="filter__jobs">
						
							<ul class="horizontal align-center menu menu__filter"> 
								<li><a class="icon icon__discipline" data-toggle="filter-discipline">{{ localization.jobs.filters.discipline }}</a></li>
								<li><a class="icon icon__education" data-toggle="filter-education">{{ localization.jobs.filters.education }}</a></li>
								<li><a class="icon icon__hours" data-toggle="filter-hours">{{ localization.jobs.filters.hours }}</a></li>
								<li><a class="icon icon__salary" data-toggle="filter-salary">{{ localization.jobs.filters.salary }}</a></li>
							</ul>
						</div>
					</div>
					
					<div class="cell small-12 medium-11" style="position:relative;">
						<form id="filter-jobs-form" method="post">
							{% include 'partials/vacature.filters.twig' %}
						</form>
					</div>
							
			</div>
		</div>	
	</div>
	
	<div class="page-section page-section__vacatures">
		<div class="grid-container">
			<div class="grid-x grid-padding-x" id="job-search-container">
			
					<div class="cell small-12 text-center">
						{% if pagination.item_count != 0 %}
							<h2 data-job-count>{{pagination.item_count}} {{ localization.jobs.jobs_label }} {{ current_category.name }}</h2>
							<span class="hide" data-job-cta></span>
						{% else %}
							<h2 data-job-count>{{ message }}</h2>
							<span data-job-cta>{{ search_cta|raw }}</span>						
						{% endif %}
					</div>
					
					<div class="cell small-12">		
						<div class="grid-x grid-padding-x" data-jobs-container data-equalizer data-equalize-by-row="true" >
							
							{% for job in jobs %}
		 						<div class="cell small-12 medium-6 large-3">
		 						<div class="callout callout__vacatures">
							
		 							<div class="callout-inner">
		 								<div class="callout-text" data-equalizer-watch>
											<h3>{{ job.title() }}</h3>
											<p>{{ job.summary_maxlength }}</p>
								
		 								<ul class="menu vertical menu__jobs-features">
		 									<li class="icon icon__location">{{ job.location }}</li>
		 									<li class="icon icon__salary">{{ job.salary }}</li>
		 									<li class="icon icon__hours">{{ job.hours_desc }}</li>
		 									<li class="icon icon__education">{{ job.intellectual_levels }}</li>
		 								</ul>
										</div>
		 								<a class="link link__apics-pointer" href="{{ job.url }}">{{ localization.jobs.button_view }}</a>
		 							</div>
						
		 						</div>
		 				 	   </div>
						   {% endfor %}
						   
						</div>
					</div>
					
					<div class="cell small-12">
						<div data-job-pagination>{{ pagination.html|raw }}</div>
					</div>
					
			
		
			</div>
		</div>
	</div>
	
	
	{% if page.form %}
		{% include 'partials/form.twig' %}
	{% endif %}
	
 
	<div class="page-section page-section__form-blue hide">
		<div class="grid-container">
			
			<div class="grid-x grid-padding-x align-center">
				<div class="cell small-12 medium-7 text-center">
					<h2>De nieuwste vacatures in je mailbox?</h2>
				</div>
			</div>
			
			<div class="grid-x grid-padding-x align-center">
				
				<div class="cell small-12 medium-5 text-center">
					
					<form class="form" action="{{ page.form.action }}" method="post" enctype="multipart/form-data" data-abide novalidate>
				
						<div class="input-group">
						  <input  type="text" name="" placeholder="E-mailadres" class="input-group-field">
						  <div class="input-group-button">
						    <input type="submit" class="button" value="Aanmelden">
						  </div>
						</div>
				
					</form>
			
				</div>
				
			</div>
			
		</div>
	</div>
	
  
{% endblock %}