{% extends 'base2.html.twig' %}
{% block body %}
		<div class="page-title-container">
			<div class="container">
				<div class="page-title pull-left">
					<h2 class="entry-title">Contactez-Nous</h2>
				</div>
				<ul class="breadcrumbs pull-right">
					<li><a href="{{ path('contact') }}">Accueil</a></li>
					<li class="active">Contactez-Nous</li>
				</ul>
			</div>
		</div>

	<section id="content">
	<div class="container">
		<div id="main">
			<div class="travelo-google-map block"></div>
			<div class="row">
				<div class="col-sm-4 col-md-3">
					<div class="travelo-box contact-us-box">
						<h4>Contactez-Nous</h4>
						<ul class="contact-address">
							<li class="address">
								<i class="soap-icon-address circle"></i>
								<h5 class="title">Addresse</h5>
								<p>Port-au-Prince, Haiti</p>
								<p>Angle Delmas 39 et Autoroute de Delmas</p>
							</li>
							<li class="phone">
								<i class="soap-icon-phone circle"></i>
								<h5 class="title">Telephones</h5>
								<p>Local: (+509)- 3424-2124</p>
								<p>Mobile:(+509)- 4159-4747</p>
							</li>
							<li class="email">
								<i class="soap-icon-message circle"></i>
								<h5 class="title">Email</h5>
								<p>info@2kbeslotto.com</p>
								<p>www.2kbeslotto.com</p>
							</li>
						</ul>
						<ul class="social-icons full-width">
							<li><a href="#" data-toggle="tooltip" title="Twitter"><i class="soap-icon-twitter"></i></a></li>
							<li><a href="#" data-toggle="tooltip" title="GooglePlus"><i class="soap-icon-googleplus"></i></a></li>
							<li><a href="#" data-toggle="tooltip" title="Facebook"><i class="soap-icon-facebook"></i></a></li>
							<li><a href="#" data-toggle="tooltip" title="Linkedin"><i class="soap-icon-linkedin"></i></a></li>
							<li><a href="#" data-toggle="tooltip" title="Vimeo"><i class="soap-icon-vimeo"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="col-sm-8 col-md-9">
					<div class="travelo-box">
                        <form class="comment-form" action="{{ path('contact') }}" method="post">
							<h4 class="box-title">Laissez-nous un message</h4>
                            {{ form_start(form) }}
							<div class="alert small-box" style="display: none;">
                                {{ form_errors(form) }}
                            </div>
							<div class="row form-group">
								<div class="col-xs-6">
                                    {{ form_label(form.name, 'VOTRE NOM') }}
                                    {{ form_errors(form.name) }}
                                    {{ form_widget(form.name, {'label':'<i class="fa fa-user"></i>','attr': {'class': 'input-text full-width'}}) }}
                                </div>
								<div class="col-xs-6">
                                    {{ form_label(form.email, 'VOTRE EMAIL') }}
                                    {{ form_errors(form.email) }}
                                    {{ form_widget(form.email, {'label':'<i class="fa fa-email"></i>','attr': {'class': 'input-text full-width'}}) }}
									<input type="text" name="email" class="input-text full-width">
								</div>
							</div>
							<div class="form-group">
                                {{ form_label(form.message, 'VOTRE MESSAGE ') }}
                                {{ form_errors(form.message) }}
                                {{ form_widget(form.message, {'label':'<i class="fa fa-email"></i>','attr': {'class': 'input-text full-width','placeholder':'Ecrivez ici votre message','row':'6'}}) }}
							</div>
                            <button type="submit" class="btn-large full-width">SEND MESSAGE</button>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	</section>

	<script type='text/javascript' src="{{ asset('http://maps.google.com/maps/api/js?sensor=false&amp;language=en')}}"></script>
	<script type="text/javascript">
        tjq(".travelo-google-map").gmap3({
            map: {
                options: {
                    center: [48.85661, 2.35222],
                    zoom: 12
                }
            },
            marker:{
                values: [
                    {latLng:[48.85661, 2.35222], data:"Paris"}

                ],
                options: {
                    draggable: false
                },
            }
        });
	</script>
{% endblock %}