{% extends 'frontend.html.twig' %}

{% block title %}Contact | {{ parent() }}{% endblock %}

{% block body %}
	{# <div id="banner" class="container-fluid">
		<iframe src="https://snazzymaps.com/embed/181494" width="100%" height="450px" style="border:none;"></iframe>
	</div> #}
	<div class="container">
		<div class="row">
			<div class="col-12">
				<h1 class="banner__title">Contact</h1>
			</div>
		</div>
	</div>
	<div class="container">
		<section>
			<div class="row">
				<div class="col-12">
					<p class="lead">{{ article_contact ? article_contact.content|raw }}</p>
				</div>
			</div>
			<div class="row mt-5">
				<div class="col-12 col-md-6 col-lg-5 order-2 order-md-1">
					{% for label, messages in app.flashes %}
						{% for message in messages %}
							<div id="alerte" class="alert-{{ label }} p-4">
								{{ message }}
							</div>
						{% endfor %}  
					{% endfor %}  
					{{ form_start(form, {'attr': {'id': 'formContact-1'}}) }}
						<div class="form-group">
							<label for="cms_contact_name">Nom *</label>
							{{ form_widget(form.name, {'attr': {'class': 'form-control', 'placeholder': ''}}) }}
							{{ form_errors(form.name) }}
						</div>
						<div class="form-group">
							<label for="cms_contact_email">Email *</label>
							{{ form_widget(form.email, {'attr': {'class': 'form-control', 'placeholder': ''}}) }}
							{{ form_errors(form.email) }}
						</div>
						<div class="form-group">
							<label for="cms_contact_phone">Téléphone</label>
							{{ form_widget(form.phone, {'attr': {'class': 'form-control', 'placeholder': ''}}) }}
							{{ form_errors(form.phone) }}
						</div>
						<div class="form-group">
							<label for="cms_contact_subject">Sujet *</label>
							{{ form_widget(form.subject, {'attr': {'class': 'form-control', 'placeholder': ''}}) }}
							{{ form_errors(form.subject) }}
						</div>
						<div class="form-group">
							<label for="cms_contact_message">Message *</label>
							{{ form_widget(form.message, {'attr': {'class': 'form-control', 'placeholder': ''}}) }}
							{{ form_errors(form.message) }}
						</div>
						<div class="form-group">
							<label for="files">Joindre un ou plusieurs fichiers</label>
							{{ form_widget(form.imageFile, {'attr': {'class': 'form-control', 'placeholder': ''}}) }}
            				{{ form_errors(form.imageFile) }}

						</div>
						<div class="form-group">
							<div class="custom-control custom-checkbox">
								<input type="checkbox" class="custom-control-input" id="customCheck4" value="1" name="Privacy" required>
								<label class="custom-control-label" for="customCheck4">
									Je déclare avoir pris
									connaissance et accepté les <a href="politique-de-confidentialite.html"
									target="_blank">Conditions liées à la Vie Privée</a>.
								</label>
							</div>
						</div>
						<div class="form-group">
							<input type="hidden" name="Check" value="" />
							<input type="submit" class="btn btn-primary btn-block" value="Envoyer">
						</div>
					{{ form_end(form) }}
				</div>
				<div class="col-12 col-md-5 col-lg-5 order-1 order-md-2 offset-md-1 offset-lg-2">
					<div class="row">
						<div class="col-12 d-flex align-items-center mb-5">
							<div class="fix-icon mr-4 text-center">
								<img src="https://www.federia.immo/dist/assets/img/icons/smartphone.svg" class="mt-1" />
							</div>
							<div>
								{{ resCompany ? resCompany.phone : '' }}
							</div>
						</div>
						<div class="col-12 d-flex align-items-center mb-5">
							<div class="fix-icon mr-4 text-center">
								<img src="https://www.federia.immo/dist/assets/img/icons/email.svg" class="mt-1" />
							</div>
							<div>
								<a href="mailto:{{ resCompany ? resCompany.email : '' }}">{{ resCompany ? resCompany.email : '' }}</a>
							</div>
						</div>
						<div class="col-12 d-flex align-items-start mb-5">
							<div class="fix-icon mr-4 text-center">
								<img src="https://www.federia.immo/dist/assets/img/icons/location-point.svg" class="mt-1" />
							</div>
							<div>
								<strong>{{ resCompany ? resCompany.name : '' }}</strong><br />
								{{ resCompany ? resCompany.addressStreet : '' }}, {{ resCompany ? resCompany.addressCity : '' }} ({{ resCompany ? resCompany.addressCountry : '' }})</address>
							</div>
						</div>
						<div class="col-12 d-flex align-items-center mb-5">
							<div class="fix-icon mr-4 text-center">
								<img src="https://www.federia.immo/dist/assets/img/icons/clock.svg" class="mt-1" />
							</div>
							<div>
								Le secrétariat de {{ resCompany ? resCompany.name : '' }} est accessible<br />
								du <strong>lundi</strong> au <strong>vendredi</strong> de <strong>9h</strong> à <strong>17h</strong>.
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
	<!-- Modal -->
	<div class="modal fade" id="accesModal" tabindex="-1" role="dialog" aria-labelledby="accesModalLabel"
		aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="accesModalLabel">Comment accèdez à nos bureaux ?</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<iframe
						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2525.4681534962106!2d4.586955015839167!3d50.72980537507721!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c3d7df4dfb7d6d%3A0x7c7afed10faf1e35!2sAvenue%20Pasteur%206%2C%201300%20Wavre!5e0!3m2!1sfr!2sbe!4v1567066860763!5m2!1sfr!2sbe"
						width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

					<ul class="nav nav-pills my-5" id="pills-tab" role="tablist">
						<li class="nav-item">
							<a class="nav-link active" id="pills-voiture-tab" data-toggle="pill"
								href="#pills-voiture" role="tab" aria-controls="pills-voiture"
								aria-selected="true">En voiture</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="pills-tec-tab" data-toggle="pill" href="#pills-tec" role="tab"
								aria-controls="pills-tec" aria-selected="false">En transport en commun</a>
						</li>
					</ul>
					<hr>
					<div class="tab-content mt-4" id="pills-tabContent">
						<div class="tab-pane fade show active" id="pills-voiture" role="tabpanel"
							aria-labelledby="pills-voiture-tab">
							<div class="row mt-3">
								<div class="col-12">
									<h4><b>Depuis Namur</b></h4>
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-2 p-0 text-center">
									<img class="nav-symbol" src="{{ asset('frontend/dist/assets/img/gps/autoroute.png') }}" alt="navigation gps">
								</div>
								<div class="col-10 pl-0">
									<p>Prendre la E411 en direction de Bruxelles</p>
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-2 p-0 text-center">
									<img class="nav-symbol" src="{{ asset('frontend/dist/assets/img/gps/sortie_droite.png') }}" alt="navigation gps">
								</div>
								<div class="col-10 pl-0">
									<p>Prendre sortie 5 en direction de BIERGES - CENTRE D'AFFAIRES WAVRE-NORD - RIXENSART - BIERGES</p>
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-2 p-0 text-center"><img class="nav-symbol"
										src="{{ asset('frontend/dist/assets/img/gps/gauche.png') }}" alt="navigation gps"></div>
								<div class="col-10 pl-0">
									<p>Rester sur la file de gauche pour continuer vers Chaussée des Collines/N257
									</p>
								</div>
							</div>

							<div class="row mt-3">
								<div class="col-2 p-0 text-center">
									<img class="nav-symbol" src="{{ asset('frontend/dist/assets/img/gps/rond-point.png') }}" alt="navigation gps">
								</div>
								<div class="col-10 pl-0">
									<p>Au rond-point, prendre la 2e sortie et continuer sur Chaussée des
										Collines/N257</p>
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-2 p-0 text-center"><img class="nav-symbol"
										src="{{ asset('frontend/dist/assets/img/gps/droite.png') }}" alt="navigation gps"></div>
								<div class="col-10 pl-0">
									<p>Prendre à droite sur Avenue Einstein</p>
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-2 p-0 text-center">
									<img class="nav-symbol" src="{{ asset('frontend/dist/assets/img/gps/rond-point.png') }}" alt="navigation gps">
								</div>
								<div class="col-10 pl-0">
									<p>Au rond-point, prendre la 1re sortie sur Avenue Pasteur</p>
								</div>
							</div>

							<div class="row mt-5">
								<div class="col-12">
									<h4><b>Depuis Bruxelles</b></h4>
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-2 p-0 text-center">
									<img class="nav-symbol" src="{{ asset('frontend/dist/assets/img/gps/autoroute.png') }}" alt="navigation gps">
								</div>
								<div class="col-10 pl-0">
									<p>Prendre E411 / A4 en direction de Namur</p>
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-2 p-0 text-center">
									<img class="nav-symbol" src="{{ asset('frontend/dist/assets/img/gps/sortie_droite.png') }}" alt="navigation gps">
								</div>
								<div class="col-10 pl-0">
									<p>Prendre la sortie 5 BIS - N257 - CENTRE D'AFFAIRES - WAVRE-NORD </p>
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-2 p-0 text-center">
									<img class="nav-symbol" src="{{ asset('frontend/dist/assets/img/gps/rond-point.png') }}" alt="navigation gps">
								</div>
								<div class="col-10 pl-0">
									<p>Au rond-point, prendre la 1re sortie</p>
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-2 p-0 text-center">
									<img class="nav-symbol" src="{{ asset('frontend/dist/assets/img/gps/droite.png') }}" alt="navigation gps">
								</div>
								<div class="col-10 pl-0">
									<p>Prendre à droite sur Chaussée des Collines/N257</p>
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-2 p-0 text-center">
									<img class="nav-symbol" src="{{ asset('frontend/dist/assets/img/gps/rond-point.png') }}" alt="navigation gps">
								</div>
								<div class="col-10 pl-0">
									<p>Au rond-point, prendre la 2e sortie et continuer sur Chaussée des
										Collines/N257</p>
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-2 p-0 text-center">
									<img class="nav-symbol" src="{{ asset('frontend/dist/assets/img/gps/droite.png') }}" alt="navigation gps">
								</div>
								<div class="col-10 pl-0">
									<p>Prendre à droite sur Avenue Einstein</p>
								</div>
							</div>
							<div class="row mt-3">
								<div class="col-2 p-0 text-center">
									<img class="nav-symbol" src="{{ asset('frontend/dist/assets/img/gps/rond-point.png') }}" alt="navigation gps">
								</div>
								<div class="col-10 pl-0">
									<p>Au rond-point, prendre la 1re sortie sur Avenue Pasteur</p>
								</div>
							</div>
						</div>
						<div class="tab-pane fade" id="pills-tec" role="tabpanel" aria-labelledby="pills-tec-tab">
							<div class="row">
								<div class="col-12 col-md-6">
									<h4><b>En bus depuis la gare d’Ottignies</b></h4>
									<p><em>Correspondance en gare avec les trains en provenance de Bruxelles et
											Namur</em></p>

									<p>Via la ligne : <b>22 Ottignies - Wavre - Zonning Nord </b></p>
								</div>
								<div class="col-12 col-md-6">
									<h4><b>En bus depuis Bruxelles</b></h4>

									<p>Via la ligne : <b>E Bruxelles - Wavre - Eghezée </b></p>
								</div>
							</div>

							<div class="alert alert-info mt-5" role="alert">
								<h4 class="alert-heading">Infos</h4>
								<a href="https://www.infotec.be/fr-be/medeplacer.aspx" target="_blank">Horaires et
									lignes de bus</a>
								<hr>
								<a href="https://www.infotec.be/fr-be/medeplacer/rechercheditinéraire.aspx"
									target="_blank">Recherche d'itinéraire train/bus</a>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
				</div>
			</div>
		</div>
	</div>
{% endblock %}