{% extends 'Front/layout.html.twig' %}

{% form_theme form with ['bootstrap_4_horizontal_layout.html.twig', 'Front/Form/fields.html.twig'] %}

{% set metatitle = maincontent.metatitle ? maincontent.metatitle : maincontent.menu %}
{% set metadescription = maincontent.metadescription? maincontent.metadescription: null %}
{% block metaOpengraph %}
    <meta property="og:url" content="{{ app.request.getSchemeAndHttpHost() ~ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}">
    <meta property="og:type" content="article">
    <meta property="og:locale" content="{{ app.request.locale }}">
    <meta property="og:image" content="{% if maincontent.picture != '' %}{{ app.request.getSchemeAndHttpHost() ~ asset(maincontent.getWebPath())|replace({' ':'%20'}) }}{% endif %}">
    <meta property="og:title" content="{{ maincontent.title }}">
    <meta property="og:description" content="{{ maincontent.article|striptags }}">
{% endblock %}

{% set bodyClass = maincontent.menu.class %}

{% block body %}
    <div class="row">
        <article class="content simplePage col">
            <div class="row">
                <div class="col-lg-6">
                    {{ maincontent.article|replace_custom_keys|raw }}
                </div>
                <div class="col-lg-6">
                    <div class="module module-inview-contact bg-alabaster pa">
                        {{ form_start(form, {'attr': {'id': 'formContact'}}) }}
                            <div 
                                id="recaptchaContact" 
                                class="g-recaptcha" 
                                data-sitekey="{{ google_recaptcha_public_key }}"
                                data-callback="contactCallback"
                                data-size="invisible"
                            ></div>
                            <fieldset class="">
                                <legend>{{ 'form.contact.form_title'|trans({}, 'form') }}</legend>
                                {% for msg in app.session.flashbag.get('contact_form_success') %}
                                    {% if loop.first %}
                                        <div class="alert alert-success">
                                    {% endif %}
                            
                                    <div class="notice">{{ msg }}</div>
                            
                                    {% if loop.last %}
                                        </div>
                                    {% endif %}
                                {% endfor %}
                                {% for msg in app.session.flashbag.get('contact_form_error') %}
                                    {% if loop.first %}
                                        <div class="alert alert-danger">
                                    {% endif %}
                            
                                    <div class="notice">{{ msg }}</div>
                            
                                    {% if loop.last %}
                                        </div>
                                    {% endif %}
                                {% endfor %}
                                {{ form_widget(form) }}
                            </fieldset>
                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </article>

        {% include "Front/_part/sidebar.html.twig" %}
    </div>
{% endblock %}

{% block before_body %} 
    {% set pageHeaderPicture = ( maincontent.picture ? asset(maincontent.getWebPath()) : null ) %}
    {% set pageHeaderTitle = maincontent.title %}
    {% set pageHeaderIntroduction = maincontent.introduction|replace_custom_keys|raw %}
    {% include "Front/_part/page-header.html.twig" %}
    {{ render(controller('AppBundle:Render:module', { position:'before_body' })) }}
{% endblock %}

{% block after_body %} 
<script src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_id }}"></script>
    <script>           
        var mapInfoWindow = new google.maps.InfoWindow({
                content : "...",
        });
        function mapcontact_initialize() {
            var gm_styles = '';

            var centerMap = new google.maps.LatLng({{ google_maps_cgenial_lat }}, {{ google_maps_cgenial_lng }} );
            
            var mapOptions = {
                zoom: 15,
                minZoom: 6,
                maxZoom: 18,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                // The latitude and longitude to center the map (always required)
                center: centerMap,
                disableDefaultUI: true
            };
            var map = new google.maps.Map(document.getElementById('gmap'),
                mapOptions);

            var markerCGenial = new google.maps.Marker({
                position: centerMap,
                map: map,
                title: '',
                icon: '{{ path('map_pee_marker', { 'type' : 'cgenial' }) }}',  // cgenial icon
            });
        }
         google.maps.event.addDomListener(window, 'load', mapcontact_initialize);
    </script>
     <div id="gmap" class="gmap"></div>
    {{ render(controller('AppBundle:Render:module', { position:'after_body' })) }}
{% endblock %}