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

{% block body %}
<section class="header-news">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ absolute_url(customPath('fo_home')) }}">{{'home'|trans}}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{'menu.news'|trans}}</li>
            </ol>
        </nav>
        <div class="header-news-wrapper">
            <div class="row">
                <div class="col-md-12">
                    {{'opinion.less_than_3'|trans|raw}}
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 offset-md-2">
                    <form method="POST" action="{{ absolute_url(customPath('fo_search_query')) }}" id="form-search" class="home-form-architect">
                        <div class="row">
                            <div class="col-md-8">
                                    <input type="text" class="form-control" placeholder="{{'form_search'|trans}}" id="autocomplete"
                                    name="search[lieu]" {% if session.lieu is defined %} value="{{session['lieu']}}" {% endif %}>
                                    <input type="hidden" name="city" id="search-city" />
                                    <input type="hidden" name="postal-code" id="search-postal-code" />
                            </div>
                            <div class="col-md-4">
                                <button type="submit" class="btn btn-block btn-archi-blue">{{'pageHome.find'|trans}}</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="offset-md-8 col-md-4">
                                <p class="free-no-contract">{{'pageBtoC.free'|trans}}</p>
                            </div>
                        </div>
                    </form>
                    <a href="{{ absolute_url(customPath('fo_specialite')) }}" class="advanced-search"><i class="fa fa-plus blue"></i> {{'advanced_search'|trans}}</a>
                </div>
            </div>
        </div>
        
    </div>
</section>
<section class="page-news page-content">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="page-content-title">{{'whyArchitect.renovation'|trans|raw}}</h1>
            </div>
            <div class="col-md-10 offset-md-1 page-content-text">
                {{'for_people'|trans|raw}}

                <p class="img-wrapper-center"><img src="{{ asset('images/news/obligatoire-particulier.jpg') }}" alt="{{'why_archi'|trans}}"></p>
                {{'for_pro'|trans|raw}}
                <p class="img-wrapper-center"><img src="{{ asset('images/news/obligatoire-pro.jpg') }}" alt="{{'why_archi_2'|trans}}"></p>
                <p class="text-center">
                    <a href="{{ absolute_url(customPath('fo_news')) }}" class="see-all-news">{{'pageBtoC.see_all_actualities'|trans}}</a>
                </p>
            </div>
        </div>
    </div>
</section>
<section class="home-you-architect">
    <div class="container">
        <h3>{{'pageHome.blue_architect'|trans|raw}}</h3>
        <p>{{'you_wish'|trans}}</p>
        <a href="{{ absolute_url(customPath('fo_inscription_architecte')) }}">{{'pageBtoC.lower_contact'|trans}} !</a>
    </div>
</section>
{% endblock %}

{% block javascripts %}

<script>
    var country = {{country|raw}}
</script>
<script src="{{ asset('js/tma/why_archi.js')}}"></script>
{# <script>
    $(document).ready(function() {

        $(window).keydown(function(event){
            if(event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });
    })
</script>
<script>

    var options = {
        componentRestrictions: { country: {{country|raw}}, }
    };
    function activatePlacesSearch() {
        var input = document.getElementById('autocomplete');
        var autocomplete = new google.maps.places.Autocomplete(input, options);
        google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);
    };
    function onPlaceChanged() {
        var place = this.getPlace();
        var addressComponents = place.address_components
        var addressComponent = null
        for(var i in addressComponents) {
            addressComponent = addressComponents[i]
            if(addressComponent.types.indexOf('postal_code') > -1) document.getElementById('search-postal-code').value = addressComponent.long_name
            if(addressComponent.types.indexOf('locality') > -1) document.getElementById('search-city').value = addressComponent.long_name
        }
        document.getElementById('form-search').submit();
    };


    function init() {
        activatePlacesSearch();
    }

</script> #}
<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNkil3rKocVoPtfM-_-NuoApPY24yR4RU&libraries=places&callback=init&language={{local}}"></script>
{% endblock %}