<script>
if (typeof jQuery !== 'undefined' && jQuery.isReady) {
	{% for script in scripts %}
	if (!$("script[src='{{ script }}']").length) {
		jQuery.getScript('{{ script }}');
	}
	{% endfor %}
	{% for style in styles %}
	if (!$("link[href='{{ style }}']").length) {
		jQuery("head").append('<link href="' + '{{ style }}' + '" rel="stylesheet"/>');
	}
	{% endfor %}
}
</script>

<div id="social_login">
	<div id="login" 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="loginPage" class="login-section modal-content br-8 overflow-hidden">
				<div id="modalEditLoader" class="loader"></div>
				<div id="login-tabs" class="tabbable">
					<ul class="nav nav-tabs">
						<li class="login-step active">
							<a data-target="#panel-countrycode" data-toggle="tab">{{ text_countrycode }}</a>
						</li>
					</ul>
				</div>
				<div class="tab-content">
					<div class="tab-pane active" id="panel-countrycode"> 
						<div class="row">
							<div class="col-md-12">
								<form id="form_countrycode" action="#" autocomplete="off" method="post" novalidate enctype="multipart/form-data">
									<input type="hidden" name="country_code" id="input_country_code">              
									<div id="login-panel">
										{% if display_old and telephone is not empty %}
										{{ text_countrycode_sub_null_tel }}
										<div class="group">
											<input type="text" name="old_telephone" value="{{ telephone }}" disabled readonly class="inputMaterial disabled readonly">
											<label for="telephone">{{ text_countrycode_oldtelephone_label }}</label>
										</div>
										{% else %}
										{{ text_countrycode_sub_tel }}
										{% endif %}
										<div class="group" id="regular-field-telephone">
											<input type="{{ type }}"{{ sociallogin_show_country_code ? ' data-phone-input-id="input-telephone-code" data-phone-dial-code-input="#input_country_code"' : '' }} name="telephone" id="input-telephone" {{ maximum ? 'maxlength="' ~ maximum ~ '"' : '' }} class="inputMaterial{{ numeric ? ' numeric' : '' }}{{ is_mask ? ' mask' : '' }}{{ sociallogin_show_country_code ? ' iti--sap-tel-input' : '' }}"{{ is_mask ? mask : '' }} required>
											<label for="telephone">{{ telephone_title }}
												<span class="required">
												{% if tooltip %}
													<span data-placement="right" data-toggle="tooltip" data-container="body" title="{{ tooltip }}" class="is_floating_tooltip"></span>
												{% endif %}
												</span>
											</label>
										</div>
										<div class="buttons">
											<input type="submit" value="{{ button_submit }}" id="button-country-code" data-loading-text="Loading..." class="btn btn-success width100">
										</div>
									</div>
								</form>
							</div>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	{% if sociallogin_show_country_code %}
	<script async>
		var sapTelInputConfig = {{ config_tel_input }};
	</script>
	{% endif %}
	<script>
		$('[data-toggle="tooltip"]').tooltip();
		$(function () {
			$('[data-toggle="tooltip"]').tooltip();
		})
	</script>
</div>