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

{% block content %}
    <div class="row clearfix">
        <div class="col-md-12">
            <h1 class="registration-sign-up">{% trans %}REVIEW{% endtrans %}
                <span class="sort-panel pull-right">
                    <div class="button-group sort-by-button-group">
                        <a href="#" class="button is-checked not-last" data-sort-value="name, date"/>{% trans %}ARTISTS A-Z{% endtrans %}</a>
                        <a href="#" class="button" data-sort-value="date, name"/>{% trans %}DATE{% endtrans %}</a>
                    </div>
                </span>
            </h1>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-2">
            <div class="left-sidebar-info">
                <p class="main-text">&#9632; {% trans %}See top picks of the week from Select:OFF!{% endtrans %}
                <p>
                <p class="grey-text">{% trans %}Theme of the week{% endtrans %}: PORTRAITS</p>
            </div>
        </div>
        <div class="col-md-10">
            <div class="grid infinite-scrolling" id="#grid">
                <div class="grid-sizer"></div>
                {% include 'nordmindAppBundle:Default:photoGrid.html.twig' with {'photos': photos} %}
            </div>
        </div>
    </div>
    <div class="row clearfix">
        &nbsp;
    </div>
{% endblock content %}
{% block javascript %}
{{ parent() }}
<script type="text/javascript">
    $(function () {
        var $grid = $('.grid').isotope({
            // set itemSelector so .grid-sizer is not used in layout
            itemSelector: '.grid-item',
            percentPosition: true,
            masonry: {
                // use element for option
                columnWidth: '.grid-sizer'
            },
            getSortData: {
                name: '[data-name]',
                date: '[data-date]'
            },
            // sort by color then number
            sortBy: ['name', 'date']
        });

        $grid.imagesLoaded().progress(function () {
            $grid.isotope('layout');
        });

        $('.sort-by-button-group').on('click', 'a', function () {
            var sortValue = $(this).attr('data-sort-value');
            // make an array of values
            sortValue = sortValue.split(',');
            $grid.isotope({sortBy: sortValue});
        });

        var $gallery;
        if ($gallery)
        {
            $gallery.destroy();
        }
        if ($('img.photo-gallery').length > 0) {
        $gallery = $('img.photo-gallery').simpleLightbox({
            captionSelector: 'self'
        });
        }

// change is-checked class on buttons
        $('.button-group').each(function (i, buttonGroup) {
            var $buttonGroup = $(buttonGroup);
            $buttonGroup.on('click', 'a', function () {
                $buttonGroup.find('.is-checked').removeClass('is-checked');
                $(this).addClass('is-checked');
            });
        });
    });


</script>
{% endblock javascript %}