{% extends 'base.html.twig' %}
{% block title %}{% trans from 'meta' %}library.title{% endtrans %}{% endblock %}
{% block meta %}
    <meta name="robots" content="index,follow">
    <meta name="description" lang="{{ app.request.locale }}"
          content="{% trans from 'meta' %}library.description{% endtrans %}">
    <meta property="og:site_name" content="{% trans from 'meta' %}library.title{% endtrans %}">
    <meta property="og:title" content="{% trans from 'meta' %}library.title{% endtrans %}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ app.request.uri }}">
    <meta property="og:image" content="{{ absolute_url('bundles/cpcreationtheme1/images/logo.jpg') }}">
    <meta property="og:locale" content="{{ app.request.locale }}">
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:image:width" content="600">
    <meta property="og:image:height" content="450">
    <meta property="og:description"
          content="{% trans from 'meta' %}library.description{% endtrans %}">
    <link rel="canonical" href="{{  absolute_url(path('library')) }}" >
{% endblock meta %}
{% block header_bottom %}
    <div class="grid-container title">
        <h1>{% trans %}library.title{% endtrans %}</h1>
    </div>
{% endblock %}
{% block content %}
    <section id="gallery">
        <div class="grid-container instagram">
            <h2 class="text-center">Instagram</h2>
            <div class="photos grid-x grid-margin-x grid-margin-y small-up-2 medium-up-3 large-up-3" itemscope itemtype="http://schema.org/ImageGallery">
                {% if instagram is defined %}
                    {% if instagram.data is defined %}
                        {% for media in instagram.data if instagram.data is defined %}
                            <figure data-href="{{ media.images.standard_resolution.url }}"
                                    class="cell effect-lexi progressive replace {% if (media.videos is defined) %}insta-video{% endif %}" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                                <img src="{{ media.images.standard_resolution.url }}"
                                     class="preview"
                                     alt="{% if media.caption.text is defined %}{{ media.caption.text|striptags }}{% endif %}"/>
                                <meta itemprop="contentUrl" content="{{ media.images.standard_resolution.url }}" />
                                <meta itemprop="width" content="1000"/>
                                <meta itemprop="height" content="1000"/>
                                <figcaption>
                                    <p itemprop="caption description">{% if media.caption.text is defined %}{{ media.caption.text | slice (0,60) }} ... {% endif %}
                                        <br/> {{ media.created_time | date('d/m/Y H:i') }}</p>
                                    <a href="{{ media.link }}" target="_blank" title="{% if media.caption is defined %}{{ media.caption|striptags }}{% endif %}">Voir plus</a>
                                </figcaption>
                                <div itemprop="copyrightHolder" itemscope itemtype="http://schema.org/Organization">
                                    <meta itemprop="legalName" content="{{ 'company'|trans }}" />
                                </div>
                            </figure>
                        {% endfor %}
                    {% endif %}
                {% endif %}
                {% if basic_instagram is defined %}
                    {% if basic_instagram.data is defined %}
                        {% for media in basic_instagram.data if basic_instagram.data is defined %}
                            <figure class="cell effect-lexi {% if (media.media_type == 'VIDEO') %}insta-video{% endif %}" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                                <img src="{% if (media.media_type == 'VIDEO') %}{{ media.thumbnail_url }}{% else %}{{ media.media_url }}{% endif %}"
                                     class="preview"
                                     alt="{% if media.caption is defined %}{{ media.caption|striptags }}{% endif %}"/>
                                <meta itemprop="contentUrl" content="{% if (media.media_type == 'VIDEO') %}{{ media.thumbnail_url }}{% else %}{{ media.media_url }}{% endif %}" />
                                <meta itemprop="width" content="640"/>
                                <meta itemprop="height" content="640"/>
                                <figcaption>
                                    <p itemprop="caption description">{% if media.caption is defined %}{{ media.caption | slice (0,60) }} ... {% endif %}
                                        <br/> {{ media.timestamp | date('d/m/Y H:i') }}</p>
                                    <a href="{{ media.permalink }}" target="_blank" title="{% if media.caption is defined %}{{ media.caption|striptags }}{% endif %}">Voir plus</a>
                                </figcaption>
                                <div itemprop="copyrightHolder" itemscope itemtype="http://schema.org/Organization">
                                    <meta itemprop="legalName" content="{{ 'company'|trans }}" />
                                </div>
                            </figure>
                        {% endfor %}
                    {% endif %}
                {% endif %}
                {% if facebook_instagram is defined %}
                    {% if facebook_instagram.data is defined %}
                        {% for media in facebook_instagram.data %}
                            <figure class="cell effect-lexi {% if (media.media_type == 'VIDEO') %}insta-video{% endif %}" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                                <img src="{% if (media.media_type == 'VIDEO') %}{{ media.thumbnail_url }}{% else %}{{ media.media_url }}{% endif %}"
                                     class="preview"
                                     alt="{% if media.caption is defined %}{{ media.caption|striptags }}{% endif %}"/>
                                {% if (media.media_type == 'VIDEO') %}
                                    <meta itemprop="contentUrl" content="{{ media.thumbnail_url }}" />
                                {% else %}
                                    <meta itemprop="contentUrl" content="{{ media.media_url }}" />
                                {% endif %}
                                <meta itemprop="width" content="1000"/>
                                <meta itemprop="height" content="1000"/>
                                <figcaption>
                                    <p itemprop="caption description">{% if media.caption is defined %}{{ media.caption | slice (0,60) }} ... {% endif %}
                                        <br/> {{ media.timestamp | date('d/m/Y H:i') }}</p>
                                    <a href="{{ media.permalink }}" target="_blank" title="{% if media.caption is defined %}{{ media.caption|striptags }}{% endif %}">Voir plus</a>
                                </figcaption>
                                <div itemprop="copyrightHolder" itemscope itemtype="http://schema.org/Organization">
                                    <meta itemprop="legalName" content="{{ 'company'|trans }}" />
                                </div>
                            </figure>
                        {% endfor %}
                    {% endif %}
                {% endif %}
            </div>
        </div>
        <br/>
        <p class="or">{% trans %}library.or{% endtrans %}</p>
        <div class="grid-container">
            <h2 class="text-center">Portfolio</h2>
            <p class="subtitle text-center"></p>
            <div class="grid-x gallery-container">
                <div class="medium-12 large-10 text-center large-image">
                    <img class="swiper-gallery"
                         src="{{ asset(libraries[0].image.path | imagine_filter('relative_heighten_780_filter')) }}"
                         alt="">
                    <img class="swiper-gallery-horizontal"
                         src="{{ asset(libraries[0].image.path | imagine_filter('relative_heighten_350_filter')) }}"
                         alt="">
                    <div class="legend">{{ libraries[0].legend | raw }}</div>
                </div>
                <div class="medium-12 large-2 gallery">
                    <div class="swiper-container swiper-gallery-horizontal">
                        <div class="swiper-wrapper">
                            {% for item in libraries %}
                                <div class="swiper-slide" data-index="{{ loop.index }}" data-legend="{{ item.legend }}"
                                     data-image="{{ item.image.path | imagine_filter('relative_heighten_350_filter') }}">
                                    <img
                                            src="{{ item.image.path | imagine_filter('thumbnail_80_filter') }}"
                                            alt="{% if item.title %}{{ item.title }}{% endif %}">
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="swiper-container swiper-gallery">
                        <div class="swiper-wrapper">
                            {% for item in libraries %}
                                <div class="swiper-slide" data-index="{{ loop.index }}" data-legend="{{ item.legend }}"
                                     data-image="{{ item.image.path | imagine_filter('relative_heighten_780_filter') }}">
                                    <img
                                            src="{{ item.image.path | imagine_filter('thumbnail_150_filter') }}"
                                            alt="{% if item.title %}{{ item.title }}{% endif %}">
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
