{% extends "base.twig" %}

{% block content %}
	
	<div class="page-section">
		<div class="grid-container">
			<div class="grid-x grid-padding-x">

				<div class="cell small-12">
					<img src="/images/Logistiek-1216x460.jpg" alt="Logistiek 0172" class="rounded-border">
					
					
					<form action="/post" method="post" class="form" data-token='{{ spamtoken }}' data-abide novalidate data-bestelscan>
							
							
 							{% for group in fields %}
															
							
								<div class="form-group {{ group.class }}" id="{{ group.id }}">

								{% if group.hide != true  %}
									<h2>{{ group.group|raw }}</h2>
								{% endif %}
								
								<div class="grid-x grid-padding-x form-group-row">
									
								{% for field in group.fields %}
 		 						
								
									{% set required = field.required ? 'required' : '' %}
									{% set size = field.size ?? 'small-12' %}
									
									<div class="cell {{size}}">

									
										{% if field.type == "textarea" %}
											
											<label>{{ field.human | raw }}</label>	
											<div class="input-wrapper">
												<div class="input-wrapper">
													<textarea class="form-text" id="{{ field.name }}"  name="{{ field.name }}" autocomplete="off" placeholder="{{ field.human }}" value="" ></textarea>
												</div>
											</div>
											
										{% elseif field.type == "select" %}
										
											<div class="input-wrapper">
												<label>{{ field.human | raw }}
												  <select id="{{ field.name }}"  name="{{ field.name }}" >
												    
													{% for option in field.options %}
														<option value="{{ loop.index }}">{{option}}</option>
													{% endfor %}
												   
												  </select>
												</label>
											</div>
											
										{% elseif field.type == "text" %}
											
											{{ field.human|raw }}
										
										{% elseif field.type == "checkbox" %}
											
											<legend>{{ field.human }}</legend>
										    {% for option in field.options %}
												<input type="checkbox" value="{{option}}" id="{{ field.name }}{{ loop.index }}" name="{{ field.name }}[]"><label for="{{ field.name }}{{ loop.index }}" class="font-normal">{{option}}</label>
											{% endfor %}
											
										{% elseif field.type == "radio" %}
									
											<legend>{{ field.human }}</legend>
										    {% for option in field.options %}
												<input type="radio" value="{{option}}" id="{{ field.name }}{{ loop.index }}" name="{{ field.name }}"><label for="{{ field.name }}{{ loop.index }}" class="font-normal">{{option}}</label>
											{% endfor %}
												
										{% elseif field.type == "button" %}
											
											<button class="button black duplicate-rows" id="{{ field.name }}" name="{{ field.name }}" type="button" data-counter="1">{{ field.human }}</button>
										
										{% elseif field.type == "next" %}
											
											<button class="button black gray toggle-groups" id="{{ field.name }}" type="button" data-show="{{ field.prev }}" data-hide="{{ field.hide }}">Vorige</button>
											<button class="button black toggle-groups" id="{{ field.name }}" type="button" data-show="{{ field.show }}" data-hide="{{ field.hide }}">{{ field.human }}</button>
										
										{% elseif field.type == "submit" %}
											
											<div data-abide-error class="callout alert" style="display: none;">
												<p>Het formulier kan nog niet verstuurd worden. De rood gemarkeerde velden bevatten waarden die wij niet snappen.</p>
											</div>					
											<input type="submit" value="Genereer Rapport" class="button primary" id="verstuur" />
											<button class="button background-gray toggle-groups" id="{{ field.name }}" type="button" data-show="{{ field.show }}" data-hide="{{ field.hide }}">Naar begin</button>
														
										{% else %}
										
											<label>{{ field.human | raw }}</label>	
											<div class="input-wrapper">
												<input type="text" class="form-text" id="{{ field.name }}"  name="{{ field.name }}" autocomplete="off" placeholder="{{ field.human }}" value="" {{ required }} {{ field.datacopy }} />
											</div>
											
										{% endif %}
										
									</div>
							
	 						   {% endfor %}
						   		</div>
								</div>
							   
						   {% endfor %}
				   		   
							
				   	
						  
							
					</form>
					
									
				</div>
				
				
			</div>
		</div>
	</div>  

  
{% endblock %}