{% extends "base.twig" %}

{% block title %}
	{{ page.meta_title }}
	{{ page.meta_description }}
{% endblock %}


{% block content %}
	
	{% if page.foto[0] %}
		<div class="page-section page-section__showcase page-section__no-margin">
		
		<div class="showcase-text">
			
			<div class="grid-container">
				<div class="grid-x grid-padding-x align-center">
						
					<div class="cell small-12">	
						<h1>{{ page.citaat }}</h1>	
						
					  	<div class="grid-x grid-padding-x align-center align-top">
						  <div class="cell small-12 medium-10 large-6">	
								
								<form action="/zoek-locatie" method="get" class="form form__find-location">
						  
									  <div class="grid-x grid-padding-x align-top">
										 <div class="cell small-12 text-center"><h3>Vind een vestiging bij jou in de buurt</h3></div>
										  <div class="cell small-6">
			  							  		<input class="" type="text" name="adres" value="" placeholder="Plaats,adres of postcode" autocomplete="off">
										  </div>	
										  <div class="cell small-6">
											<select name="opvang" id="opvang">
												<option value="">Kies een soort opvang</option>
												<option value="kdv">Kinderdagverblijf</option>
												<option value="po">Peuteropvang</option>
												<option value="bso">Buitenshoolse opvang</option>
												<option value="tso">Tussenschoolse opvang</option>
											</select>
										  </div>
										  <div class="cell small-12">
									    	  <button class="button secondary expanded">Zoek vestiging</button>
										  </div>
									  </div>
					
								</form>	
								
							</div>
						</div>
							
					</div>
				
				</div>
			</div>
			
		</div>
		
		<!--	
		<div class="jarallax jarallax__full-width" style="height:60vh;">
			<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ page.foto[0] }}" alt="{{ page.titel }}" class="lazy-image jarallax-img">
		</div>-->
			
			<div class="orbit orbit__images" role="region" aria-label="Favorite Space Pictures" data-orbit>
			  <div class="orbit-wrapper">
			    <div class="orbit-controls">
			      <button class="orbit-previous">&#9664;&#xFE0E;</button>
			      <button class="orbit-next">&#9654;&#xFE0E;</button>
			    </div>
			    <ul class="orbit-container">
					
					{% for image in page.foto %}
	  			      <li class="orbit-slide">
	  			          <img class="orbit-image" src="{{ image }}" alt="{{ page.titel }}">
	  			      </li>
					{% endfor %}
						
			   
			    </ul>
			  </div>
			  <nav class="orbit-bullets">
			    <button class="is-active" data-slide="0"></button>
			    <button data-slide="1"></button>
			    <button data-slide="2"></button>
			    <button data-slide="3"></button>
			  </nav>
			</div>
		
	</div>
	{% else %}
		<br />
	{% endif %}

	
	{% for row in page.contents %}
    	<div class="page-section {{row.classname}}"> {{ row.html|raw }} </div>
	{% endfor %}
	
 
	{% if page.form %}
		{% include 'partials/form.twig' %}
	{% endif %}
	
	
	  
{% endblock %}