{% extends "base.html" %}
{% load i18n static %}

{% block head--extension %}
  <script>
    function initMapContact() {
      // Map style
      let styles = [
          {
              "featureType": "all",
              "elementType": "labels",
              "stylers": [
                  {
                      "visibility": "on"
                  }
              ]
          },
          {
              "featureType": "all",
              "elementType": "labels.text.stroke",
              "stylers": [
                  {
                      "visibility": "on"
                  },
                  {
                      "weight": "0.50"
                  }
              ]
          },
          {
              "featureType": "administrative.land_parcel",
              "elementType": "geometry.stroke",
              "stylers": [
                  {
                      "saturation": "1"
                  }
              ]
          },
          {
              "featureType": "landscape.man_made",
              "elementType": "geometry",
              "stylers": [
                  {
                      "color": "#f6efe2"
                  }
              ]
          },
          {
              "featureType": "landscape.natural",
              "elementType": "geometry",
              "stylers": [
                  {
                      "color": "#d0e3b4"
                  }
              ]
          },
          {
              "featureType": "landscape.natural.terrain",
              "elementType": "geometry",
              "stylers": [
                  {
                      "visibility": "off"
                  }
              ]
          },
          {
              "featureType": "poi",
              "elementType": "labels",
              "stylers": [
                  {
                      "visibility": "off"
                  }
              ]
          },
          {
              "featureType": "poi.business",
              "elementType": "all",
              "stylers": [
                  {
                      "visibility": "off"
                  }
              ]
          },
          {
              "featureType": "poi.medical",
              "elementType": "geometry",
              "stylers": [
                  {
                      "color": "#fbd3da"
                  }
              ]
          },
          {
              "featureType": "poi.park",
              "elementType": "geometry",
              "stylers": [
                  {
                      "color": "#bde6ab"
                  }
              ]
          },
          {
              "featureType": "road",
              "elementType": "geometry.stroke",
              "stylers": [
                  {
                      "visibility": "off"
                  }
              ]
          },
          {
              "featureType": "road",
              "elementType": "labels",
              "stylers": [
                  {
                      "visibility": "off"
                  }
              ]
          },
          {
              "featureType": "road",
              "elementType": "labels.text",
              "stylers": [
                  {
                      "visibility": "on"
                  }
              ]
          },
          {
              "featureType": "road.highway",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "color": "#ffe15f"
                  }
              ]
          },
          {
              "featureType": "road.highway",
              "elementType": "geometry.stroke",
              "stylers": [
                  {
                      "color": "#efd151"
                  }
              ]
          },
          {
              "featureType": "road.arterial",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "color": "#ffffff"
                  }
              ]
          },
          {
              "featureType": "road.local",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "color": "black"
                  }
              ]
          },
          {
              "featureType": "transit",
              "elementType": "labels",
              "stylers": [
                  {
                      "visibility": "off"
                  }
              ]
          },
          {
              "featureType": "transit.station.airport",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "color": "#cfb2db"
                  }
              ]
          },
          {
              "featureType": "water",
              "elementType": "geometry",
              "stylers": [
                  {
                      "color": "#a2daf2"
                  }
              ]
          }
      ];


      // Init map search municipalities
      const myLatlng = { lat: 50.654059675740285, lng: 5.56608953303436  };

      // Init map contact
      if (document.getElementById("map__contact")) {
        try{
          const commerceLatlng = {
            lat: 50.642440,
            lng: 5.566179
          };
          const mapContact = new google.maps.Map(document.getElementById("map__contact"), {
            zoom: 15,
            center: commerceLatlng,
            styles: styles,
          });
          // Create marker.
          let marker = new google.maps.Marker({
            position: commerceLatlng,
            map: mapContact,
            icon: "/static/img/house-map.svg"
          });
        } catch (error) {
          console.log(error);
        }
      }
    }
  </script>
{% endblock %}

{% block header %}
    {% include 'frags/header.html' %}
{% endblock%}

{% block content %}
<!--debut bloc content-->
{% include 'frags/search_full.html' %}

<div class="contact column column--spaced">
    <section class="contact--form wrapper--full wrapper--centered">
        <h1 class="title__big">Nous contacter</h1>

        <p>Vous avez une question à nous poser, ou vous souhaitez en savoir plus sur nous&nbsp;? N’hésitez pas à nous envoyer un message &nbsp;!</p>

        <form class="contact__form section" method="post">
            {% csrf_token %}

            <div class="column column--spaced">
                <div class="contact__form--el">
                    <label class="field__label">Nom</label>
                    {% include "frags/form_inputs.html" with form_input=form.lastname input_placeholder=_("Votre nom") input_class="field field--full" %}
                </div>

                <div  class="contact__form--el">
                    <label class="field__label">Prénom</label>
                    {% include "frags/form_inputs.html" with form_input=form.firstname input_placeholder=_("Votre prénom") input_class="field field--full" %}
                </div>
            </div>

            <div class="column column--spaced">
                <div class="contact__form--el">
                    <label class="field__label">E-mail</label>
                    {% include "frags/form_inputs.html" with form_input=form.mail input_placeholder=_("Votre adresse email") input_class="field field--full" %}
                </div>

                <div class="contact__form--el">
                    <label class="field__label">Téléphone</label>
                    {% include "frags/form_inputs.html" with form_input=form.phone input_placeholder=_("Votre numéro de téléphone") input_class="field field--full" %}
                </div>
            </div>

            <div>
                <label class="field__label">Message</label>
                {% include "frags/form_inputs.html" with form_input=form.text input_placeholder=_("Votre message") input_class="field field--full" %}
            </div>

            <input  class="btn btn__new" type="submit" value="Envoyer mon message">

        </form>
    </section>

    <section class="contact--map">
        <div id="map__contact"></div>
        <div>
            <div class="contact__infos">
                <h2 class="contact__infos--title">Développé en Belgique,<br>pour toutes les Communes belges</h2>

                <div>
                    <p>0479 85 36 35</p>
                    <p>[email protected]</p>
                </div>

            </div>
        </div>
    </section>
</div>

<!--fin bloc content-->
{% endblock %}


{% block footer %}
    {% include 'frags/footer.html' %}
{% endblock %}

{% block javascript--map %}
  {% if not no_google_map_import %}
    <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZeLyGnq0WUCSRP9L53hvu8X4JSTcKE0w&callback=initMapContact&libraries=&v=weekly">
    </script>
  {% endif %}
{% endblock %}