{# LATEST SLIDESHOW #}
<div class="page-block latest-slideshow"
    id="latest-slideshow-{{ loop.index }}"
    data-node-type="latest-slideshow"
    data-index="{{ loop.index }}">
    <div class="latest-slideshow-inner">
        <div class="container-fluid latest-slideshow-bar">
            <div class="col-sm-12 col-lg-6 latest-slideshow-bar-links">
                <a href="/" class="no-ajax-link latest-slideshow-bar-back-link">
                    < BACK
                </a>
                <h3 class="latest-slideshow-title">
                    {{ item.modelName }}
                </h3>
                <h4 class="latest-slideshow-subtitle">
                    {{ item.titre }}
                </h4>
            </div>
            <div class="col-sm-12 col-lg-6 text-right latest-slideshow-bar-description">
                {{ item.sousTitre }}
            </div>
        </div>

        <div class="latest-slideshow-images">
            {% for slide in item.slides %}
                {% set layout = slide.type %}
                {# 'image_landscape' - 'image_double' - 'video' - 'image_text' - 'text' #}

                {% set groupClasses = [
                    'latest-slideshow-group',
                    'latest-slideshow-group-' ~ layout
                ] %}
                {% if loop.index0 == 0 %}
                    {% set groupClasses = groupClasses|merge(['active']) %}
                {% endif %}

                <div class="{{ groupClasses|join(' ') }}">
                    {% if layout == 'image_landscape' %}
                        <figure class="latest-slideshow-image"
                            data-index="{{ loop.index0 }}">
                            <img class="img-responsive latest-slideshow-img"
                                src="{{ booker_api_medias_url }}/{{
                                item.modelId
                                }}/{{ slide.img1 }}"
                                data-src="{{ booker_api_medias_url }}/{{
                                item.modelId
                                }}/{{ slide.hd1 }}"
                                data-thumb="{{ booker_api_medias_url }}/{{
                                item.modelId
                                }}/{{ slide.img1 }}" />
                            {# {{ booker_api_medias_url }}/{{ item.modelId }}/{{ slide.img1 }} #}
                        </figure>
                    {% elseif layout == 'image_double' %}
                        <figure class="latest-slideshow-image"
                            data-index="{{ loop.index0 }}">
                            <img class="img-responsive latest-slideshow-img"
                                src="{{ booker_api_medias_url }}/{{
                                item.modelId
                                }}/{{ slide.img1 }}"
                                data-src="{{ booker_api_medias_url }}/{{
                                item.modelId
                                }}/{{ slide.hd1 }}"
                                data-thumb="{{ booker_api_medias_url }}/{{
                                item.modelId
                                }}/{{ slide.img1 }}" />
                            {# {{ booker_api_medias_url }}/{{ item.modelId }}/{{ slide.img1 }} #}
                        </figure>
                        <figure class="latest-slideshow-image"
                            data-index="{{ loop.index0 }}">
                            <img class="img-responsive latest-slideshow-img"
                                src="{{ booker_api_medias_url }}/{{
                                item.modelId
                                }}/{{ slide.img2 }}"
                                data-src="{{ booker_api_medias_url }}/{{
                                item.modelId
                                }}/{{ slide.hd2 }}"
                                data-thumb="{{ booker_api_medias_url }}/{{
                                item.modelId
                                }}/{{ slide.img2 }}" />
                            {# {{ booker_api_medias_url }}/{{ item.modelId }}/{{ slide.img2 }} #}
                        </figure>
                    {% elseif layout == 'video' %}
                        <figure class="latest-slideshow-image"
                            data-index="{{ loop.index0 }}">
                            <video class="model-video-player"
                                controls
                                poster="{{ booker_api_medias_url }}/{{
                                item.modelId
                                }}/{{ slide.vignette }}">
                                {# {{booker_api_medias_url}}/{{item.modelId}}/{{ slide.video }} #}
                                <source src="{{ booker_api_medias_url }}/{{
                                    item.modelId
                                    }}/{{ slide.video }}"
                                    type="video/mp4" />
                            </video>
                        </figure>
                    {% elseif layout == 'image_text' %}
                        <figure class="latest-slideshow-image"
                            data-index="{{ loop.index0 }}">
                            <img class="img-responsive latest-slideshow-img"
                                src="{{ booker_api_medias_url }}/{{
                                item.modelId
                                }}/{{ slide.img1 }}"
                                data-src="{{ booker_api_medias_url }}/{{
                                item.modelId
                                }}/{{ slide.hd1 }}"
                                data-thumb="{{ booker_api_medias_url }}/{{
                                item.modelId
                                }}/{{ slide.img1 }}" />
                            {# {{ booker_api_medias_url }}/{{ item.modelId }}/{{ slide.img1 }} #}
                        </figure>
                        {% if slide.txt and slide.txt != '' %}
                            <div class="latest-slideshow-text">
                                {{ slide.txt|striptags }}
                            </div>
                        {% endif %}
                    {% elseif layout == 'text' %}
                        <div class="latest-slideshow-text">
                            {{ slide.txt|striptags }}
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>

        <div class="latest-slideshow-counter">
            <span class="latest-slideshow-counter-active">1</span>/<span class="latest-slideshow-counter-total">
                {{ item.slides|length }}
            </span>
        </div>
        <div class="latest-slideshow-close-btn">
            CLOSE
        </div>
    </div>
</div>