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

{% block canonicalUrl %}
<link rel="canonical" href="{{canonicalUrl}}" />
{% endblock %}

{% block meta %}
<title>{{news.currentTranslation.contentTitle|raw}}</title>
<meta name="description" content="{{news.currentTranslation.contentDescription|raw}}">
{% if news.picture %}
<meta property="og:image" content="{{ news.picture | imagine_filter('remote_news_head')}}">
{% endif %}
<meta property="og:type" content="article">
<meta property="og:title" content="{{ 'website_worker_name'|trans }} | {{ news.currentTranslation.title }}">
{% endblock %}


{% 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('main_home')) }}">{{'home'|trans}}</a></li>
                <li class="breadcrumb-item active" aria-current="page"><a href="{{ absolute_url(customPath('news_news'))}}">{{'menu.news'|trans}}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{news.currentTranslation.title}}</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-12">
                    <form method="GET" action="{{ customPath('find_worker_search') }}" id="form-search" class="home-form-architect">
                        <div class="row">
                            <div class="col-md-3">
                                <select class="form-control countries" name="site-country" id="countries">
                                    {% set webSite = webSiteFooter() %}
                                    {% 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>
            </div>
        </div>
        
    </div>
</section>
<form method="POST" action="{{ absolute_url(customPath('news_news')) }}" class="">
    <section class="menu-categories">
        <div class="container">
            <div class="row">
                <div class="col-md-8 offset-md-2">
                    <p class="title-categories">{{'menu.news'|trans}}</p>
                </div>
                <div class="col-md-12">
                    <div class="content-categories">
                        <button class="item-categorie" type="submit" value="All" name="categorie">{{'pageNews.tous'|trans}}</button>
                        {% for cate in categories %}
                        <button type="submit" value="{{cate.id}}" name="categorie" {% if news.newsCategory.id == cate.id %} class="item-categorie checkedCategorie" {% else %} class="item-categorie" {% endif %} >{{cate.currentTranslation.title}}</button>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </section>
</form>
<section class="page-news page-content">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="page-content-title">{{ news.currentTranslation.title }}</h1>
            </div>
            <div class="col-md-10 offset-md-1 page-content-text">
            {# Image #}
            {% if news.picture %}
            <div class="img-frame">
                {% if news.logo %}
                    <img src="{{news.picture | imagine_filter('remote_news_head_watermark_' ~ logoFilter)}}" class="image-head" />
                {% else %}
                    <img src="{{news.picture | imagine_filter('remote_news_head')}}" class="image-head" />
                {% endif %}
            </div>
            {% endif %}
                {{ news.currentTranslation.content|raw }}
            </div>
        </div>
    </div>
</section>
{% if newsSimilarly != [] %}
    <section>
        <div class="container">
            <div class="row similarly-article">
                <div class="col-md-12">
                    <p class="title-similarly">{{'pageNews.similarly_article'|trans}}</p>
                </div>
                <br><hr>
                <div id="carousel-new-similarly" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">

                    {% for arrayNewsSimilarly in carouselNewsSimilarly %}
                        <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                            <div class="row" id="carousel-news-similarly">
                                    {% for newSimilarly in arrayNewsSimilarly %}
                                        <div class="col-md-4">
                                            <a class="link-title" href="{{ customPath('news_see',{ slug : newSimilarly[0].currentTranslation.slug })}}">
                                                {% if newSimilarly[0].picture %}
                                                    {% if newSimilarly[0].logo %}
                                                        <div style="background: url({{newSimilarly[0].picture | imagine_filter('remote_news_thumb_scale_watermark_' ~ logoFilter)}}) center no-repeat; background-size: contain; height: 230px;" lang="fr">
                                                    {% else %}
                                                        <div style="background: url({{newSimilarly[0].picture | imagine_filter('remote_news_thumb_scale')}}) center no-repeat; background-size: contain; height: 230px;" lang="fr">
                                                    {% endif %}
                                                {% else %}
                                                    <div style="height: 230px;" lang="fr">
                                                {% endif %}
                                                </div>
                                            </a>
                                            <div class="content-article">
                                                <a class="link-title" href="{{ customPath('news_see',{ slug : newSimilarly[0].currentTranslation.slug })}}">
                                                    <div><p class="description-article">{{newSimilarly[0].currentTranslation.title}}<p></div>
                                                </a>
                                                <div class="see-article"> <a class="link-article" href="{{ customPath('news_see',{ slug : newSimilarly[0].currentTranslation.slug })}}">{{'pageNews.lire_suite'|trans}}</a> </div>
                                                <a class="" href="{{ customPath('news_see',{ slug : news.currentTranslation.slug })}}">
                                                    <div><p class="categorie-article">{{newSimilarly[0].newsCategory.currentTranslation.title}}</p></div>
                                                </a>
                                            </div>
                                        </div>
                                    {% endfor %}
                            </div>
                        </div>
                    {% endfor %}
                    </div>

                    <a class="carousel-control-prev" href="#carousel-new-similarly" role="button" data-slide="prev">
                    </a>
                    <a class="carousel-control-next" href="#carousel-new-similarly" role="button" data-slide="next">
                    </a>
                </div>
            </div>
        </div>
    </section>
{% endif %}
<section class="home-you-architect">
    <div class="container">
        <h3>{{'pageHome.blue_architect'|trans|raw}}</h3>
        <p>{{'pageHome.you_wish'|trans|raw}}</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();
    }

    var pictureNewsSrc = $("figure img");

    {# pictureNewsSrc.prop('src', 'imageNews') #}

</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 %}