{{#if preview}}
<div class="row content internal-concept">
	<div class="col-xl-8 col-lg-12">
{{/if}}
		<div class="form form--horizontal edit-profile-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" text="Interest group" classes="form__label" }}
				</div>
				<div class="col-xl-9 col-lg-8 col-sm-10 no-padding">
					<div class="row">
						<div class="col-xl-6 col-lg-12 no-padding-left">
							{{ render "molecules/forms/form-option" inputType="radio" inputName="interest-group" inputId="etf-advisor" labelText="ETF Advisor" inputClasses="form-field" inputValidators="data-vl-errors-messages-disabled required" }}
						</div>
						<div class="col-xl-6 col-lg-12 no-padding-left">
							{{ render "molecules/forms/form-option" inputType="radio" inputName="interest-group" inputId="etf-strategist" labelText="ETF Strategist" inputClasses="form-field" inputValidators="data-vl-errors-messages-disabled required" }}
						</div>
					</div>
					<div class="row">
						<div class="col-xl-6 col-lg-12 no-padding-left">
							{{ render "molecules/forms/form-option" inputType="radio" inputName="interest-group" inputId="market-maker" labelText="Market Maker" inputClasses="form-field" inputValidators="data-vl-errors-messages-disabled required" }}
						</div>
						<div class="col-xl-6 col-lg-12 no-padding-left">
							{{ render "molecules/forms/form-option" inputType="radio" inputName="interest-group" inputId="institutional-investor" labelText="Institutional Investor" inputClasses="form-field" inputValidators="data-vl-errors-messages-disabled required" }}
						</div>
					</div>
				</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="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-email" 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 form__feedback no-padding" inputType="text" inputClasses="form__text form-field" }}

			{{ render "molecules/forms/form-group" inputId="password" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="Password*" containerClasses="col-xl-9 col-lg-8 col-sm-10 no-padding" inputType="password" inputClasses="form__text form-field" inputValidators="required data-vl-errors-messages-disabled" text=true textSmall="To complete to our standards, your password should consist of 6-8 characters, including at least one letter, one number and no spaces." }}

			{{ render "molecules/forms/form-group" inputId="confirm-password" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="Confirm Password*" containerClasses="col-xl-9 col-lg-8 col-sm-10 no-padding" inputType="password" inputClasses="form__text form-field" inputValidators="data-vl-trigger='keyup change' data-vl-equalto='#password' 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" }}

			{{ render "molecules/forms/form-group" inputId="street" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="Street*" 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="city" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="City*" containerClasses="col-xl-9 col-lg-8 col-sm-10 col-md-6 no-padding" inputType="text" inputClasses="form__text form-field" inputValidators="required data-vl-errors-messages-disabled" }}

			<div class="form__group">
				{{ render "molecules/forms/form-group:form__group--fake" inputId="house-number" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="Housenumber*" containerClasses="col-xl-4 col-lg-4 col-md-3 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="zip-code" labelClasses="form__label col-xl-2 col-lg-2 col-md-3 col-sm-10 no-padding-right" labelText="ZIP Code*" containerClasses="col-xl-3 col-lg-2 col-md-4 col-sm-10 no-padding" inputType="text" inputClasses="form__text form-field" inputValidators="required data-vl-errors-messages-disabled" }}
			</div>

			<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=18 }}
				</div>
			</div>

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

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