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

{% block stylesheets %}
{{ parent() }}

<link rel="stylesheet" href="{{ asset('public/css/contact.css') }}">
{% endblock %}

{% block javascriptHead %}
{{ parent() }}

<script src='https://www.google.com/recaptcha/api.js'></script>
{% endblock %}

{% block body %}
<div id="wrapper">
  <div id="container">
    <form name="formContact" method="POST" action="mailOK">
    <div class="row">
      <div class="col-sm-2"></div>
      <div class="col-sm-8" id="content">

        <div class="row" id="logo">
          <img
            src="{{ asset("public/img/logo-solution-location.png") }}"
            alt="Solution Location par Bonifay">
        </div>

        <div class="row" id="location-materiel">
          <H2>
            <img src="{{ asset('public/img/element-graphique.png') }}"><strong>
              NOUS CONTACTER</strong>
          </H2>
          <div class="row" style="text-align: left;">
            <div class="col-sm-2"></div>
            <div class="col-sm-4" style="text-align: right;">
              <p>
                <label for="nom">Votre nom : </label><br> <label
                  for="prenom">Votre prénom : </label><br> <label
                  for="societe">Votre société : </label><br> <label
                  for="tel">Votre téléphone : </label><br> <label
                  for="email">Votre email <span class="red">*</span>
                  :
                </label><br> <label for="message">Votre message <span
                  class="red">*</span> :
                </label>
              </p>
            </div>
            <div class="col-sm-4" style="text-align: left;">
              <p>
                <input type="text" name="nom"><br>
                <input type="text" name="prenom"><br>
                <input type="text" name="societe"><br>
                <input type="text" name="tel"><br>
                <input type="text" name="email" id="email" onchange="checkMail();"><br>
                <textarea name="message" id="message" rows="10" cols="50"></textarea>
              </p>
            </div>
            <div class="col-sm-2"></div>
          </div>
          
          <div style="width: 100%; text-align: center;">  
            <div class="g-recaptcha" data-sitekey="6LcrKnsUAAAAAFQDzWHqyNOBgYuGzVe9rPxvQXrU"></div>
          </div>

          <div>
            <span class="red">( * : champs obligatoires )</span>
          </div>
        </div>

        <div class="row" id="services">
          <div class="row">
            <span class="btn dark" onclick="checkForm();">envoyer le message</span>
            <div>&nbsp;</div>
          </div>

          <div class="row" id="listeServices">
            <div class="col-sm-4"></div>
            <div class="col-sm-5">
              <div id="copyright">
                © Tous droits réservés - 2017 <a
                  href="https://www.bonifay.fr" target="_blank">BONIFAY
                  SAS</a>
              </div>
            </div>
            <div class="col-sm-3"></div>
          </div>

        </div>

      </div>
      <div class="col-sm-2"></div>
    </div>
    </form>
  </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}

<script type="text/javascript" src="{{ asset('public/js/contact.js') }}"></script>
{% endblock %}