{% trans_default_domain 'front_ec_international' %}

{% set i18n = teaser|i18n %}

{% if i18n %}

    {% set title = i18n.title %}
    {% set titleForce = i18n.titleForce ? i18n.titleForce : 2 %}
    {% set titleAlignment = i18n.titleAlignment ? i18n.titleAlignment : 'text-left' %}

    {% if title|striptags|length > 0 %}
        <h{{ titleForce }} class="title mb-4 {{ titleAlignment }}">{{ title|unescape|raw }}</h{{ titleForce }}>
    {% endif %}

{% endif %}

<div id="teaser-news-{{ teaser.slug }}" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">

        {% set isFirst = true %}

        {% for post in posts %}

            {% set entity = post.entity %}
            {% set category = post.entity.category %}

            <div class="carousel-item {% if loop.first %} active{% endif %}">
                <div class="row">
                    <div class="col-lg-6 pr-lg-0">{{ post.mediaRelation|thumb(post.mediaConfig, {'colSize': 6}) }}</div>
                    <div class="col-lg-6 content pl-lg-5 mt-5 mt-lg-0" data-aos="fade-right">
                        <div class="row m-lg-0">
                            <div class="col-8 content-left">
                                <div class="d-flex flex-column h-100">

                                    {% if post.title|striptags|length > 0 %}
                                        {% if post.pageUrl and post.url %}
                                            <a href="{{ path('front_newscast_view', {'pageUrl': post.pageUrl, 'url': post.url}) }}" class="news-link">
                                        {% endif %}
                                        <h3 class="title {{ post.titleAlignment }}">{{ post.title|raw }}</h3>
                                        {% if post.pageUrl and post.url %}
                                            </a>
                                        {% endif %}
                                    {% endif %}

                                    {% if category.displayCategory %}
                                        {% set i18nCategory = category|i18n %}
                                        {% if i18nCategory and i18nCategory.title %}
                                            {% set titleCategory = i18nCategory.title %}
                                            <h{{ post.titleForce + 1 }} class="news-category-title {{ post.titleAlignment }}">{{ titleCategory|unescape|raw }}</h{{ post.titleForce + 1 }}>
                                        {% endif %}
                                    {% endif %}

                                    {% if not category.hideDate %}
                                        <small class="date mb-4 d-inline-block w-100">
                                            {{ "Publié le"|trans|raw }} {{ entity.publicationStart|localizeddate('none', 'none', app.request.locale, null, entity.category.formatDate) }}
                                        </small>
                                    {% endif %}

                                    {% if post.intro|striptags|length > 0 %}
                                        <p class="introduction {{ post.introAlignment }}">{{ post.intro|striptags|truncate(150) }}</p>
                                    {% endif %}

                                    {% if post.intro|striptags|length == 0 and post.body|striptags|length > 0 %}
                                        <p class="introduction {{ post.bodyAlignment }}">{{ post.body|striptags|truncate(150) }}</p>
                                    {% endif %}

                                    <div class="mt-auto">

                                        {% if post.pageUrl and post.url %}
                                            <div class="w-100">
                                                <a href="{{ path('front_newscast_view', {'pageUrl': post.pageUrl, 'url': post.url}) }}" class="btn btn-outline-primary hbtn hb-fill-right mt-3">
                                                    {{ "En savoir plus"|trans|raw }}<i class="fal fa-chevron-right ml-2"></i>
                                                </a>
                                            </div>
                                        {% endif %}

                                        {% if posts|length > 1 and isDesktop() %}
                                            <ol class="carousel-indicators mt-5">
                                                {% for i in 0..(posts|length - 1) %}
                                                    <li data-target="#teaser-news-{{ teaser.slug }}" data-slide-to="{{ i }}"{% if isFirst %} class="active"{% endif %}></li>
                                                    {% set isFirst = false %}
                                                {% endfor %}
                                            </ol>
                                        {% endif %}

                                    </div>

                                </div>
                            </div>
                            <div class="col-4 content-right">
                                <div class="d-flex flex-column h-100 text-right">

                                    {% if posts|length > 1 %}

                                        <div class="carousel-controls mt-0 mt-lg-3">
                                            <span class="carousel-control carousel-control-prev cursor" href="#teaser-news-{{ teaser.slug }}" role="button" data-slide="prev" aria-label="{{ "Précédent"|trans|raw }}">
                                                <i class="fal fa-chevron-left text-dark mr-3" aria-hidden="true"></i>
                                            </span>
                                            <span class="carousel-control carousel-control-next cursor" href="#teaser-news-{{ teaser.slug }}" role="button" data-slide="next" aria-label="{{ "Suivant"|trans|raw }}">
                                                <i class="fal fa-chevron-right text-dark" aria-hidden="true"></i>
                                            </span>
                                        </div>

                                        {% if isMobile() or isTablet() %}
                                            <div class="mt-auto">
                                                <ol class="carousel-indicators">
                                                    {% for i in 0..(posts|length - 1) %}
                                                        <li data-target="#teaser-news-{{ teaser.slug }}" data-slide-to="{{ i }}"{% if isFirst %} class="active"{% endif %}></li>
                                                        {% set isFirst = false %}
                                                    {% endfor %}
                                                </ol>
                                            </div>
                                        {% endif %}

                                    {% endif %}

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        {% endfor %}

    </div>
</div>