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

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

{% block body %}
    {% set classes = ['page-container', 'page-container-home'] %}

    <section class="{{ classes|join(' ') }}"
        id="page-container-home"
        data-title="Home"
        data-node-type="home"
        data-node-name="home"
        data-meta-title="Home - The Face">
        <div id="home-logo-cont">
            <div id="home-logo">
                {% include 'svg/use.svg.twig' with {
                    classes: ['the-face-icon', 'home-logo-icon'],
                    icon: 'icon-the-face'
                } only %}
            </div>
            <h1 id="home-title">
                The Face - Paris
            </h1>
        </div>

        {# --- LATEST --- #}
        <div class="page-block home-part"
            id="home-latest"
            data-node-type="home-latest">
            <div class="container-fluid" id="home-latest-inner">
                <h2 class="part-title home-part-title">
                    News
                </h2>

                <div class="row latest-list" id="home-latest-list">
                    {% for item in latestItems %}
                        {% if item.thumbHd is defined %}
                            {# {{ dump(item) }} #}
                            <a href="#latest-slideshow-{{ loop.index }}"
                                class="page-block in-view-block no-ajax-link latest-list-block col-xs-12 col-sm-6 col-md-4"
                                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>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>

        {# --- LATEST SLIDESHOW --- #}
        {% for item in latestItems %}
            {% if item.thumbHd is defined %}
                {# 12? #}
                {% include 'latest/slideshow.html.twig' with {
                    item: item,
                    loop: loop,
                    latestItems: latestItems,
                    context: 'home'
                } 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 %}