{% 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.header }}</h1>
						<p class="lead">{{ localization.jobs.lead }}</p>
					</div>
					
					<div class="small-12 medium-5 cell already-visible">
						<form class="search-jobs" onSubmit="return false">
		
							<div class="input-group">
								<input class="input-group-field" type="text" placeholder="{{ localization.jobs.placeholder }}" name="q" id="test" autocomplete="off">
								<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">
		<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"><h2 data-job-count>{{pagination.item_count}} {{ localization.jobs.jobs_label }}</h2></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>
	
 
	<div class="page-section page-section__form-blue">
		<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 %}