{% trans_default_domain 'front_ec_international' %}

<div id="carousel-{{ slider.slug }}"
     class="carousel slide{% if slider.effect == 'fade' %} carousel-fade{% endif %}"
     data-interval="{{ slider.intervalDuration }}"
     data-autoplay="{{ slider.autoplay }}"
     data-ride="carousel">

    {% if medias|length > 1 and slider.indicators %}
        <ol class="carousel-indicators">
            {% for media in medias %}
                <li data-target="#carousel-{{ slider.slug }}"
                    data-slide-to="{{ loop.index - 1 }}"{% if loop.first %} class="active"{% endif %}></li>
            {% endfor %}
        </ol>
    {% endif %}

    <div class="carousel-inner">

        {% set active = true %}
        {% set loopmedianotnull = 0 %}

        {% for media in medias %}
            {% if media.media %}
                {% set loopmedianotnull = loopmedianotnull + 1 %}
            {% endif %}
        {% endfor %}

        {% for media in medias %}
            {% if media.media %}

                {% set i18nMedia = media.i18n %}
                {% set mediaConfig = media|thumbConfiguration(thumbConfiguration, true) %}

                <div class="carousel-item{% if active %} active{% endif %}">

                    <div class="position-relative">
                        {{ media|thumb(mediaConfig, {"btnLink": true}) }}
                        {% if loopmedianotnull != 1 %}
                            {% if medias|length > 1 and slider.control %}
                                <span class="carousel-control-prev cursor" href="#carousel-{{ slider.slug }}"
                                      role="button"
                                      data-slide="prev" aria-label="{{ "Précédent"|trans|raw }}">
           <i class="fal fa-arrow-left"></i>
        </span>
                                <span class="carousel-control-next cursor" href="#carousel-{{ slider.slug }}"
                                      role="button"
                                      data-slide="next" aria-label="{{ "Suivant"|trans|raw }}">
           <i class="fal fa-arrow-right"></i>
        </span>
                            {% endif %}
                        {% endif %}
                    </div>


                    {% if i18nMedia %}

                        {% set mediaTitle = i18nMedia.title %}
                        {% set mediaTitleForce = i18nMedia.titleForce ? i18nMedia.titleForce : 2 %}
                        {% set mediaTitleAlignment = i18nMedia.titleAlignment ? i18nMedia.titleAlignment : 'text-left' %}
                        {% set mediaIntro = i18nMedia.introduction %}
                        {% set mediaIntroAlignment = i18nMedia.introductionAlignment ? i18nMedia.introductionAlignment : 'text-left' %}
                        {% set mediaBody = i18nMedia.body %}
                        {% set mediaBodyAlignment = i18nMedia.bodyAlignment ? i18nMedia.bodyAlignment : 'text-left' %}

                        {% if mediaTitle|striptags|length > 0 or mediaIntro|striptags|length > 0 or mediaBody|striptags|length > 0 %}
                            <div class="carousel-caption d-none d-md-block">
                                {% if mediaTitle|striptags|length > 0 %}
                                    <h{{ mediaTitleForce }}
                                            class="{{ mediaTitleAlignment }} caption-title">{{ mediaTitle|unescape|raw }}</h{{ mediaTitleForce }}>
                                {% endif %}
                                {% if mediaIntro|striptags|length > 0 %}
                                    <p class="introduction text-bold {{ mediaIntroAlignment }}">{{ mediaIntro|unescape|raw|nl2br }}</p>
                                {% endif %}
                                {% include 'front/' ~ websiteTemplate ~ '/blocks/link.html.twig' with {'i18n': i18nMedia} %}
                            </div>
                        {% endif %}

                        {% if mediaBody %}
                            <div class="mt-3 text-primary text-center">{{ mediaBody|raw }}</div>
                        {% endif %}
                    {% endif %}
                </div>
                {% set active = false %}
            {% endif %}
        {% endfor %}
    </div>
</div>