{% extends 'template.html.twig' %}

{% block title %}Latest - The Face{% endblock %}

{% block body %}

{% set classes = [
    'page-container',
    'page-container-latest',
] %}

{% set nodeName = 'latest' %}

<section class="{{ classes|join(' ') }}" id="page-container-{{ nodeName }}" data-title="Latest" data-node-type="latest" data-node-name="{{ nodeName }}" data-meta-title="Latest - The Face">
    
    <div class="container-fluid">
        
        <h1 class="page-block in-view-block page-title models-list-title" data-node-type="in-view-block" id="latest-title">Latest</h1>

        {% set latestItemCols = [
            'col-xs-12 col-sm-5', 'col-xs-12 col-sm-offset-1 col-sm-6', 'col-xs-12 col-sm-6', 'col-xs-12 col-sm-offset-1 col-sm-5', 'col-xs-12 col-sm-6', 'col-xs-12 col-sm-offset-1 col-sm-4',
            'col-xs-12 col-sm-5', 'col-xs-12 col-sm-offset-1 col-sm-6', 'col-xs-12 col-sm-6', 'col-xs-12 col-sm-offset-1 col-sm-5', 'col-xs-12 col-sm-6', 'col-xs-12 col-sm-offset-1 col-sm-4',
        ] %}

        {# 1 : 5 / 2 : 6 (offset 1) / 3 : 6 (décalé gauche) / 4 : 5 (offset 1) / 5 : 6 / 6 : 4,5 (offset 1)
        1 : 460/575 / 2 : 560/520 / 3 : 620/775 / 4 : 465/580 / 5 : 560/320 / 6 : 400/500 #}

        <div class="row latest-list" id="latest-list">
        {% for item in latestItems %}
            {% if loop.index <= 6 %} {# 12? #}
                {% set indexOn6 = (loop.index0 % 6) + 1 %}
                <a href="#latest-slideshow-{{ loop.index }}" class="page-block in-view-block no-ajax-link {{ latestItemCols[loop.index0] }} latest-list-block latest-list-block-{{ indexOn6 }} latest-list-block-{% if loop.index0 is odd %}odd{% else %}even{% endif %}" id="latest-list-block-{{ loop.index }}" data-node-type="in-view-block" data-target="latest-slideshow-{{ loop.index }}">
                    <figure class="latest-list-block-image">
                        {% set imgSrc = booker_api_medias_url ~ '/' ~ item.modelId ~ '/' ~ item.thumbHd %}
                        <img src="{{ imgSrc }}" alt="{{ item.titre }}" class="img-responsive latest-list-block-img" />
                    </figure>
                    <h4 class="latest-list-block-overtitle">{{ item.titre }}</h4>
                    <h3 class="latest-list-block-title">{{ item.modelName }}</h3>
                </a>
                {% if loop.index0 % 2 == 1 %}<div class="col-sm-12"></div>{% endif %}
            {% endif %}
        {% endfor %}
        </div>

    </div>

    {% for item in latestItems %}
        {% if loop.index <= 6 %} {# 12? #}
            {% include 'latest/slideshow.html.twig' with 
            {'item':item, 'loop':loop, 'latestItems':latestItems, 'context':'latest'}
            only %} 
        {% endif %}
    {% endfor %}
    
    <div class="latest-slideshow-close-btn latest-slideshow-close-btn-mobile">
        <div class="latest-slideshow-close-btn-bar latest-slideshow-close-btn-bar-1"></div>
        <div class="latest-slideshow-close-btn-bar latest-slideshow-close-btn-bar-2"></div>
    </div>

</section>

{% endblock %}