<div class="form form--horizontal brochure-order-form">
	<h3>Personal Information</h3>
	<div class="form__group">
		<div class="col-xl-3 col-lg-12 no-padding-left">
			<p>* = mandatory fields</p>
		</div>
		<div class="col-xl-9 col-lg-8 col-sm-10 no-padding">
			<p class="form__error-message">
				Invalid or missing data. Please check the form.
			</p>
		</div>
	</div>

	<div class="form__group">
		<div class="col-xl-3 no-padding-left">
			{{ render "molecules/forms/form-group-label" classes="form__label" text="Salutation*" }}
		</div>
		<div class="col-xl-9 col-lg-8 col-sm-10 no-padding">
			{{ render "molecules/forms/form-option" inputType="radio" inputId="mister" inputName="salutation" inputClasses="form-field" inputValidators="required data-vl-errors-messages-disabled" labelText="Mr." }}
			{{ render "molecules/forms/form-option" inputType="radio" inputId="miss" inputName="salutation" inputClasses="form-field" inputValidators="required data-vl-errors-messages-disabled" labelText="Ms." }}
		</div>
	</div>

	{{ render "molecules/forms/form-group" inputId="title" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="Title" containerClasses="col-xl-9 col-lg-8 col-sm-10 no-padding" inputType="text" inputClasses="form__text form-field" inputValidators="required data-vl-errors-messages-disabled" }}

	{{ render "molecules/forms/form-group" inputId="first-name" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="First name*" containerClasses="col-xl-9 col-lg-8 col-sm-10 no-padding" inputType="text" inputClasses="form__text form-field" inputValidators="required data-vl-errors-messages-disabled" }}

	{{ render "molecules/forms/form-group" inputId="last-name" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="Last name*" containerClasses="col-xl-9 col-lg-8 col-sm-10 no-padding" inputType="text" inputClasses="form__text form-field" inputValidators="required data-vl-errors-messages-disabled" }}

	{{ render "molecules/forms/form-group" inputId="company" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="Company" containerClasses="col-xl-9 col-lg-8 col-sm-10 no-padding" inputType="text" inputClasses="form__text" }}


	<div class="form__group">
		{{ render "molecules/forms/form-group:form__group--fake" inputId="street" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="Street*" containerClasses="col-xl-4 col-lg-4 col-md-8 col-sm-10 no-padding" inputType="text" inputClasses="form__text form-field" inputValidators="required data-vl-errors-messages-disabled" }}
		<div class="break-md"></div>
		{{ render "molecules/forms/form-group:form__group--md" inputId="nr" labelClasses="form__label form__label--right col-xl-2 col-lg-2 col-md-3 col-sm-10 no-padding-right" labelText="Nr*" containerClasses="col-xl-3 col-lg-2 col-md-8 col-sm-10 no-padding" inputType="text" inputClasses="form__text form-field" inputValidators="required data-vl-errors-messages-disabled" }}
	</div>

	<div class="form__group">
		{{ render "molecules/forms/form-group:form__group--fake" inputId="zip-code" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="Zip*" containerClasses="col-xl-4 col-lg-4 col-md-8 col-sm-10 no-padding" inputType="text" inputClasses="form__text form-field" inputValidators="required data-vl-errors-messages-disabled" }}
		<div class="break-md"></div>
		{{ render "molecules/forms/form-group:form__group--md" inputId="City" labelClasses="form__label form__label--right col-xl-2 col-lg-2 col-md-3 col-sm-10 no-padding-right" labelText="City*" containerClasses="col-xl-3 col-lg-2 col-md-8 col-sm-10 no-padding" inputType="text" inputClasses="form__text form-field" inputValidators="required data-vl-errors-messages-disabled" }}
	</div>

	{{ render "molecules/forms/form-group" inputId="country" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="Country*" containerClasses="col-xl-9 col-lg-8 col-sm-10 no-padding" inputType="text" inputClasses="form__text form-field" inputValidators="required data-vl-errors-messages-disabled" }}

	{{ render "molecules/forms/form-group" inputId="email" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="E-mail address" containerClasses="col-xl-9 col-lg-8 col-sm-10 no-padding" inputType="email" inputClasses="form__text form-field" }}

	{{ render "molecules/forms/form-group" inputId="phone-number" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="Phone number" containerClasses="col-xl-9 col-lg-8 col-sm-10 no-padding" inputType="number" inputClasses="form__text form-field" }}

	<div class="form__group">
		<div class="col-xl-9 col-lg-8 col-sm-10 no-padding">
			{{ render "molecules/forms/form-option" inputType="checkbox" inputId="policy-terms" labelText="Yes, I agree to <a href='javascript:;'>the terms of use</a> and the <a href='javascript:;'>data protection policy.*</a>" inputClasses="form-field" inputValidators="required data-vl-errors-messages-disabled" }}
			{{ render "atoms/global/space" space=5 }}
		</div>
	</div>

	<div class="form__group">
		<div class="col-xl-12 no-padding">
			{{ render "molecules/forms/form-option" inputType="checkbox" inputId="policy-terms" labelText="Yes, I'm interested in receiving further Information around the products of Deutsche bank." inputClasses="form-field" inputValidators="data-vl-errors-messages-disabled" }}
			{{ render "atoms/global/space" space=18 }}
		</div>
	</div>

	{{ render "molecules/forms/form-group-buttons" submitText="Order" submitClasses="submit-form" inputValidators="required data-vl-errors-messages-disabled" cancelLink=true }}
</div>

{{#unless nojs }}
<script>
	window.addEventListener('load', function() {
	/**
	 * START - REQUIRED JS SNIPPET
	 */
	{{ render "atoms/scripts/script-form" selector=".brochure-order-form" }}
	 /**
	  * END - REQUIRED JS SNIPPET
	  */
	});
</script>
{{/unless }}
