{% 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">
		
		<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>
				
				</div>
			</div>
			
		</div>
		
		<div class="showcase-blocks">
			
		
			
			<div class="grid-container">
				<div class="grid-x grid-padding-x align-center">
						
					<div class="cell small-12">	
						
						<ul class="grid-x grid-padding-x skl-links" data-equalizer>
							
							{% if( page.locatie == 1) %}
								
								<li class="cell small-6 medium-3">
									<a href="/skl/kinderdagverblijf-kdv" class="block block__kdv" data-equalizer-watch>
										<img src="/images/svg/kdv.svg" alt="KDV - Kinderdagverblijf">
										<span class="type">Kinderdagverblijf</span>
									</a>
								</li>
								<li class="cell small-6 medium-3">
									<a href="/skl/peuteropvang-po" class="block block__po" data-equalizer-watch>
										<img src="/images/svg/po.svg" alt="PO - Peuter opvang">
										<span class="type">Peuteropvang</span>
									</a>
								</li>
								<li class="cell small-6 medium-3">
									<a href="/skl/buitenschoolse-opvang-bso" class="block block__bso" data-equalizer-watch>
										<img src="/images/svg/bso.svg" alt="BSO Buitenschoolse opvang">
										<span class="type">Buitenschoolse Opvang</span>
									</a>
								</li>
								<li class="cell small-6 medium-3">
									<a href="/skl/tussenschoolse-opvang-tso" class="block block__tso" data-equalizer-watch>
										<img src="/images/svg/tso.svg" alt="TSO - Tussenschoolse opvang">
										<span class="type">Tussenschoolse opvang</span>
									</a>
								</li>
								
							{% elseif( page.locatie == 2) %}
							
								<li class="cell small-6 medium-3">
									<a href="/po/De-stal-331" class="block block__po" data-equalizer-watch><img src="/images/po-de-stal.png" alt="PO de stal" class="vertical-center"></a>	
								</li>
								<li class="cell small-6 medium-3">
									<a href="/po/De-Drie-Turven-328" class="block block__po" data-equalizer-watch><img src="/images/SKL-3-turven.png" alt="PO 3 Turven" class="vertical-center"></a>	
								</li>
								<li class="cell small-6 medium-3">
									<a href="/po/-t-Veldmuisje-332" class="block block__po" data-equalizer-watch><img src="/images/SKL-veldmuisje.png" alt="PO Veldmuisje" class="vertical-center"></a>	
								</li>
								<li class="cell small-6 medium-3">
									<a href="/po/-t-Rakkertje-333" class="block block__po" data-equalizer-watch><img src="/images/SKL-rakkertje.png" alt="PO \'t Rakkertje" class="vertical-center"></a>
								</li>
								
							{% elseif( page.locatie == 3) %}
							
								<li class="cell small-6 medium-3">
									<a href="bso/Locatie-BSO-de-Tamboerijn-30" class="block block__bso" data-equalizer-watch><img src="/images/svg/bso-de-tamboerijn.svg" alt="BSO de Tamboerijn" class="vertical-center"></a>
								</li>
								<li class="cell small-6 medium-3">
									<a href="bso/Locatie-BSO-De-Qubus-31" class="block block__bso" data-equalizer-watch><img src="/images/svg/bso-de-qubus.svg" alt="BSO de Qubus" class="vertical-center"></a>
								</li>
								<li class="cell small-6 medium-3">
									<a href="bso/Locatie-BSO-Aventurijn-32" class="block block__bso" data-equalizer-watch><img src="/images/svg/bso-de-aventurijn.svg" alt="BSO Aventurijn" class="vertical-center"></a>
								</li>
								<li class="cell small-6 medium-3">
									<a href="bso/Locatie-BSO-De-Haven-33" class="block block__bso" data-equalizer-watch><img src="/images/svg/bso-de-haven.svg" alt="BSO De Haven" class="vertical-center"></a>
								</li>
															
							{% elseif( page.locatie == 5) %}
							
								<li class="cell small-6 medium-3">
									<a href="/kdv/Locatie-Klein-Dumpje-24" class="block block__kdv" data-equalizer-watch><img src="/images/svg/klein-duimpje.svg" alt="KDV Klein Duimpje" class="vertical-center"></a>
								</li>
								<li class="cell small-6 medium-3">
									<a href="/kdv/Locatie-Klein-Steijntje-2" class="block block__kdv" data-equalizer-watch><img src="/images/svg/klein-steijntje.svg" alt="KDV - Klein Steijntje" class="vertical-center"></a>
								</li>
								<li class="cell small-6 medium-3">
									<a href="/kdv/Locatie-Klein-Kroost-26" class="block block__kdv" data-equalizer-watch><img src="/images/svg/klein-kroost.svg" alt="BSO Klein Kroost" class="vertical-center"></a>
								</li>
								<li class="cell small-6 medium-3">
									<a href="/kdv/Locatie-Klein-Turfje-450" class="block block__kdv" data-equalizer-watch><img src="/images/svg/klein-turfje.svg" alt="BSO Klein turfje" class="vertical-center"></a>
								</li>
							
							{% endif %}
							
						</ul>
						
					</div>
				
				</div>
			</div>
			
		</div>
		
			
		<div class="jarallax jarallax__full-width" style="height:55vh;">
			<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ page.foto[0] }}" alt="{{ page.titel }}" class="lazy-image jarallax-img">
		</div>
		
	</div>
	
	{% 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 %}