<!DOCTYPE html>
<html lang="en">
<head>
	<title>{{ title }}</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
	<link rel="icon" type="image/png" href="images/favicon.gif"/>
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" type="text/css" href="css/select.css">
<!--===============================================================================================-->
</head>
<body>
	<div class="contact1">
		<div class="container-contact1">
			<div class="contact1-pic"></div>

			<form class="contact1-form validate-form" method="post">
				<span class="contact1-form-title">
					{{ h1 }}
				</span>
				<span class="contact1-form-title-small">
					{{ h2 }}
				</span>

				<div class="wrap-input1 validate-input" data-validate = "Vul aub een naam in">
					<input class="input1" type="text" name="name" placeholder="{{ name }}">
					<span class="shadow-input1"></span>
				</div>

				<div class="wrap-input1 validate-input" data-validate = "Vul aub een geldig adres in">
					<input class="input1" type="text" name="email" placeholder="{{ email }}">
					<span class="shadow-input1"></span>
				</div>

				<div class="select-box">
				  <div class="select-box__current" tabindex="1">
					<span class="shadow-input1"></span>
				    <div class="select-box__value validate-input" data-validate = "Selecteer aantal gasten"  >
				      <input class="select-box__input" type="radio" id="255" value="255" name="guests" checked="checked"/>
				      <p class="select-box__input-text select-box__default-text">{{ num_guests }}</p>
				    </div>
				    <div class="select-box__value">
				      <input class="select-box__input" type="radio" id="0" value="0" name="guests"/>
				      <p class="select-box__input-text">{{ cant_come }}</p>
				    </div>
				    <div class="select-box__value">
				      <input class="select-box__input" type="radio" id="1" value="1" name="guests"/>
				      <p class="select-box__input-text">{{ one_guest }}</p>
				    </div>
				    <div class="select-box__value">
				      <input class="select-box__input" type="radio" id="2" value="2" name="guests"/>
				      <p class="select-box__input-text">{{ two_guest }}</p>
				    </div>
				    <div class="select-box__value">
				      <input class="select-box__input" type="radio" id="3" value="3" name="guests"/>
				      <p class="select-box__input-text">{{ three_guest }}</p>
				    </div>
				    <div class="select-box__value">
				      <input class="select-box__input" type="radio" id="4" value="4" name="guests"/>
				      <p class="select-box__input-text">{{ four_guest }}</p>
				    </div>
				    <div class="select-box__value">
				      <input class="select-box__input" type="radio" id="5" value="5" name="guests"/>
				      <p class="select-box__input-text">{{ five_guest }}</p>
				    </div>
				  </div>
				  <ul class="select-box__list">
				    <li>
					    <label class="select-box__option" for="0" aria-hidden="aria-hidden">{{ cant_come }}</label>
				    </li>
				    <li>
					    <label class="select-box__option" for="1" aria-hidden="aria-hidden">{{ one_guest }}</label>
				    </li>
				    <li>
				      <label class="select-box__option" for="2" aria-hidden="aria-hidden">{{ two_guest }}</label>
				    </li>
				    <li>
				      <label class="select-box__option" for="3" aria-hidden="aria-hidden">{{ three_guest }}</label>
				    </li>
				    <li>
				      <label class="select-box__option" for="4" aria-hidden="aria-hidden">{{ four_guest }}</label>
				    </li>
				    <li>
				      <label class="select-box__option" for="5" aria-hidden="aria-hidden">{{ five_guest }}</label>
				    </li>
				  </ul>
				</div>

				<div class="wrap-input1 validate-input">
					<textarea class="input1" name="message" placeholder="{{ additional_info }}"></textarea>
					<span class="shadow-input1"></span>
				</div>

				<div class="container-contact1-form-btn">
					<button class="contact1-form-btn">
						<span>
							{{ submit }}
							<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
						</span>
					</button>
				</div>
			</form>
		</div>
	</div>




<!--===============================================================================================-->
	<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
	<script src="js/main.js"></script>
<!--===============================================================================================-->

</body>
</html>
