{% extends 'base.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('main_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-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">
                <h1 class="title-categories">{{'menu.news'|trans}}</h1>
            </div>
            <div class="col-md-12">
                <div class="content-categories">
                    <button type="submit" value="All" name="categorie" {% if filters['categorie'] == null or filters['categorie'] == 'All' %} class="item-categorie checkedCategorie" {% else %} class="item-categorie" {% endif %}>{{'pageNews.tous'|trans}}</button>
                    {% for cate in categories %}
                    {% if cate %}
                    <button type="submit" value="{{cate.id}}" name="categorie" {% if filters['categorie'] == cate.id %} class="item-categorie checkedCategorie" {% else %} class="item-categorie" {% endif %} >{{cate.currentTranslation.title}}</button>
                    {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>
</form>

{% if newsLast is not null %}
<section>
    <div class="container">
        <div class="row last-article">
            <div class="col-md-12" id="top-last-article">
                <p class="title-last-article">{{'pageNews.last_article'|trans}} </p>
            </div>
            <br><hr>
            {% if newsLast.currentTranslation != "[]" %}     
                <div class="col-md-12 title-description-article"><a class="link-title" href="{{ absolute_url(customPath('news_see',{ slug : newsLast.currentTranslation.slug }))}}">{{newsLast.currentTranslation.title}}</a></div>
                    <div class="col-md-4">
                        <a class="link-article" href="{{ customPath('news_see',{ slug : newsLast.currentTranslation.slug })}}">
                        {% if newsLast.picture %}
                            {% if newsLast.logo %}
                                <div style="background: url({{newsLast.picture | imagine_filter('remote_news_thumb_scale_watermark_' ~ logoFilter)}}) center no-repeat; background-size: contain; height: 280px; position:relative" class="logo-relative-frame" lang="fr">
                                </div>
                            {% else %}
                                <div style="background: url({{newsLast.picture | imagine_filter('remote_news_thumb_scale')}}) center no-repeat; background-size: contain; height: 280px; position:relative" class="logo-relative-frame" lang="fr">
                                </div>
                            {% endif %}
                        {% endif %}
                        </a>
                    </div>
                    <div class="col-md-8 content-article"> 
                        <a class="link-article" href="{{ customPath('news_see',{ slug : newsLast.currentTranslation.slug })}}">
                            <div class="categorie-article"> {{newsLast.newsCategory.currentTranslation.title}} </div>
                        </a>
                            <div class="description-article">
                                {{ newsContentPageSetting(newsLast.currentTranslation.content)|slice(0,350)|raw }}<br/>...
                                {# {{newsLast.currentTranslation.content|slice(0, 350)|raw}}... #}
                            </div>
                            <a class="link-article" href="{{ customPath('news_see',{ slug : newsLast.currentTranslation.slug })}}">
                                <div class="see-article"> {{'pageNews.lire_suite'|trans}} </div>
                            </a>
                    </div>
            {% else %}
                <div class="col-md-12 title-description-article">{{'pageNews.no_news'|trans}}</div>
            {% endif %}
        </div>
    </div>
</section>
{% endif %}
<form method="POST" action="{{ absolute_url(customPath('news_news')) }}" id="form-article-recent" role="form">
{% if newsRecent is not null %}
    
<section class="article-recent">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p class="title-recent-article">{{'pageNews.recent_article'|trans}} </p>
            </div>
            <br><hr>
            {% for news in newsRecent %}
                {% if news and news.currentTranslation != '[]'%}
                    <div class="col-md-4 responsive-news-item">
                        <a class="link-article" href="{{ customPath('news_see',{ slug : news.currentTranslation.slug })}}">
                            {% if news.picture %}
                            {# <div style="background: url({{news.picture | imagine_filter('remote_news_thumb_multiple')}}) center no-repeat; background-size: cover; height: 230px" lang="fr"> #}
                                {% if news.logo %}
                                    <div style="background: url({{news.picture | imagine_filter('remote_news_thumb_multiple_' ~ logoFilter)}}) center no-repeat; background-size: auto 100%; height: 230px" lang="fr">
                                    </div>
                                {% else %}
                                    <div style="background: url({{news.picture | imagine_filter('remote_news_thumb_multiple')}}) center no-repeat; background-size: auto 100%; height: 230px" lang="fr">
                                    </div>
                                {% endif %}
                            {% endif %}
                            <div class="content-article">
                                <div class="news-title-container" >
                                    <div><p class="description-article mb-0">{{news.currentTranslation.title}}</p></div>
                                    <div><p class="see-article mb-0">{{'pageNews.lire_suite'|trans}}<p></div>
                                </div>
                                <div class="offset-md-1"><p class="categorie-article mb-0">{{news.newsCategory.currentTranslation.title}}</p></div>
                            </div>
                        </a> 
                    </div>
                {% else %}
                    <div class="col-md-4 title-description-article">{{'pageNews.no_news'|trans}}</div>
                {% endif %}
            {% endfor %}
        </div>
        {#<div class="architect-paginate">
            <ul>
                <input type="hidden" id="offset-architect" name="offset" />
                {% if (offsetQuery+1) > 1 %}
                <li class="paginate-to" data-page="{{ offsetQuery-1 }}"><i class="fa fa-angle-left"></i>
                {% endif %}
                {% if nbStartPaginate > 1 %}
                <li class="paginate-to" data-page="0">1</li>
                    {% if offsetQuery + 1 > nbMaxPaginate %}
                        <li class="divider">...</li>
                    {% endif %}
                {% endif %}
                {% for paginate in nbStartPaginate..nbPaginate %}
                <li class="paginate-to {% if paginate == (offsetQuery+1) %}active{% endif %}" data-page="{{ paginate-1 }}">{{ paginate }}</li>
                {% endfor %}
                {% if nbPages > nbPaginate %}
                    {% if offsetQuery + 1 <= nbPages - nbMaxPaginate %}
                        <li class="divider">...</li>
                    {% endif %}
                <li class="paginate-to {% if nbPages == (offsetQuery+1) %}active{% endif %}" data-page="{{ nbPages-1 }}">{{ nbPages }}</li>
                {% endif %}
                {% if (offsetQuery+1) < nbPages %}
                <li class="paginate-to" data-page="{{ offsetQuery+1 }}"><i class="fa fa-angle-right"></i></li>
                {% endif %}
            </ul>
        </div>#}
    </div>
</section>
{% endif %}
</form>

{% if newsZoom is not null %}
<section class="zoom">
    <div class="container">
        <div class="row">
            <div class="col-md-12" id="top-last-article">
                <p class="title-zoom-article">{{'pageNews.zoom'|trans}} </p>
            </div>
            <br><hr>
            {% if newsZoom.currentTranslation != "[]" %} 
                <div class="col-md-4">
                    <a class="link-article" href="{{ customPath('news_see',{ slug : newsZoom.currentTranslation.slug })}}">
                        {% if newsZoom.picture %}
                            {% if newsZoom.logo %}
                                <div style="background: url({{newsZoom.picture | imagine_filter('remote_news_thumb_scale_watermark_' ~ logoFilter)}}) center no-repeat; background-size: contain; height: 280px" lang="fr">
                                </div>
                            {% else %}
                                <div style="background: url({{newsZoom.picture | imagine_filter('remote_news_thumb_scale')}}) center no-repeat; background-size: contain; height: 280px" lang="fr">
                                </div>
                            {% endif %}
                        {% endif %}
                    </a>
                </div>
                <div class="col-md-8 content-article"> 
                    <a class="link-title" href="{{ customPath('news_see',{ slug : newsZoom.currentTranslation.slug })}}">
                        <div class=" title-description-article">{{newsZoom.currentTranslation.title}}</div>
                    </a>
                    <div class="description-article">
                        <a class="link-title" href="{{ customPath('news_see',{ slug : newsZoom.currentTranslation.slug })}}">
                            <p class="categorie-article"> {{newsZoom.newsCategory.currentTranslation.title}}</p>
                        </a>
                        {{ newsContentPageSetting(newsZoom.currentTranslation.content)|slice(0,350)|raw }}<br/>...
                        {# {{newsZoom.currentTranslation.content|slice(0, 350)|raw}}... #}
                    </div>
                    <div class="see-article"> <a class="link-article" href="{{ customPath('news_see',{ slug : newsZoom.currentTranslation.slug })}}">{{'pageNews.lire_suite'|trans}}</a> </div>
                </div>
            {% else %}
                <div class="col-md-12 title-description-article">{{'pageNews.no_news'|trans}}</div>            
            {% endif %}
        </div>
    </div>
</section>
{% endif %}
{% if newsMostViewed is not null %}
<section class="article-plus-vue">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p class="title-plus-vue-article">{{'pageNews.articles_most_viewed'|trans}} </p>
            </div>
            <br><hr>
            {% for news in newsMostViewed %}
                {% if news and news.currentTranslation != "[]" %}
                    <div class="col-md-4 responsive-news-item">
                        <a class="link-article" href="{{ customPath('news_see',{ slug : news.currentTranslation.slug })}}">
                            {% if news.picture %}
                                {% if news.logo %}
                                    <div style="background: url({{news.picture | imagine_filter('remote_news_thumb_multiple_' ~ logoFilter)}}) center no-repeat; background-size: auto 100%; height: 230px" lang="fr">
                                    </div>
                                {% else %}
                                    <div style="background: url({{news.picture | imagine_filter('remote_news_thumb_multiple')}}) center no-repeat; background-size: auto 100%; height: 230px" lang="fr">
                                    </div>
                                {% endif %}
                            {% endif %}
                            <div class="content-article">
                                <div class="news-title-container" >
                                    <div><p class="description-article mb-0">{{news.currentTranslation.title}}</p></div>
                                    <div><p class="see-article mb-0">{{'pageNews.lire_suite'|trans}}</p></div>
                                </div>
                                <div class="offset-md-1"><p class="categorie-article mb-0">{{news.newsCategory.currentTranslation.title}}</p></div>
                            </div>
                        </a>
                    </div>
                {% else %}
                    <div class="col-md-4 title-description-article">{{'pageNews.no_news'|trans}}</div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}
<section class="all-articles mt-3">
    <div class="container">
        <div class="row">
            <a href="{{ absolute_url(customPath('news_all')) }}" class="see-all btn btn-archi-blue">{{'pageNews.all_articles'|trans}}</a> 
        </div>
    </div>
</section>

<section class="home-you-architect">
    <div class="container">
        <h3>{{'pageHome.blue_architect'|trans|raw}}</h3>
        <p>{{'pageHome.you_wish'|trans}}</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>
<script>
    {# var country = {{country|raw}} #}
</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 %}