{% extends "base.twig" %}

{% block head %}
	{% set meta_title = categories.name %}
	<title>{{ "Vacatures #{meta_title} " }}</title>
	<meta property="og:title" content="{{ "Vacatures #{meta_title}" }}">
{% endblock %}	

{% block content %}
			
	<div class="page-section page-section__vacatures-category">
		<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>Vacatures {{ categories.name }}</h1>
					</div>
				
			</div>
		</div>
	</div>
								
	<div class="page-section page-section__vacatures">
		<div class="grid-container">
			<div class="grid-x grid-padding-x align-center" 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_desc }}</li>
 									<li class="icon icon__hours">{{ job.hours }} - {{ job.hours_max }} uur</li>
 									<li class="icon icon__education">{{ job.intellectual }}</li>
 								</ul>
								</div>
 								<a class="link link__apics-pointer" href="{{ job.url }}" ajax-load>Bekijk vacature</a>
 							</div>
						
 						</div>
 				 	   </div>
					{% endfor %}
					
					<div class="cell small-12">
						{{ pagination.html|raw }}
					</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 %}