{% 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|raw}}</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="offset-md-8 col-md-4">
                                <p class="free-no-contract">{{'pageBtoC.free'|trans|raw}}</p>
                            </div>
                        </div>
                    </form>
                    <a href="{{ absolute_url(customPath('fo_specialite')) }}" class="advanced-search"><i class="fa fa-plus blue"></i> {{'research.advanced_search'|trans|raw}}</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">{{'loft_error'|trans}}</h1>
            </div>
            <div class="col-md-10 offset-md-1 page-content-text">
                {{'content_comble'|trans|raw}}
                <p>&nbsp;</p>
                <div id="carousel-combles" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="{{ asset('images/news/combles-1.jpg') }}" alt="{{'comble_img'|trans}}">
                        </div>
                        <div class="carousel-item">
                            <img src="{{ asset('images/news/combles-2.jpg') }}" alt="{{'comble_img'|trans}}">
                        </div>
                        <div class="carousel-item">
                            <img src="{{ asset('images/news/combles-3.jpg') }}" alt="{{'comble_img'|trans}}">
                        </div>
                        <div class="carousel-item">
                            <img src="{{ asset('images/news/combles-4.jpg') }}" alt="{{'comble_img'|trans}}">
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carousel-combles" role="button" data-slide="prev"></a>
                    <a class="carousel-control-next" href="#carousel-combles" role="button" data-slide="next"></a>
                </div>
                <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|raw}}</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/combles.js')}}"></script>
{# <script>
    $(document).ready(function() {

        $(window).keydown(function(event){
            if(event.keyCode == 13) {
                event.preventDefault();
                var firstResult = $(".pac-container .pac-item:first").text();
                var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({address:firstResult, componentRestrictions: { country: {{country|raw}} }, region: 'FR' }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var addressComponents = results[0].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();
                    }
                    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 %}