{% extends 'base.html.twig' %}
{% block title %}{% trans from 'meta' %}news.title{% endtrans %}{% endblock %}
{% block meta %}
    <meta name="robots" content="index,follow">
    <meta name="description" lang="{{ app.request.locale }}"
          content="{% trans from 'meta' %}news.description{% endtrans %}">
    <meta property="og:site_name" content="{% trans from 'meta' %}news.title{% endtrans %}">
    <meta property="og:title" content="{% trans from 'meta' %}news.title{% endtrans %}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ app.request.uri }}">
    <meta property="og:image" content="{{ absolute_url('bundles/cpcreationtheme1/images/logo.jpg') }}">
    <meta property="og:locale" content="{{ app.request.locale }}">
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:image:width" content="600">
    <meta property="og:image:height" content="450">
    <meta property="og:description"
          content="{% trans from 'meta' %}news.description{% endtrans %}">
    <link rel="canonical" href="{{  absolute_url(path('news')) }}" >
{% endblock meta %}
{% if categoriesNews|length > 0 %}
    {% block submenu %}
        <ul class="sub-menu">
            {% for category in categoriesNews %}
                <li><a href="{{ path('news_category', { slug: category.slug }) }}">{{ category.name }}</a></li>
            {% endfor %}
        </ul>
    {% endblock %}
{% endif %}
{% block header_bottom %}
    <div class="grid-container title">
        <h1>{{ 'news'|trans([],'menu') }}</h1>
        <div class="container">
            <p class="text-center">{% trans %}news.subtitle{% endtrans %}</p>
        </div>
    </div>
{% endblock %}
{% block content %}
    <section id="les-actualites" class="news-collection" data-more-text="En savoir plus">
        {% if news|length >0 %}
            {% for item in news %}
                <article itemscope itemtype="http://schema.org/Article">
                    <div class="container">
                        <div class="grid-x">
                            <div class="small-12 medium-9 medium-offset-3 article-border"></div>
                            <div class="small-12 text-center article-media">
                                {% if (item.images | length) > 0 and (item.images | length) <= 1 %}
                                    <img src="{{ asset(item.images[0].image.path) | imagine_filter('thumbnail_970_500_filter') }}"
                                         alt="{{ item.title }}">
                                {% elseif (item.images | length) > 0 %}
                                    <div class="slide-images align-center swiper-container">
                                        <div class="swiper-wrapper">
                                            {% for imageItem in item.images %}
                                                <div class="swiper-slide">
                                                    <img src="{{ asset(imageItem.image.path) | imagine_filter('thumbnail_970_500_filter') }}"
                                                         alt="{{ item.title }}">
                                                </div>
                                            {% endfor %}
                                        </div>
                                        <div class="swiper-button-next"></div>
                                        <div class="swiper-button-prev"></div>
                                    </div>
                                {% elseif item.video is not null %}
                                    <iframe width="100% " height="500"
                                            src="https://www.youtube.com/embed/{{ item.video.path }}">
                                    </iframe>
                                {% endif %}
                                <div class="arrow-white center"></div>
                            </div>
                            <div class="small-12 text-center">
                                <h2>{{ item.title }}</h2>
                            </div>
                        </div>
                        <div class="grid-container">
                            <div class="grid-x grid-margin-x article-content">
                                <div class="cell small-12 medium-3 article-infos">
                                    <p class="article-date"> {{ item.eventAt|localizeddate('none', 'none', null, null, 'd MMMM YYYY')|capitalize }}</p>
                                    {% if item.category %} <p
                                            class="article-category"> {{ item.category.name }}</p>{% endif %}
                                    {% if item.author %}<p class="infos">{{ item.author }}</p>{% endif %}
                                    {% if item.address %}<p class="infos">{{ item.address }}</p>{% endif %}
                                    {% if item.postal %}<p
                                            class="infos">{{ item.postal }}{% endif %} {% if item.city %} {{ item.city | upper }}</p>{% endif %}
                                    {% if item.country %}<p class="infos">{{ item.country }}</p>{% endif %}
                                </div>
                                <div class="cell small-12 medium-9 text-justify article-text">
                                    {{ item.text | raw }}
                                    {% if item.file is not null %}
                                        <p>
                                            <i class="fas fa-file-pdf"></i>
                                            <a href="{{ asset(item.file.path) | file_path }}"
                                               target="_blank">{{ item.file.title }}</a>
                                        </p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <meta itemprop="name" content="{{ item.title }}" />
                    {% if (item.images | length) > 0 %}
                        <meta itemprop="image" content="{{ asset(item.images[0].image.path) | imagine_filter('thumbnail_970_500_filter') }}" />
                    {% endif %}
                    <meta itemprop="articleBody" content="{{ item.text }}" />
                    <meta itemprop="headline" content="{{ item.text | slice(0,30) }}" />
                    <meta itemprop="author" content="{{ 'company' | trans }}" />
                    <meta itemprop="wordcount" content="{{ item.text | split(' ') | length }}" />
                    <div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                        <meta itemprop="name" content="{{ 'company' | trans }}" />
                        <div itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
                            <meta itemprop="url" content="{{ absolute_url('images/logo.jpg') }}" />
                        </div>
                    </div>
                    {% if item.publishedAt %}
                        <meta itemprop="datePublished" content="{{ item.publishedAt |date("c")}}" />
                    {% else %}
                        <meta itemprop="datePublished" content="{{ item.createdAt|date("c")}}" />
                    {% endif %}
                    <meta itemprop="dateCreated" content="{{ item.createdAt|date("c")}}" />
                    <meta itemprop="dateModified" content="{{ item.updatedAt|date("c")}}" />
                    <meta itemprop="url" content="{{ app.request.uri }}" />
                </article>
            {% endfor %}
        {% else %}
            <div class="grid-x">
                <div class="small-12 text-center empty">
                    <h4> {% trans %}news.empty{% endtrans %}<h4>
                </div>
            </div>
        {% endif %}
    </section>
{% endblock %}
