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

{% block content %}

 <div id="contact" class="contact-us section pb-5 mb-5" id="top">
    <div class="container">

        <div class="row">
            <div class="col">
                <div class="section-heading">
                    <h2> {% trans %}Contact us {% endtrans %} <em>{% trans %}now{% endtrans %}</em></h2>
                </div>
            </div>
        </div>

      <div class="row">
        <div class="col-lg-6">
          <div class="section-heading">
            <div id="map">
              {# <iframe src="#" width="100%" height="360px" frameborder="0" style="border:0" allowfullscreen=""></iframe> #}
              <img style="border:none; width:100%; margin:0 auto; display:block;" height="650px" allowfullscreen src="/viewer/assets/images/images_2.jpg">
            </div>
            <!--div class="info">
              <span><i class="fa fa-phone"></i> <a href="#">010-020-0340<br>090-080-0760</a></span>
              <span><i class="fa fa-envelope"></i> <a href="#">info@company.com<br>mail@company.com</a></span>
            </div-->
          </div>
        </div>
        <div class="col-lg-6 align-self-center form-contact">
          <form id="contact" action="#" method="post">
            <div class="row">
              <div class="col-lg-12">
                <fieldset>
                  <input type="nom" name="nom" id="nom" placeholder="{{ "Name..." | trans }}" autocomplete="false" required>
                </fieldset>
              </div>
            
              <div class="col-lg-12">
                <fieldset>
                  <input type="email" name="email" id="email" pattern="[^ @]*@[^ @]*" placeholder="{{ "E-mail address" | trans }}" required="">
                </fieldset>
              </div>

              <div class="col-lg-12">
                <fieldset>
                  <input type="telephone"  name="telephone" id="telephone" placeholder="{{ "Phone number" | trans }}" autocomplete="on" required>
                </fieldset>
              </div>

            
              <div class="col-lg-12">
                <fieldset>
                  <select type="text" name="pays" id="pays"  required="">
                  <option value="" selected disabled>{% trans %}Countries{% endtrans %}</option>
                {#   {% for item in pays %}
                    <option value="{{item.id}}">{{item.nom}}</option>
                  {% endfor %} #}
                  
                  </select>
                </fieldset>
              </div>

                <div class="col-lg-12">
                <fieldset>
                  <textarea type="text" name="commentaire" id="commentaire" placeholder="{{ "Comment..." | trans }}" required=""></textarea>
                </fieldset>
              </div>

            

              <div class="col-lg-12">
                <fieldset>
                  <select type="text" name="website" id="website" placeholder="Your Website URL" required="">
                  <option value="" selected disabled> {% trans %} How did you hear about us ?{% endtrans %}</option>
                  <option value="un amis">{% trans %}By a friend{% endtrans %}</option>
                  <option value="les reseaux sociaux">{% trans %}On social networks{% endtrans %}</option>
                  <option value="autres">{% trans %}Others{% endtrans %}</option>
                  </select>
                </fieldset>
              </div>


                <div class="col-lg-12">
                <fieldset>
                  <button type="submit" id="contact-submit" class="btn btn-info float-right" > <span id="btn-text">{% trans %}Submit{% endtrans %}</span>
                  <span id="btn-img">
                    <img src="/viewer/assets/image/spinner.svg" style="width:30px;height:30px" />
                    <img src="/viewer/assets/image/spinner.svg" style="width:30px;height:30px" />
                  </span>
                  </button>
                </fieldset>
              </div>

            </div>
          </form>
        </div>
      </div>
    </div>


</div>

{% endblock %}

{%  block script %}
<script type="text/javascript">
    $(document).ready(function(){
        const page = "contactus";
        HomeController.init(page);
    })
</script>
{%  endblock %}