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

{% set displayFooter = true %}
{% set displayPopup = true %}

{% set currentLocal = app.request.locale %}

{% set website = getWebsiteId() %}
{% block body %}
{% set default_country = customParam('default_country') %}
<section class="home-find-architect">
    <div class="carousel slide carousel-fade" id="home-find-architect-carousel" lang="{{default_country}}"  data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item carousel-item-4 active"></div>
            <div class="carousel-item carousel-item-5"></div>
            <div class="carousel-item carousel-item-6"></div>
            <div class="carousel-item carousel-item-7"></div>
            <div class="carousel-item carousel-item-8"></div>
        </div>
    </div>
    <div class="container home-form-arrcoche">
        <div class="txt-find-architect">
            <div class="accroche-find-architect">
                <div class="triangle">
                    <h1>{{'pageHome.find_the_one'|trans|raw}}</h1>
                    <p class="big">{% trans %}pageHome.easy{% endtrans %}</p>
                </div>
            </div>
            <div class="steps-find-architect">
                <div class="step-find-architect step-1">
                    <p class="step-number">1</p>
                    <p class="step-txt">{% trans %}pageHome.i_find{% endtrans %}</p>
                </div>
                <div class="step-find-architect step-2">
                    <p class="step-number">2</p>
                    <p class="step-txt"> {% trans %}pageHome.i_contact{% endtrans %}</p>
                </div>
                <div class="step-find-architect step-3">
                    <p class="step-number">3</p>
                    <p class="step-txt"> {% trans %}pageHome.i_rendezvous{% endtrans %}</p>
                </div>
            </div>
        </div>
        {% if website == 1 %}
        <div class="first-directory d-flex justify-content-center align-items-center">
            <h2>{{'pageHome.best_guide'|trans}} </h2>
            <img src="{{ asset('lib/media/base/france-white.png') }}" alt="{{'home_archi'|trans}}">
        </div>
        {% endif %}
        <form method="GET" action="{{ customPath('find_worker_search') }}" id="form-search" class="home-form-architect">
            <div class="row">
                <div class="col-md-3">
                    {% set webSite = webSiteFooter() %}
                    <select class="form-control countries" name="site-country" id="countries">
                            {% for site in webSite %}
                                {% if site.defaultLanguage %}
                                <option value="{{ site.defaultLanguage.locale }}"
                                data-lang="{{ site.defaultLanguage.locale }}" data-action="{{ site.url }}" {% if site.isoCode == countryUrl %}selected{% endif %}>
                                    {{ site.currentTranslation.country }}
                                </option>
                                {% endif %}
                            {% endfor %}
                    </select>
                </div>
                <div class="col-md-6">
                        <input type="text" class="form-control" placeholder="{% trans %}form_search{% endtrans %}" id="autocomplete-workerplace"
                        name="search[lieu]" {% if session.lieu is defined %} value="{{session['lieu']}}" {% endif %}>
                        <input type="hidden" name="city" id="search-city" />
                        <input type="hidden" name="zip-code" id="search-zip-code" />
                        <input type="hidden" name="department" id="search-department" />
                        <input type="hidden" name="region" id="search-region" />
                        <input type="hidden" name="country" id="search-country" />
                </div>
                <div class="col-md-3"><button type="submit" class="btn btn-block btn-archi-blue">{% trans %}pageHome.find{% endtrans %}</button></div>
                <div class="col-md-3" id="frenchOnly">
                    <select class="form-control" name="site-country-in-france" id="countries-for-france">
                        {% for island in islands %}
                            <option value="{{island.isoCode}}" >{{island.currentTranslation.name}}</option>
                        {% endfor %}
                   </select>
               </div>
               <div class="offset-md-6 col-md-3"><p class="free-no-contract"> {% trans %}pageHome.no_contract{% endtrans %}</p></div>
            </div>
        </form>
        <a href="{{ absolute_url(customPath('find_worker_results_all')) }}" class="advanced-search"><i class="fa fa-plus blue"></i> {{'research.advanced_search'|trans}}</a>
    </div>
</section>
<section class="home-site-description">
    <div class="wrapper">
        {% if website == 1 %}
            <p><img src="{{ asset('lib/media/base/oa-france.jpg') }}" alt="{{'pageHome.home_archi_2'|trans}}"></p>
        {# {% elseif website == 4 %}
            <p><img width="250px" src="{{ asset('lib/media/base/cscae-es.jpg') }}" alt="{{'pageHome.home_archi_2'|trans}}"></p> #}
        {% elseif website == 2 %}
            <p><img width="100px" src="{{ asset('lib/media/base/arb-uk.jpg') }}" alt="{{'pageHome.home_archi_2'|trans}}"></p>
        {% endif %}
        <p class="lighter"> {% trans %}pageHome.exclusively{% endtrans %}<br /><br /></p>
        <p> {% trans %}pageHome.creation{% endtrans %}</p>
        <p> {% trans %}pageHome.choose{% endtrans %}</p>
    </div>
</section>
<section class="home-type-bien">
    <div class="container">
        <h3>{% trans %}possession_types{% endtrans %}</h3>
        <div class="row">
            {% for skillPropertyType in skillPropertyTypes %}
                <div class="col-md-3 type-bien-item">
                    <div class="type-bien-img">
                        <img src="{{ skillPropertyType.picture | imagine_filter('home_page_skill') }}" alt="{{skillPropertyType.currentTranslation.name}}">
                        <h4>{{skillPropertyType.currentTranslation.name}}</h4>
                    </div>
                    <a href="{{ absolute_url(customPath('find_worker_results', { params : skillPropertyType.currentTranslation.slug })) }}" class="btn btn-block btn-archi-blue">  {% trans %} pageHome.research_2 {% endtrans %} </a>
                </div>
            {% endfor %}
        </div>
        <div class="row">
            <div class="col-md-4 offset-md-4 see-all-type-bien">
                <a href="{{ absolute_url(customPath('find_worker_search')) }}" class="blue"> {% trans %}pageHome.see_all_property{% endtrans %}</a>
            </div>
        </div>
    </div>
</section>
<section class="home-testimonials">
    <div class="container">
        <div id="carousel-testimonials" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                {% for carouselOpinion in carouselOpinions %}
                    <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                        <div class="row">
                            {% for opinion in carouselOpinion %}
                                <div class="col-md-6">
                                    <p class="testimonials-rates">
                                        {% for i in 1..opinion.stars %}
                                            <i class="fa fa-star checked" aria-hidden="true"></i>
                                        {% endfor %}
                                        {% if opinion.stars != 5 %}
                                            {% for i in 1..5-opinion.stars %}
                                                <i class="fa fa-star checked unchecked" aria-hidden="true"></i>
                                            {% endfor %}
                                        {% endif %}
                                    </p>
                                    <div class="testimonials-txt">
                                        {{opinion.currentTranslation.description|raw}}
                                    </div>
                                    <div class="d-flex justify-content-end avis-name testimonials-txt">
                                        {{opinion.name}}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}
            </div>
            <a class="carousel-control-prev" href="#carousel-testimonials" role="button" data-slide="prev">
            </a>
            <a class="carousel-control-next" href="#carousel-testimonials" role="button" data-slide="next">
            </a>
        </div>
        <div class="row">
            <div class="col-md-4 offset-md-4 see-all-testimonials">
                <a href="{{ absolute_url(customPath('main_particular_partner_opinion')) }}" class="blue">{% trans %}pageHome.read_more_opinion{% endtrans %} </a>
            </div>
        </div>
    </div>
</section>
{% if carouselskillWorkTypes is defined and carouselskillWorkTypes is not null %}
    <section class="home-type-travaux">
        <div class="container">
            <h3>{% trans %}work_types{% endtrans %}</h3>
            <div id="carousel-type-travaux" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    {% for skillWorkTypes in carouselskillWorkTypes %}
                        {% if skillWorkTypes|length == 3 %}
                            
                        <div {% if loop.first %} class="carousel-item active" {% else %} class="carousel-item" {% endif %} >
                            <div class="row">
                                {% for skillWorkType in skillWorkTypes %}
                                    <div class="col-md-4 travaux-item travaux-item-{{loop.index}}">
                                        <h4>{{skillWorkType.currentTranslation.name}}</h4>
                                        <div class="type-travaux-img">
                                            <img src="{{ skillWorkType.picture| imagine_filter('home_page_skill') }}" alt="{{skillWorkType.currentTranslation.name}}">
                                        </div>
                                        <a href="{{ absolute_url(customPath('find_worker_results', { params : skillWorkType.currentTranslation.slug })) }}" class="btn btn-block btn-archi-blue">{% trans %}pageHome.research_2{% endtrans %}</a>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}
                    {% endfor %}
                </div>
                <a class="carousel-control-prev" href="#carousel-type-travaux" role="button" data-slide="prev">
                </a>
                <a class="carousel-control-next" href="#carousel-type-travaux" role="button" data-slide="next">
                </a>
            </div>
            <div class="row">
                <div class="col-md-4 offset-md-4 see-all-type-travaux">
                    <a href="{{ absolute_url(customPath('find_worker_search')) }}" class="blue">{% trans %}pageHome.see_all_work{% endtrans %}</a>
                </div>
            </div>
        </div>
    </section>
{% endif %}
{% if carouselNews is defined and carouselNews is not null %}
    <section class="home-last-works align-items-center">
        <div class="container">
            <div id="news-carousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    {% for carouselNew in carouselNews %}
                    <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                        <div class="container d-flex last-works-items">
                            {% for news in carouselNew %}
                            <div class="last-works-item ">
                                <h5>{{news.newsCategory.currentTranslation.title}}</h5> 
                                <a href="{{ absolute_url(customPath('news_see', { slug : news.currentTranslation.slug })) }}" class="">
                                    {% if news.logo %}
                                    <div style="background: url({{news.picture | imagine_filter('home_page_news_watermark')}}) center no-repeat; background-size: cover;" lang="{{currentLocal}}">
                                        <div class="wrapper actu" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0) 200px, rgba(0,0,0,1));">
                                            <div class="d-flex justify-content-between w-100">
                                                <h6>{{news.currentTranslation.title}}</h6>
                                                <div class="read-more"> > {% trans %}pageNews.all_articles{% endtrans %}</div>
                                            </div>
                                        </div>
                                    </div>
                                    {% else %}
                                    <div style="background: url({{news.picture | imagine_filter('home_page_news')}}) center no-repeat; background-size: cover;" lang="{{currentLocal}}">
                                        <div class="wrapper actu" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0) 200px, rgba(0,0,0,1));">
                                            <div class="d-flex justify-content-between w-100">
                                                <h6>{{news.currentTranslation.title}}</h6>
                                                <div class="read-more"> > {% trans %}pageNews.all_articles{% endtrans %}</div>
                                            </div>
                                        </div>
                                    </div>
                                    {% endif %}
                                </a>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <a class="carousel-control-prev" href="#news-carousel" role="button" data-slide="prev">
                </a>
                <a class="carousel-control-next" href="#news-carousel" role="button" data-slide="next">
                </a>

            </div>
        </div>  
    </section> 
{% endif %}
<section class="home-why-choose">
    <div class="container">
        <h3> {% trans %}trouvermonarchitectewebsite{% endtrans %}</h3>
        <p>
            {% trans %}pageHome.choose_architect{% endtrans %}
        </p>
    </div>
</section>
{% if carouselWorkers is defined and carouselWorkers is not null %}
    <section class="home-existing-architect">
        <div class="container">
            <h3>{% trans %}pageHome.architect_sign_in{% endtrans %}</h3>
            <div id="architects-carousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    {% for carouselWorker in carouselWorkers %}
                    <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                        <div class="existing-architect-items d-flex">
                            {% for worker in carouselWorker %}
                            <div class="existing-architect-item">
                                <a class="link-archi-item" href="{{ absolute_url(customPath('worker_sheet', { workerKey : worker.workerKey })) }}">
                                    {% if worker.profilePicture %}
                                        <img src="{{ worker.profilePicture.picture | imagine_filter('remote_worker_logo_sheet') }}">
                                    {% endif %}
                                    <span> {{worker.fullName}} </span>
                                </a>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <a class="carousel-control-prev" href="#architects-carousel" role="button" data-slide="prev">
                </a>
                <a class="carousel-control-next" href="#architects-carousel" role="button" data-slide="next">
                </a>
            </div>
        </div>
    </section>
{% endif %}

<div class="architect-call" lang="{{currentLocal}}">
    <div class="content">
        <h4> {% trans %}footer.architect_callback{% endtrans %}
        </h4>
        <a href="{{ absolute_url(customPath('main_BtoC')) }}" class="btn btn-archi-blue"> {% trans %}footer.lets_go{% endtrans %}</a>
    </div>
</div>
<section class="home-you-architect">
    <div class="container">
        <h3>{% trans %}pageHome.blue_architect{% endtrans %}</h3>
        <p>{% trans %}pageHome.you_wish{% endtrans %}</p>
        {% if currentCountry2 == 'es' and currentLocal == 'es' %}
            <a href="{{ absolute_url(customPath('main_worker_inscription')) }}">{% trans %}menu.contact_us_bis{% endtrans %} </a>
        {% else %}
            <a href="{{ absolute_url(customPath('main_worker_inscription')) }}">{% trans %}menu.contact_us{% endtrans %} ! </a>
        {% endif %}
    </div>
</section> 
{% endblock %}

{% block javascripts %}
<script>
    $( document ).ready(function() {
        $("select.countries").change(function(){
            var selectedCountry = $(this).children("option:selected");
            document.location = selectedCountry.data('action')
        });
        if( $( "#countries option:selected" ).data('text') == 'France'){
            $("#frenchOnly").css("display", "");
        }
        else{
            $("#frenchOnly").css("display", "none");
        }
        $("select#countries-for-france").change(function(){
            var selectedCountry = $(this).children("option:selected");
            countryAutoComp = selectedCountry.val();
            init();
        });

    }); 
    var countryAutoComp = {{currentCountry|raw}};
    var currentWebsite = {{currentWebsite}};
    function init() {
        activatePlacesSearch();
    }
</script>
{% if currentWebsite == 1 %}
    
<script SameSite="None; Secure" src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>
{% endif %}
<script src="{{ asset('lib/js/home.js')}}"></script>
<script src="{{ asset('lib/js/google-autocomplete.js')}}"></script>

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

    
{% endblock %}