{% set displayFooter = true %}
{% set displayPopup = true %}
{% set currentLocal = app.request.locale %}

{% set website = getWebsiteId() %}
{% extends 'base.html.twig' %}

{% set displayFooter = true %}
{% block body %}
<section class="home-find-photographer">
    <div class="carousel slide carousel-fade" id="home-find-photographer-carousel" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item carousel-item-1 active"></div>
            <div class="carousel-item carousel-item-2"></div>
            <div class="carousel-item carousel-item-3"></div>
            <div class="carousel-item carousel-item-4"></div>
            <div class="carousel-item carousel-item-5"></div>
        </div>
    </div>
    <div class="container home-form-arrcoche">
        <div class="txt-find-photographer">
            <div class="accroche-find-photographer">
                <div class="triangle">
                    <h1>{{'pageHome.find_the_one'|trans|raw}}</h1>
                    <p class="big">{{'pageHome.easy'|trans}}</p>
                </div>
            </div>
            <div class="steps-find-photographer">
                <div class="arrow-1"></div>
                <div class="step-find-photographer step-1">
                    <p class="step-number">1</p>
                    <p class="step-txt">{{'pageHome.i_find'|trans|raw}}</p>
                </div>
                <div class="arrow-2"></div>
                <div class="step-find-photographer step-2">
                    <p class="step-number">2</p>
                    <p class="step-txt">{{'pageHome.i_contact'|trans|raw}}</p>
                </div>
                <div class="arrow-3"></div>
                <div class="step-find-photographer step-3">
                    <p class="step-number">3</p>
                    <p class="step-txt">{{'pageHome.i_rendezvous'|trans|raw}}</p>
                </div>
            </div>
        </div>
        {% if website == 3 %}
        <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="{{'pageHome.home_france'|trans}}">
        </div>
        {% endif %}
        <form method="GET" action="{{ absolute_url(customPath('find_worker_search')) }}" id="form-search" class="home-form-architect">
            <div class="row">
                <div class="col-md-3">
                    {% set webSites = webSiteFooter() %}
                     <select class="form-control countries" name="site-country" id="countries">
                        {% for site in webSites %}
                            {% 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" style="display: none;">
                    <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">
        <p>{{'pageHome.creation'|trans|raw}}</p>
    </div>
</section>
<section class="home-type-photos">
        <h3>{% trans %}photos_types{% endtrans %}</h3>
        <div id="carousel-type-photos" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                {% for skillPropertyType in skillPropertyTypes %}
                        <div {% if loop.first %}class="carousel-item active" {% else %} class="carousel-item"{% endif %} >
                                <div class="container">
                                    <div class="row">
                                        {% for skillProperty in skillPropertyType %}
                                            <div class="col-md-3 picture-wrapper">
                                                <div class="picture">
                                                    <div class="picture-child">
                                                        <a href="{{ absolute_url(customPath('find_worker_results', { params : skillProperty.currentTranslation.slug })) }}">
                                                            <img src="{{ skillProperty.picture | imagine_filter('display_image_type_home_photogarpher') }}" alt="{{skillProperty.currentTranslation.name}}">
                                                        </a>
                                                    </div>
                                                    <h4>{{skillProperty.currentTranslation.name}}</h4>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                        </div>
                {% endfor %}
            </div>
            <a class="carousel-control-prev" href="#carousel-type-photos" role="button" data-slide="prev">
            </a>
            <a class="carousel-control-next" href="#carousel-type-photos" role="button" data-slide="next">
            </a>
        </div>

    <div class="container type-photos-cloud-words">
        <div class="row-cloud-words">
            {% for skillPropertyType in skillPropertyTypes %}
                {% for skillProperty in skillPropertyType %}
                    <a href="{{ absolute_url(customPath('find_worker_results', { params : skillProperty.currentTranslation.slug })) }}" class="cloud-word-link">{{skillProperty.currentTranslation.name}}</a>
                    <span class="cloud-word-dot"><i class="fa fa-circle" aria-hidden="true"></i></span>
                {% endfor %}
            {% endfor %}
        </div>
    </div>

    <div>
        <div class="col-md-4 offset-md-4 see-all-type-prestations">
            <a href="{{ absolute_url(customPath('find_worker_search')) }}" class="red">{{'see_all_prestation_bis'|trans}}</a>
        </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-prestations">
    <div class="container">
        <h3>{{'prestation_types'|trans}}</h3>
        <div id="carousel-type-prestation" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                {% for skillWorkTypes in carouselskillWorkTypes %}
                    <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 photos-item photos-item-{{loop.index}}">
                                <div class="zoom-img">
                                    <div class="type-photos-img" id="photo">
                                        <img src="{{ skillWorkType.picture| imagine_filter('home_page_skill') }}" alt="{{skillWorkType.currentTranslation.name}}">
                                    </div>
                                </div>
                                <h4>{{skillWorkType.currentTranslation.name}}</h4>
                                <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>
                {% endfor %}
            </div>
            <a class="carousel-control-prev" href="#carousel-type-prestation" role="button" data-slide="prev">
            </a>
            <a class="carousel-control-next" href="#carousel-type-prestation" role="button" data-slide="next">
            </a>
        </div>
        <div class="row">
            <div class="col-md-4 offset-md-4 see-all-type-prestations">
                <a href="{{ absolute_url(customPath('find_worker_search')) }}" class="red">{{'see_all_prestation'|trans}}</a>
            </div>
        </div>
    </div>
</section>
{% endif %}
{% if carouselNews is defined and carouselNews is not null %}
    <section class="home-last-works d-flex 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 %}">
                    {# Equivalent last photo items #}
                        <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="zoom-img">
                                    <div class="actu-home-parent" lang="{{currentLocal}}">
                                        <div class="text-actu-home">
                                            <h6>{{news.currentTranslation.title}}</h6>
                                        </div>
                                        {% if news.logo %}
                                        <div class="contenu-actu-home" style="background: url({{news.picture | imagine_filter('home_page_news_photographe_watermark')}}) center no-repeat; background-size: cover;">
                                            <div class="wrapper actu" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0) 100px, rgba(0,0,0,1));"></div>
                                        </div>                                        
                                        {% else %}
                                        <div class="contenu-actu-home" style="background: url({{news.picture | imagine_filter('home_page_news_photographe')}}) center no-repeat; background-size: cover;">
                                            <div class="wrapper actu" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0) 100px, rgba(0,0,0,1));"></div>
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="read-more">{% trans %}pageNews.all_articles{% endtrans %}</div>
                                </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 id="lower-find-photographer">{{'trouvermonarchitectewebsite'|trans}}</h3>
        <p>
            {{'pageHome.choose_architect'|trans|raw}}
        </p>
    </div>
</section>
{% if carouselWorkers is defined and carouselWorkers is not null %}
<section class="home-existing-photographer">
    <div class="container">
        <h3 class="mtop-20">{{'pageHome.architect_sign_in'|trans}}</h3>
        <div id="photographers-carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                {% for carouselPhotographer in carouselWorkers %}
                <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                    <div class="existing-photographer-items d-flex">
                        {% for photographer in carouselPhotographer %}
                        <div class="existing-photographer-item">
                            <a class="link-archi-item" href="{{ absolute_url(customPath('worker_sheet', { workerKey : photographer.workerKey })) }}">
                                {% if photographer.profilePicture %}
                                    <img src="{{ photographer.profilePicture.picture | imagine_filter('remote_worker_logo_photographe') }}">
                                {% endif %}
                                <span> {{photographer.fullName}} </span>
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
            </div>
            <a class="carousel-control-prev" href="#photographers-carousel" role="button" data-slide="prev">
            </a>
            <a class="carousel-control-next" href="#photographers-carousel" role="button" data-slide="next">
            </a>
        </div>
    </div>
</section>
{% endif %}
<section class="home-you-photographer">
    <div class="container">
        <h3>{{'pageHome.blue_architect'|trans|raw}}</h3>
        <p>{{'pageHome.you_wish'|trans}}</p>
        <a href="{{ absolute_url(customPath('main_worker_inscription')) }}">{{'pageBtoC.lower_contact'|trans}}!</a>
    </div>
</section>
<div class="photographer-call" lang="{{currentLocal}}">
    <div class="content">
        <h4>{{'footer.architect_callback'|trans|raw}}
        </h4>
        <a href="{{ absolute_url(customPath('main_BtoC')) }}" class="btn btn-archi-blue">{{'footer.lets_go'|trans}}</a>
    </div>
</div>
{% 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={{ currentLocal }}"></script>

    
{% endblock %}