{% if redirect is defined %}
<script><!--
location = {{ redirect }};
//--></script>
{% else %}
<div id="social_login">
	<div id="login2" class="modal fade login-panel-bg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered">
			<div id="socialpanel" class="login-section socialpanel modal-content br-8 overflow-hidden">
				<div id="modalEditLoader" class="loader"></div>
				<button type="button" class="close" data-dismiss="modal" data-bs-dismiss="modal"><span aria-hidden="true">x</span></button>
				<div class="profile-card {{ provider|lower }}">
					<div class="profile-card-block">
						<span class="img-block"><img src="{{ photoURL }}"></span>
						<div class="socialusername">{{ name }}</div>
					</div>
				</div>
				<div id="socialloginField" class="row socialloginField modal-body">
					<div class="col-md-12">
						<div class="alert alert-social-info"><i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;{{ text_social_additional }}</div>
					</div>
					<div class="col-md-12" >
						<form id="sociallogin" autocomplete="off" action="#" novalidate method="post" enctype="multipart/form-data">
							<input type="hidden" name="country_code" id="input_country_code">
							<input type="hidden" name="provider" id="provider" value="{{ provider }}">
							{% for field,value in fields %}
							{% if value.custom_field is not defined %}
							{% if value.enabled and (value.type != 'checkbox') %}
							{% if field != 'customer_group_id' %}
							{% if field == 'firstname' or field == 'lastname' %}
							<div class="group-half group-{{ field == 'firstname' ? 'left' : 'right' }}">
								<div class="group regular-field filled" id="regular-field-{{ field }}">
									<input autocomplete="off" type="{{ value.type }}" id="input-{{ field }}" name="{{ field }}" value="{{ value.value }}" {{ value.maximum ? 'maxlength="'~value.maximum~'"' : '' }} class="inputMaterial{{ value.dependency ? ' dependent' : '' }}{{ value.numeric ? ' '~value.numeric : '' }}{{ value.is_mask ? ' mask' : '' }}{{ value.readonly ? ' readonly' : '' }}"{{ value.is_mask ? value.mask : '' }}{{ value.required ? ' required=""' : '' }}{{ value.readonly ? ' readonly=""' : '' }}>
									<label>{{ value.title }}
										<span class="{{ value.required ? 'required' : '' }}">
											{% if value.tooltip %}
												<span data-placement="right" data-toggle="tooltip" data-container="body" title="{{ value.tooltip }}" class="is_floating_tooltip"></span>
											{% endif %}
										</span>
									</label>
								</div>
							</div>
							{% else %}
							<div class="clearfix"></div>
							<div class="group regular-field" id="regular-field-{{ field }}">
								{% if value.type in ['text','password','email','tel'] %}
								<input autocomplete="off" type="{{ value.type }}" id="input-{{ field }}" {{ value.type == 'tel' and sociallogin_show_country_code ? 'data-phone-input-id="input-'~field~'-add" data-phone-dial-code-input="#input_country_code"' : '' }} name="{{ field }}" value="{{ value.value }}" {{ value.maximum ? 'maxlength="'~value.maximum~'"' : '' }} class="inputMaterial{{ value.dependency ? ' dependent' : '' }}{{ value.numeric ? ' '~value.numeric : '' }}{{ value.type == 'tel' and sociallogin_show_country_code ? ' iti--sap-tel-input' : '' }}{{ value.is_mask ? ' mask' : '' }}{{ (value.readonly and (provider not in ['Telegram', 'Reddit'])) ? (( value.type == 'email' and value.value is empty) ? '' : ' readonly') : '' }}"{{ value.is_mask ? value.mask : '' }}{{ value.required ? ' required=""' : '' }}{{ (value.readonly and (provider not in ['Telegram', 'Reddit'])) ? (( value.type == 'email' and value.value is empty) ? '' : ' readonly=""') : '' }}>
								{% if value.type == 'password' or value.type == 'confirm' %}
								<span class="form-{{ field }}-eye" data-target-input="#input-{{ field == 'password' ? 'password' : 'confirm' }}"></span>
								{% endif %}
								<label>{{ value.title }}
									<span class="{{ value.required ? 'required' : '' }}">
										{% if value.tooltip %}
										<span data-placement="right" data-toggle="tooltip" data-container="body" title="{{ value.tooltip }}" class="is_floating_tooltip"></span>
										{% endif %}
									</span>
								</label>
								{% endif %}
							</div>
							{% endif %}
							{% else %}
							{% if customer_groups is defined and customer_group_id is defined  %}
							<div id="regular-field-{{ field }}" class="form-group required" style="display: {{ customer_groups|length > 1 ? 'block' : 'none' }};">
								<label class="control-label" style="padding-left: 0px;">{{ value.title }}</label>
								<div>
									{% for customer_group in customer_groups %}
									<div><label class="pointer"><input type="radio" class="input-radio" name="customer_group_id" value="{{ customer_group.customer_group_id }}" {% if customer_group.customer_group_id == customer_group_id %}checked="checked"{% endif %}>{{ customer_group.name }}</label></div>
									{% endfor %}
								</div>
							</div>
							{% endif %}
							{% endif %}
							{% endif %}
							{% else %} 
							{% set custom_field = value %} 
							{% if custom_field.type == 'select' %}
							<div id="custom-field{{ custom_field.custom_field_id }}" class="group custom-field filled">
								<select name="custom_field[{{ custom_field.custom_field_id }}]" id="input-custom_field{{ custom_field.custom_field_id }}" class="inputMaterial">
									<option value="">{{ text_select }}</option>
									{% for custom_field_value in custom_field.custom_field_value %}
									{% if value_custom_field[custom_field['custom_field_id']] is defined and custom_field_value.custom_field_value_id == value_custom_field[custom_field['custom_field_id']] %} 
									<option value="{{ custom_field_value.custom_field_value_id }}" selected="selected">{{ custom_field_value.name }}</option>
									{% else %}
									<option value="{{ custom_field_value.custom_field_value_id }}">{{ custom_field_value.name }}</option>
									{% endif %}
									{% endfor %}
								</select>
								<label for="input-account-custom-field{{ custom_field.custom_field_id }}">
									{{ custom_field.name }} 
									<span class="fieldlabel {{ custom_field.required ? 'required' : '' }}">
										{% if custom_field.tips %} 
										<span data-placement="right" data-toggle="tooltip" data-container="body" title="{{ custom_field.tips }}" class="is_floating_tooltip"></span>
										{% endif %}
									</span>
								</label>
								<labelselect></labelselect>
							</div>
							{% elseif custom_field.type == 'radio' %}
							<div id="custom-field{{ custom_field.custom_field_id }}" class="form-group custom-field is{{ custom_field.type }}">
								<label class="control-label">{{ custom_field.name }} 
									<span class="fieldlabel {{ custom_field.required ? 'required' : '' }}">
										{% if custom_field.tips %}
										<span data-placement="right" data-toggle="tooltip" data-container="body" title="{{ field.tips }}" class="is_floating_tooltip"></span>
										{% endif %}
									</span>
								</label>
								<div id="input-custom_field{{ custom_field.custom_field_id }}">
									{% for custom_field_value in custom_field.custom_field_value %}
									<div class="">
										{% if value_custom_field[custom_field['custom_field_id']] is defined and custom_field_value.custom_field_value_id == value_custom_field[custom_field['custom_field_id']] %}
										<label class="pointer">
											<input class="input-radio" type="radio" name="custom_field[{{ custom_field.custom_field_id }}]" value="{{ custom_field_value.custom_field_value_id }}" checked="checked">
											{{ custom_field_value.name }}
										</label>
										{% else %}
										<label class="pointer">
											<input class="input-radio" type="radio" name="custom_field[{{ custom_field.custom_field_id }}]" value="{{ custom_field_value.custom_field_value_id }}">
											{{ custom_field_value.name }}
										</label>
										{% endif %}
									</div>
									{% endfor %}
								</div>
							</div>
							{% elseif custom_field.type == 'checkbox' %}
							<div id="custom-field{{ custom_field.custom_field_id }}" class="form-group custom-field is{{ custom_field.type }}">
								<label class="control-label">{{ custom_field.name }} 
									<span class="fieldlabel {{ custom_field.required ? 'required' : '' }}">
										{% if custom_field.tips %}
										<span data-placement="right" data-toggle="tooltip" data-container="body" title="{{ field.tips }}" class="is_floating_tooltip"></span>
										{% endif %}
									</span>
								</label>
								<div id="input-custom_field{{ custom_field.custom_field_id }}">
									{% for custom_field_value in custom_field.custom_field_value %}
									<div class="checkbox is_checkbox">
										{% if value_custom_field[custom_field['custom_field_id']] is defined and custom_field_value.custom_field_value_id in value_custom_field[custom_field['custom_field_id']] %}
										<label>
											<input class="input-checkbox" type="checkbox" name="custom_field[{{ custom_field.custom_field_id }}][]" value="{{ custom_field_value.custom_field_value_id }}" checked="checked">
											{{ custom_field_value.name }}
										</label>
										{% else %}
										<label>
											<input class="input-checkbox" type="checkbox" name="custom_field[{{ custom_field.custom_field_id }}][]" value="{{ custom_field_value.custom_field_value_id }}">
											{{ custom_field_value.name }}
										</label>
										{% endif %}
									</div>
									{% endfor %}
								</div>
							</div>
							{% elseif custom_field.type == 'text' %}
							<div id="custom-field{{ custom_field.custom_field_id }}" class="group custom-field">
								<input type="text" name="custom_field[{{ custom_field.custom_field_id }}]" value="{{ value_custom_field[custom_field['custom_field_id']] is defined ? value_custom_field[custom_field['custom_field_id']] : custom_field.value }}" {{ custom_field.maximum ? 'maxlength="'~custom_field.maximum~'"' : '' }} id="input-custom_field{{ custom_field.custom_field_id }}"{{ custom_field.is_mask ? custom_field.mask : '' }} class="inputMaterial {% if custom_field.isnumeric %} {{ numeric }}{% endif %}{{ custom_field.is_mask ? ' mask' : '' }}">
								<label for="input-account-custom-field{{ custom_field.custom_field_id }}">
									{{ custom_field.name }} 
									<span class="fieldlabel {{ custom_field.required ? ' required' : '' }}">
										{% if custom_field.tips %}
										<span data-placement="right" data-toggle="tooltip" data-container="body" title="{{ custom_field.tips }}" class="is_floating_tooltip"></span>
										{% endif %}
									</span>
								</label>
							</div>
							{% elseif custom_field.type == 'textarea' %}
							<div id="custom-field{{ custom_field.custom_field_id }}" class="group custom-field">
								<textarea name="custom_field[{{ custom_field.custom_field_id }}]" rows="5" id="input-custom_field{{ custom_field.custom_field_id }}" class="inputMaterial">{{ value_custom_field[custom_field['custom_field_id']] is defined ? value_custom_field[custom_field['custom_field_id']] : custom_field.value }}</textarea>
								<label for="input-account-custom-field{{ custom_field.custom_field_id }}">
									{{ custom_field.name }} 
									<span class="fieldlabel {{ custom_field.required ? ' required' : '' }}">
										{% if custom_field.tips  %}
										<span data-placement="right" data-toggle="tooltip" data-container="body" title="{{ custom_field.tips }}" class="is_floating_tooltip"></span>
										{% endif %}
									</span>
								</label>
							</div>
							{% elseif custom_field.type == 'file' %}
							<div id="custom-field{{ custom_field.custom_field_id }}" class="form-group custom-field is{{ custom_field.type }}">
								<label class="control-label">{{ custom_field.name }} 
									<span class="fieldlabel {{ custom_field.required ? 'required' : '' }}">
										{% if custom_field.tips %}
										<span data-placement="right" data-toggle="tooltip" data-container="body" title="{{ field.tips }}" class="is_floating_tooltip"></span>
										{% endif %}
									</span>
								</label>
								<button type="button" id="button-custom-field{{ custom_field.custom_field_id }}" data-file="{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
								<input type="hidden" name="custom_field[{{ custom_field.custom_field_id }}]" value="{{ value_custom_field[custom_field['custom_field_id']] is defined ? value_custom_field[custom_field['custom_field_id']] : custom_field.value }}" id="input-custom_field{{ custom_field.custom_field_id }}">
							</div>
							{% elseif custom_field.type == 'date' %}
							<div id="custom-field{{ custom_field.custom_field_id }}" class="group custom-field">
								<div class="input-group date">
									<input type="text" data-type="date" data-language="{{ language }}" name="custom_field[{{ custom_field.custom_field_id }}]" value="{{ value_custom_field[custom_field['custom_field_id']] is defined ? value_custom_field[custom_field['custom_field_id']] : custom_field.value }}" id="input-custom_field{{ custom_field.custom_field_id }}" class="inputMaterial">
									<label for="input-account-custom-field{{ custom_field.custom_field_id }}">
										{{ custom_field.name }} 
										<span class="fieldlabel {{ custom_field.required ? 'required' : '' }}">
										{% if custom_field.tips %}
										<span data-placement="right" data-toggle="tooltip" data-container="body" title="{{ custom_field.tips }}" class="is_floating_tooltip"></span>
										{% endif %}
										</span>
									</label>
									<span class="input-group-btn">
										<button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
									</span>
								</div>
							</div>
							{% elseif custom_field.type == 'time' %}
							<div id="custom-field{{ custom_field.custom_field_id }}" class="group custom-field">
								<div class="input-group time">
									<input type="text" data-type="time" data-language="{{ language }}" name="custom_field[{{ custom_field.custom_field_id }}]" value="{{ value_custom_field[custom_field['custom_field_id']] is defined ? value_custom_field[custom_field['custom_field_id']] : custom_field.value }}" id="input-custom_field{{ custom_field.custom_field_id }}" class="inputMaterial">
									<label for="input-account-custom-field{{ custom_field.custom_field_id }}">
										{{ custom_field.name }} 
										<span class="fieldlabel {{ custom_field.required ? 'required' : '' }}">
											{% if custom_field.tips %}
											<span data-placement="right" data-toggle="tooltip" data-container="body" title="{{ custom_field.tips }}" class="is_floating_tooltip"></span>
											{% endif %}
										</span>
									</label>
									<span class="input-group-btn">
										<button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
									</span>
								</div>
							</div>
							{% elseif custom_field.type == 'datetime' %}
							<div id="custom-field{{ custom_field.custom_field_id }}" class="group custom-field">
								<div class="input-group datetime">
									<input type="text" data-type="datetime" data-language="{{ language }}" name="custom_field[{{ custom_field.custom_field_id }}]" value="{{ value_custom_field[custom_field['custom_field_id']] is defined ? value_custom_field[custom_field['custom_field_id']] : custom_field.value }}" id="input-custom_field{{ custom_field.custom_field_id }}" class="inputMaterial">
									<label for="input-account-custom-field{{ custom_field.custom_field_id }}">
										{{ custom_field.name }} 
										<span class="fieldlabel {{ custom_field.required ? 'required' : '' }}">
											{% if custom_field.tips %}
											<span data-placement="right" data-toggle="tooltip" data-container="body" title="{{ custom_field.tips }}" class="is_floating_tooltip"></span>
											{% endif %}
										</span>
									</label>
									<span class="input-group-btn">
										<button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
									</span>
								</div>
							</div>
							{% endif %}
							<div class="clearfix"></div>
							{% endif %}
							{% endfor %}
							{% if display_newsletter %}
							<div class="form-group">
								<div class="checkbox is_checkbox">
									<label for="socialnewsletter"><input type="checkbox" class="input-checkbox" name="newsletter" value="1" id="socialnewsletter" checked="checked">{{ entry_newsletter }}</label>
								</div>
							</div>
							{% endif %}
							{% if text_agree %}
							<div id="agreesocialouter" class="form-group">
								<div class="checkbox is_checkbox">
									<label for="agreesocial"><input type="checkbox" class="input-checkbox" name="socialagree" value="1" id="agreesocial" checked="checked" style="display: none;">{{ text_agree }}</label>
								</div>
							</div>
							{% endif %}
							<div class="clearfix"></div>
							<div class="buttons">
								<input type="submit" value="{{ button_continue }}" id="button-social-register" data-loading-text="Loading..." class="btn btn-success width100">
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		{% if custom_css %}
		<style>
			{{ custom_css }}
		</style>
		{% endif %}
		{% if sociallogin_show_country_code %}
		<script async>
			var sapTelInputConfig = {{ config_tel_input }};
		</script>
		{% endif %}
	</div>
</div>
{% endif %}