{% block page %}
<section id="contact" class="contact container-fluid section">
	{% block title %}
		<header class="title mobile-center">
			<h1>{{ page.name }}</h1>
			<h2 class="text-center">{{ page.name }}</h2>
		</header>
	{% endblock %}

	{% if site.google_maps %}
		{% block google_maps %}
			<div class="map">
				{% block google_maps_content %}
					<div id="map" data-ll="{{ site.google_maps.ll }}" data-zoom="{{ site.google_maps.z ?: 16 }}"></div>
				{% endblock google_maps_content %}
			</div>
		{% endblock google_maps %}
	{% endif %}
	
	<div class="container">
		<div class="row">
			{% block contact_contents_contacts %}
				<div class="col-sm-6 padding-top-80">
					<ul class="contact-list">
						{% if site.addr_street and site.addr_city %}
						<li>
							<i class="fa fa-fw fa-location-arrow"></i>
							<div>
								{{ out.find_us }}
								<span>{{ site.addr_street }}<br>{{ site.addr_city }}</span>
							</div>
						</li>
						{% endif %}
						
						{% for key, item in {
								'phone': {'icon': 'phone'},
								'phonecall': {'icon': 'phone'},
								'cellphone': {'icon': 'mobile'},
								'cellphonecall': {'icon': 'mobile'},
								'fax': {'icon': 'print'},
								'email': {'text': text.misc.email, 'icon': 'envelope-o'},
								'skype': {'icon': 'skype'}
							}
						%}
							{% if site[key] %}
								<li>
									<i class="fa fa-fw fa-{{ item.icon }}"></i> 
									<div> 
										{{ item.text ?: out[key] }}
										<span>{{ site[key] }}</span>
									</div>
								</li>
							{% endif %}
						{% endfor %}
						
					</ul>
					
					{% if site.facebook %}
						{% block facebook %}
							{% block facebook_script %}
								<script>
									(function($){
										$(window).load(function(){
											setTimeout(function(){
												(function(d, s, id) {
													var js, fjs = d.getElementsByTagName(s)[0];
													if (d.getElementById(id)) return;
													js = d.createElement(s); js.id = id;
													js.src = "//connect.facebook.net/pt_PT/sdk.js#xfbml=1&version=v2.5";
													fjs.parentNode.insertBefore(js, fjs);
												}(document, 'script', 'facebook-jssdk'));
											}, 2000);
										});
									})(jQuery);
								</script>
							{% endblock %}
							
							{% block facebook_content %}
								<div class="fb-page" data-href="{{ site.facebook }}" data-width="470" data-height="320" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false" data-show-posts="true">
									<div class="fb-xfbml-parse-ignore">
										<blockquote cite="{{ site.facebook }}"><a href="{{ site.facebook }}">{{ site.name }}</a></blockquote>
									</div>
								</div>
							{% endblock %}
						{% endblock %}
					{% endif %}
					
				</div>
			{% endblock %}
			{% block form %}
				<div class="col-sm-5 col-sm-push-1 padding-top-80">
					<section>
						<form id="contact-form" method="post" action="contact.php" enctype="application/x-www-form-urlencoded" class=" scrollme animateme" data-when="enter" data-from="1" data-to="0" data-opacity="0" data-scale="1.1">
							<input type="hidden" name="csrf_token" value="{{ SESSION.csrf_token }}"/>
							{% block form_content %}
								<label>{{ out.name }} *</label>
								<input type="text" id="name" name="contact[name]">
								
								<label>{{ text.misc.email }} *</label>
								<input type="text" id="email" name="contact[email]">
								
								<label>{{ out.subject }} *</label>
								<input type="text" id="subject" name="contact[subject]">
								
								<label>{{ out.message }} *</label>
								<textarea id="message" name="contact[message]" rows="5"></textarea>
								
								{% if site.contact_captcha %}
									<label>{{ out.captcha }}: <span id="captcha_question">{{ captcha() | raw }}</span> *</label>
									<input id="captcha" name="contact[captcha]" type="text">
								{% endif %}

								{% if site.show_privacy_policy %}
									<div style="display: flex">
    									<div style="margin-bottom: 15px;">
                							<label class="switch">
                                                <input type="checkbox" class="switch-input" id="privacy_policy" name="contact[privacy_policy]"><!--<i class="icon-play" required></i>-->
                                                <span class="switch-label" data-on="{{ out.yes }}" data-off="{{ out.no }}"></span>
                                                <span class="switch-handle"></span>
                                            </label>
                                            <div style="display: inline-block; margin-top: 5px; margin-left: 10px;">
                								{{ out.accept }} <a href="/privacy/privacy_{{ constant('SITE_LANG') }}.html?lightbox[height]=60p&lightbox[width]=50p&page=website" class="lightbox" rel="nofollow"><b>{{ out.privacy_policy_text }}</b></a>
                                            </div>
                						</div>
            						</div>
								{% endif %}
								<div style="display: flex">
        							<div style="display: inline-block">
            							<label class="switch">
                                            <input type="checkbox" class="switch-input" id="marketing_publicity" name="contact[marketing_publicity]" required>
                                                <span class="switch-label" data-on="{{ out.yes }}" data-off="{{ out.no }}"></span>
                                                <span class="switch-handle"></span>
                                        </label>
        							</div>
                                    <div style="display: inline-block; margin-top: -5px; margin-left: 10px;">{{ out.marketing }}</div>
        						</div>
								
								{% block _ext_data_form_content_consent %}{% endblock %}
								
								<input id="submit-mail" type="submit" value="{{ out.send | upper }}" class="btn btn-default">
							{% endblock %}
							<div id="contact-form-message"></div>
						</form>
						<div id="success"></div>
					</section>
				</div>
			{% endblock form %}
		</div>
	</div>
</section>
{% endblock page %}