{% extends "base.html.twig" %}
{% block body %}
<!-- Page Title -->
<section class="page-title" style="background-size: cover;background-image: url(/frontend/images/services/home-testi-bg.jpg);" data-bs-theme="dark">
<div class="container">
<div class="page-title-row">
<div class="page-title-content">
<h1>Contact</h1>
<span>Contactez nous</span>
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="{{ path('frontend_index') }}">Acceuil</a>
</li>
<li class="breadcrumb-item active" aria-current="page">Contact</li>
</ol>
</nav>
</div>
</div>
</section>
<!-- .page-title end -->
<!-- Content -->
<section id="content">
<div class="content-wrap">
<div class="container">
<div
class="row align-items-stretch col-mb-50 mb-0">
<!-- Contact Form -->
<div class="col-lg-6">
<div class="fancy-title title-border">
<h3>Envoyez-nous un courriel</h3>
</div>
<div class="form-widget">
<div class="form-result"></div>
<form class="mb-0" id="template-contactform" name="template-contactform" action="{{ path('frontend_contact_add')}}" method="post">
<div class="form-process">
<div class="css3-spinner">
<div class="css3-spinner-scaler"></div>
</div>
</div>
{{form_start(form)}}
<div class="row">
<div class="col-md-4 form-group">
<label for="template-contactform-name">Nom
<small>*</small>
</label>
{{ form_row(form.name) }}
</div>
<div class="col-md-4 form-group">
<label for="template-contactform-email">E-mail
<small>*</small>
</label>
{{ form_row(form.email) }}
</div>
<div class="col-md-4 form-group">
<label for="template-contactform-phone">Téléphone</label>
{{ form_row(form.phone) }}
</div>
<div class="w-100"></div>
<div class="col-md-12 form-group">
<label for="template-contactform-subject">Sujet
<small>*</small>
</label>
{{ form_row(form.subject) }}
</div>
<div class="w-100"></div>
<div class="col-12 form-group">
<label for="template-contactform-message">Message
<small>*</small>
</label>
{{ form_row(form.message) }}
</div>
{{form_end(form)}}
<div class="col-12 form-group">
<button name="submit" type="submit" id="submit-button" tabindex="5" value="Submit" class="button button-3d m-0">Envoyer</button>
</div>
</div>
<input type="hidden" name="prefix" value="template-contactform-">
</form>
</div>
</div>
<!-- Contact Form End -->
<!-- Google Map -->
<div class="col-lg-6 min-vh-80">
<section class="gmap slider-parallax vh-70" data-zoom="11" data-address="Solibikes Parc vélo solidaire, Djerba" data-markers='[
{title:"Solibikes Parc vélo solidaire",address: "Solibikes Parc vélo solidaire, Djerba HoumtSouk", html: jQuery("#map-marker-1").html(), icon:{ image: "/frontend/images/icons/map-icon-red.png", iconsize: [32, 39], iconanchor: [32,39] } },{address: "Association Mezraya, Djerba HoumtSouk", html: jQuery("#map-marker-1").html(), icon:{ image: "/frontend/images/icons/map-icon-red.png", iconsize: [32, 39], iconanchor: [32,39] } },{address: " Bureau Srandi association Djerba, Srandi association", html: jQuery("#map-marker-1").html(), icon:{ image: "/frontend/images/icons/map-icon-red.png", iconsize: [32, 39], iconanchor: [32,39] } },{address: " Jardin Toumana Djerba, Jardin Toumana Djerba", html: jQuery("#map-marker-1").html(), icon:{ image: "/frontend/images/icons/map-icon-red.png", iconsize: [32, 39], iconanchor: [32,39] } },]'></section>
</div>
<!-- Google Map End -->
</div>
<div class="fancy-title title-border title-center mb-5">
<h4 id="explore-more-elements" class="h3" data-onepage-settings="{"offset":60,"speed":1250,"easing":false}">
<a href="icons.html" class="btn btn-warning btn-lg ">Nos points de relais<i class="bi-arrow-right ms-2" style="position: relative; top: 1px;"></i>
</a>
</h4>
</div>
<!-- Contact Info -->
<div class="row col-mb-50">
{% for agency in agencies %}
<div class="col-sm-6 col-lg-3">
<div class="feature-box fbox-center fbox-bg fbox-plain" style="padding: 0 0rem 2rem;">
<div class="fbox-icon">
<img src="{{ asset('uploads/') ~ agency.logo }}" alt="{{ agency.title }}" class="rounded-2 h-100 object-cover">
</div>
<div class="fbox-content">
<h3>{{agency.title}}<span class="subtitle">{{agency.address}}</span>
<span class="subtitle">{{agency.email}}</span>
<span class="subtitle">{{agency.phone}}</span>
</h3>
</div>
</div>
</div>
{% endfor %}
</div>
<!-- Contact Info End -->
</div>
</div>
</section>
<!-- #content end -->
{% endblock %}
{% block javascripts %}
<script src="{{ asset('frontend/js/plugins.flexslider.js') }}"></script>
<script src="{{ asset('frontend/js/plugins.form.js') }}"></script>
{% endblock %}