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

{% block title %} {{ 'footer.gallerymetatitle'|trans }} {% endblock %}
{% block description %} {{ 'footer.gallerymetadesc'|trans }}  {% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css"/>
{% endblock %}

{% block body %}

  {% include "front/inc/breadcrumb.html.twig" 
    with { 
        'current_page': 'footer.galeriephotos'|trans ,
        'content_title': 'footer.galeriephotos'|trans,
        'image' : null
    } 
    %}

<div class="cheque-gallery">
    <section class="intro-">
        <p>
            {{ 'galerie.intro.text.1'|trans|raw }}
        </p>
    </section>
    <div class="gallery">
        <div class="container-gellery">
            <section class="grid-wrap">
                <ul class="grid swipe-right" id="grid">
                    {% if galeries|length > 0 %}
                        {% for key,image in galeries %}
                            <li>
                                <a href="{{ cdn_url ~ '/upload/gallery/' ~ image.image }}" data-fancybox="gallery" data-caption="image{{key}}">
                                    <img src="{{ cdn_url ~ '/upload/gallery/' ~ image.image }}" alt="Image" />
                                </a>
                            </li>
                        {% endfor %}
                    {% endif %}
                    
                </ul>
            </section>
        </div>
    </div>
</div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('front/js/jsStatic/modernizr.min.js') }}"></script>
    <script src="{{ asset('front/js/jsStatic/gallery.js') }}"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" defer></script>
{% endblock %}