{% for article in articlesPage %}
{% set month = article.DateEvenement|date('F') %}
{% set translation = 'sylius.ui.' ~ month %}
<div class="ui fluid card" id="card-event-index">
<div class="">
<a href="{{ path('odiseo_sylius_blog_plugin_shop_evenement_show', {'slug': article.slug}) }}">
<img src="{{ article.images.toArray()[0].path|imagine_filter(filter|default('sylius_large')) }}" {{ sylius_test_html_attribute('main-image') }} alt="{{ article.translation.title }}" class="ui bordered image" />
</a>
<div class="text-article">
<div class="place-times-event">
<div>
<i class="calendar alternate outline icon"></i>
{{ article.DateEvenement|date('j') }} {{ translation|trans }}, {{ article.DateEvenement|date('Y') }}
</div>
<div>
<i class="map marker alternate icon"></i>
{% if article.articleLocation.location|length > 30 %}
{{ article.articleLocation.location|slice(0, 30) }}...
{% else %}
{{ article.articleLocation.location }}
{% endif %}
</div>
</div>
<a href="{{ path('odiseo_sylius_blog_plugin_shop_evenement_show', {'slug': article.slug}) }}">
<h3>{{ article.translation.title}}</h3>
</a>
<div class="content-event">
{% if article.content|striptags|length > 200 %}
{{ article.content|striptags|slice(0, 200)|raw }}...
{% else %}
{{ article.content|striptags|raw }}
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}