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

{% block title %}La galerie{% endblock %}

{% block stylesheets %}
{% endblock %}

{% block body %}
    <div class="v-page-wrap clearfix">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="v-portfolio-wrap">
                        {% if (photos|length) > pagination %}
                            <div class="v-portfolio-filter-wrap row clearfix">
                                <ul class="v-portfolio-filter-nav bar-styling filtering col-sm-12 clearfix">
                                    <!--<li class="page-item disabled">
                                        <span class="page-link">Previous</span>
                                    </li>-->
                                    {% for i in 1..((photos|length) / pagination)| round(0, 'ceil') %}
                                        <li class="page-item"><a class="page-link" data-filter=".page-{{ i }}"
                                                                 href="#">{{ i }}</a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        {% endif %}
                        <ul class="v-portfolio-items masonry-items masonry-fw filterable-items column-3 row clearfix">
                            {% for photo in photos %}
                                {% set page = (loop.index / pagination)  | round(0, 'ceil') %}
                                <li class="clearfix v-portfolio-item col-sm-3 masonry-item masonry-gallery-item page-{{ page }}">
                                    <figure class="lightbox animated-overlay overlay-alt clearfix">
                                        <img src="https://www.kiwicloudcms.com/content/picture/id/{{ photo.photo }}/ql/600x600"
                                             class="attachment-full"/>
                                        <a class="view" rel="image-gallery-{{ page }}"
                                           href="https://www.kiwicloudcms.com/content/picture/id/{{ photo.photo }}/ql/1000x1000"
                                        ></a>
                                        <figcaption>
                                            <div class="thumb-info thumb-info-v2">
                                                <i class="fa fa-angle-right"></i>
                                            </div>
                                        </figcaption>
                                    </figure>
                                    <div class="v-portfolio-item-info">
                                        <div class="v-portfolio-item-title">
                                            <a class="view"
                                               href="https://www.kiwicloudcms.com/content/picture/id/{{ photo.photo }}/ql/1000x1000">{{ photo.auteur }}</a>
                                        </div>
                                        <h5 class="v-portfolio-subtitle">{{ photo.technique }}</h5>
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        $(document).ready(function () {
            $('.v-portfolio-filter-nav > .page-item > .page-link[data-filter=".page-1"]').click();
        });

    </script>
{% endblock %}