{% block page %}
	<section class="section contact" id="contact">
		<h1>{{ page.name }}</h1>
		<div class="content">
			{% block title %}<h2 class="header-text">{{ page.name }}</h2>{% endblock %}
			
			{% if site.google_maps %}
				{% block google_maps %}
					<script type="text/javascript" src="https://maps.google.com/maps/api/js?language={{ constant('SITE_LANG') }}{{ site.googlemaps_api_key ? '&key=' ~ site.googlemaps_api_key }}"></script>
					
					{% block google_maps_content %}
						<section id="map">
							<h1>Google Maps</h1>
						</section>
					{% endblock %}
					
					<script type="text/javascript">
						function mapinitialize() {
							{# // FIND YOUR LATITUDE & LONGITUDE  -> http://itouchmap.com/latlong.html
							//var myLatlng = new google.maps.LatLng(42.7051, -73.8994); #}
							
							{% if site.googlemaps_api_key %}
								var myLatlng = new google.maps.LatLng({{ site.google_maps.ll }});
								var myOptions = {
									zoom: {{ site.google_maps.z ?: 16 }},
									center: myLatlng,
									mapTypeId: google.maps.MapTypeId.ROADMAP
								}
								var map = new google.maps.Map(document.getElementById("map"), myOptions);

								var marker = new google.maps.Marker({
									position: myLatlng,
									map: map,
									title:"{{ site.name | escape('js') }}"
								});
							{% else %}
								var options = {
									zoom: {{ site.google_maps.z ?: 16 }},
									center: [{{ site.google_maps.ll }}],
									gestureHandling: true,
									gestureHandlingOptions: {
										duration: 1000,
										delay: 0,
										text: {
											touch: '{{ out.map.touch|e('js') }}',
											scroll: '{{ out.map.scroll|e('js') }}',
											scrollMac: '{{ out.map.scrollMac|e('js') }}'
										}
									}
								};
								
								var map = L.map(document.getElementById("map"), options);
					
								L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
									attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
								}).addTo(map);
								
								L.marker(options.center).addTo(map);
							{% endif %}
						}
						(function($){$(window).load(mapinitialize);})(jQuery);//mapinitialize();
					</script>
				{% endblock %}
			{% endif %}

			<div class="col-md-6 col-sm-6">
				{% if site.addr_street and site.addr_city %}
					<h3><i class="fa fa-map-marker"></i> {{ out.find_us }}</h3>
					<p><i class="fa fa-road"></i> {{ site.addr_street }}</p>
					<p><i class="fa fa-globe"></i> {{ site.addr_city }}</p>
				{% else %}
					<h3><i class="fa fa-map-marker"></i> {{ out.other }}</h3>
				{% endif %}
				
				{% if site.phone %}
					<p><i class="fa fa-phone"></i> {{ out.phone }}: {{ site.phone }}</p>
				{% endif %}
				
				{% if site.cellphone %}
					<p><i class="fa fa-mobile"></i> {{ out.cellphone }}: {{ site.cellphone }}</p>
				{% endif %}
				
				{% if site.fax %}
					<p><i class="fa fa-print"></i> {{ out.fax }}: {{ site.fax }}</p>
				{% endif %}
				
				<p><i class="fa fa-envelope-o"></i> {{ text.misc.email }}: {{ site.email }}</p>
				
				{% if site.skype %}
					<p><i class="fa fa-skype"></i> {{ site.skype }}</p>
				{% endif %}
				
				
				{% if site.facebook %}
					{% block facebook %}
						{% block facebook_script %}
							<script>
							(function($){
								$(window).load(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'));
								});
							})(jQuery);
							</script>
						{% endblock %}
						
						{% block facebook_content %}
							<div class="limitarbox">
								<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>
								
							</div>
						{% endblock %}
					{% endblock %}
				{% endif %}
			</div>

			<div id="contact-section" class="col-md-6 col-sm-6">
				{% block form %}
					<h3><i class="fa fa-envelope-o"></i>{{ page.name }}</h3>
					<form id="contact-form" method="post" action="contact.php" enctype="application/x-www-form-urlencoded">
						<input type="hidden" name="csrf_token" value="{{ SESSION.csrf_token }}"/>
						{% block form_content %}
							<input type="text" name="honeypot" style="display: none;">
							<div class="form-group">
								<label for="name">{{ out.name }} *</label>
								<input type="text" id="name" name="contact[name]" class="" />
							</div>
							<div class="form-group">
								<label for="name">{{ text.misc.email }} *</label>
								<input type="text" id="email" name="contact[email]" class="" />
							</div>
							<div class="form-group">
								<label for="name">{{ out.subject }} *</label>
								<input type="text" id="subject" name="contact[subject]" class="" />
							</div>
							<div class="form-group">
								<label for="name">{{ out.message }} *</label>
								<textarea id="message" name="contact[message]" cols="42" rows="7" class=""></textarea>
							</div>
							{% if site.contact_captcha %}
								<div class="form-group">
									<label for="name">{{ out.captcha }}: <span id="captcha_question">{{ captcha() | raw }}</span> *</label>
									<input type="text" id="captcha" name="contact[captcha]" class="" />
								</div>
							{% endif %}
							{% if site.show_privacy_policy %}
								<div style="display: flex">
								    <label class="switch">
                                        <input type="checkbox" class="switch-input" id="privacy_policy" name="contact[privacy_policy]">
                                        <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: 10px; 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>
							{% 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]">
                                        <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: 3px; margin-left: 10px;">{{ out.marketing }}</div>
							</div>
							{% block _ext_data_form_content_consent %}{% endblock %}
							<div class="form-group">
								<input type="button" id="submit-mail" class="submit-btn" value="{{ out.send | upper }}" />
							</div>
						{% endblock %}
					</form>
				{% endblock %}

				<div id="mail-message">
					<table>
						<tr>
							<td>
								<div id="mail-message-window">
									<div id="mail-message-header"><h3>{{ out.box.header.error | upper | raw }}</h3></div>
									<p id="mail-failure">{{ out.box.failure | raw }}</p>
									<p id="invalid-email">{{ out.box.invalid | raw }}</p>
									<p id="empty-field">{{ out.box.empty | raw }}</p>
									<p id="mail-success">{{ out.box.success | raw }}</p>
									<p id="wrong-captcha">{{ out.box.wrong_captcha | raw }}</p>
									<p id="privacy-not-checked">{{ out.box.not_checked | raw }}</p>
									<p id="ext-data-message-consentment-required">{{ out.box.ext.data.consentment | raw }}</p>
									<p id="spam-link">
										{{ out.box.spam.link.desc.top | raw }}
										<span id="spam-link-name">{{ out.box.spam.link.name | raw }}</span>
										<span id="spam-link-subject">{{ out.box.spam.link.subject | raw }}</span>
										<span id="spam-link-message">{{ out.box.spam.link.message | raw }}</span>
										{{ out.box.spam.link.desc.bottom | raw }}
									</p>
									<p id="spam-ip">{{ out.box.spam.ip }}</p>
									<p id="refresh">{{ out.box.refresh }}</p>
									<input type="button" id="mail-message-btn" class="mail-message-btn" value="{{ text.misc.ok | upper }}" />
								</div>
							</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
	</section>
{% endblock page %}