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

{% block body %}
	<section class="section_header">
		<div class="section_header_text">
			<h2 class="white-text">Feel free to contact us</h2>
			<span class="white-text">for any questions or demands</span>
			<ul class="align-center">
				<li>
					<a href="">Home</a>
				</li>
				<li class="active white-text">Contact</li>
			</ul>
		</div>
	</section>

	<main class="bg-gray">
		<section id="contact_container" class="center">
			<div class="title">
				<h2>Drop us a line</h2>
				<p>Whether your needs, desires or wishes are urgent or a little less, they will all be taken care of with the some efficiency by us.</p>
			</div>

			{{ form_start(contactForm, {'attr': {'id': 'formContact', 'accept-charset': 'UTF-8', 'class':'light-gray-bg'}}) }}
			{% for message in app.flashes('success') %}
				<div class="success">
					{{ message }}
				</div>
			{% endfor %}
			<div class="input-field">
				<span style='color:red'>{{ form_errors(contactForm.firstname) }}</span>
				{{ form_widget(contactForm.firstname) }}
				{{ form_label(contactForm.firstname, 'Firstname') }}
			</div>

			<div class="input-field">
				<span style='color:red'>{{ form_errors(contactForm.lastname) }}</span>
				{{ form_widget(contactForm.lastname) }}
				{{ form_label(contactForm.lastname, 'Lastname') }}
			</div>

			<div class="input-field">
				<span style='color:red'>{{ form_errors(contactForm.email) }}</span>
				{{ form_widget(contactForm.email) }}
				{{ form_label(contactForm.email, 'Email') }}
			</div>

			<div class="input-field">
				<span style='color:red'>{{ form_errors(contactForm.phoneNumber) }}</span>
				{{ form_widget(contactForm.phoneNumber) }}
				{{ form_label(contactForm.phoneNumber, 'Phone number') }}
			</div>

			<div class="input-field textarea-field">
				<span style='color:red'>{{ form_errors(contactForm.message) }}</span>
				{{ form_widget(contactForm.message) }}
				{{ form_label(contactForm.message, 'Message') }}
			</div>

			<button type="submit" class="btn white-text">
				<span>send message</span>
			</button>

			{{ form_end(contactForm) }}

			<address>
				<i class="material-icons brand-color">&#xE55F;</i>
				<div class="address">
					<p>Luxury Services is based in Roanne, on Loire department</p>
				</div>
				<i class="material-icons brand-color">&#xE61C;</i>
				<div class="phone">
					<p>+33 (0) 6 60 06 66 00</p>
				</div>
				<i class="material-icons brand-color">&#xE916;</i>
				<div class="phone">
					<p>9 - 22h with 24/7 speaker</p>
				</div>
				<i class="material-icons brand-color">&#xE0E1;</i>
				<div class="mail">
					<p>
						<a href="#!">luxuryservices.com</a>
					</p>
				</div>
			</address>
		</section>

		<div id="myMap">
			<iframe sandbox="allow-scripts" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d89067.40005016368!2d4.765620231628416!3d45.76405021831941!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47f4ea516ae88797%3A0x408ab2ae4bb21f0!2sLyon!5e0!3m2!1sfr!2sfr!4v1703801255343!5m2!1sfr!2sfr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
		</div>

	</div>

</main>{% endblock %}