{% block page %}
	<section id="contact" class="contact gray-bg">
		<h1>{{ page.name }}</h1>
		<div class="container">
			{% block title %}
				<div class="row os-animation text-center" data-os-animation="fadeInUp">
					<div class="col-xxs-12 title-text">
						<h2 class="title">{{ page.name }}</h2>
					</div>
				</div>
			{% endblock %}
			{% block contents %}
				<div class="row contact-info os-animation" data-os-animation="fadeInUp">
					<div class="col-sm-6">
					
						{% block contact_contents_contacts %}
							{% if site.addr_street and site.addr_city %}
								<div class="head">
									<h3><i class="fa fa-map-marker"></i> {{ out.other }}</h3>
									<p class="description content contact-text address">
										{{ site.addr_street }}<br>
										{{ site.addr_city }}.
									</p>
								</div>
							{% else %}
								<div class="head">
									<h3><i class="fa fa-map-marker"></i> {{ out.other }}</h3>
								</div>
							{% endif %}
							
							<ul class="icon-list">
								
								{% if site.phone %}
									<li><i class="fa fa-phone"></i> {{ out.phone }}: {{ site.phone }}</li>
									<li class="divider"></li>
								{% endif %}
								
								{% if site.cellphone %}
									<li><i class="fa fa-mobile"></i> {{ out.cellphone }}: {{ site.cellphone }}</li>
									<li class="divider"></li>
								{% endif %}
								
								{% if site.fax %}
									<li><i class="fa fa-print"></i> {{ out.fax }}: {{ site.fax }}</li>
									<li class="divider"></li>
								{% endif %}
								
								<li><i class="fa fa-envelope-o"></i> {{ text.misc.email }}: {{ site.email }}</li>
								
								{% if site.skype %}
									<li class="divider"></li>
									<li><i class="fa fa-skype"></i> {{ site.skype }}</li>
								{% endif %}
								
							</ul>
						{% endblock %}

						{% 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 %}
									<p></p>
									<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>
					
					<div class="col-sm-6">
						{% block form %}
							<h3><i class="fa fa-envelope-o"></i> {{ page.name }}</h3>
							<div class="form-group">
								<form id="contact-form" method="post" action="contact.php" enctype="application/x-www-form-urlencoded">
									{% block form_content %}
										<label>{{ out.name }} *</label>
										<input type="text" id="name" name="contact[name]" class="form-control" required>
										<label>{{ text.misc.email }} *</label>
										<input type="text" id="email" name="contact[email]" class="form-control" required>
										<label>{{ out.subject }} *</label>
										<input type="text" id="subject" name="contact[subject]" class="form-control" required>
										<label>{{ out.message }} *</label>
										<textarea id="message" name="contact[message]" class="form-control" required></textarea>
										{% if site.contact_captcha %}
											<label>{{ out.captcha }}: <span id="captcha_question">{{ captcha() | raw }}</span> *</label>
											<input id="captcha" name="contact[captcha]" class="form-control" type="text" required>
										{% endif %}
										{% block _ext_data_form_content_consent %}{% endblock %}
										<button id="submit-mail" class="small-button text-left">{{ out.send | upper }}</button>
									{% endblock %}
								</form>
								<div id="contact-form-message"></div>
							</div>
							<div id="success"></div>
						{% endblock form %}
					</div>
				</div>
			{% endblock contents %}
		</div>
	</section>

	{% if site.google_maps %}
		{% block google_maps %}
			<section class="map">
				<h1>{{ out.find_us }}</h1>
				{% block google_maps_content %}
					<div class="map-overlay">
						<button class="map-button" value="{{ out.find_us }}">{{ out.find_us }}</button>
					</div>
					<div id="googlemap">
						<div id="map" data-ll="{{ site.google_maps.ll }}" data-zoom="{{ site.google_maps.z ?: 16 }}"></div>
					</div>
				{% endblock google_maps_content %}
			</section>
		{% endblock google_maps %}
	{% endif %}
{% endblock page %}