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

{% block content %}
    <div class="row clearfix">
        <div class="col-md-12">
            <h1 class="registration-sign-up">
                ARTISTS
            </h1>
        </div>
    </div>
    <div class="row clearfix profile-header-box">
        <div class="col-md-8 col-sm-10">
            <div class="filters-button-group">
                {% if searchArtist %}
                    {{ searchArtist }}<a
                    href="{{ path('nordmind_app_artists_remove_filter', {'type': 'artist', value: searchArtist}) }}"
                    class="search-clear-button" data-type="artist"><i
                            class="material-icons">clear</i></a>
                    <br />
                {% endif %}
                {% if searchTags %}
                    {{ searchTags }}<a href="{{ path('nordmind_app_artists_remove_filter', {'type': 'tags', value: searchTags}) }}" class="search-clear-button" data-type="tag"><i
                            class="material-icons">clear</i></a>
                    <br />
                {% endif %}
                {% if searchCategories %}
                    {% for key,searchCategory in searchCategories %}
                        {% if key == 'STILL_LIFE' %}STILL LIFE{% else %}{{ key}}{% endif %}<a
                        href="{{ path('nordmind_app_artists_remove_filter', {'type': 'categories', 'value': key}) }}"
                        class="search-clear-button" data-type="categories" data-key="{{ key }}"><i
                                class="material-icons">clear</i></a> {%  if not loop.last %}|{% endif %}
                    {% endfor %}
                    <br />
                {% endif %}
                {% if searchThemes %}
                    {% for key,searchTheme in searchThemes %}
                        {{ key }}<a href="{{ path('nordmind_app_artists_remove_filter', {'type': 'themes', 'value': key}) }}" class="search-clear-button" data-type="themes"
                                    data-key="{{ key }}"><i class="material-icons">clear</i></a> {%  if not loop.last %}|{% endif %}
                    {% endfor %}
                {% endif %}
            </div>
        </div>
        <div class="col-md-4 col-sm-2">
            <div class="pull-right">
                <span class="sort-panel pull-right">
                <div class="button-group sort-by-button-group" style="margin-right: 5px;">
                    <a href="{{ path('nordmind_app_artists', {'sortBy' : 'date'}) }}" class="button {% if sortBy == 'date' %}is-checked{% endif %} not-last" data-sort-value="date">DATE</a>
                    <a href="{{ path('nordmind_app_artists', {'sortBy' : 'name'}) }}" class="button {% if sortBy == 'name' %}is-checked{% endif %}" data-sort-value="name">NAME</a>
                </div>
            </span>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12">
            <div class="artist-loader-wrapper">
                <div class="loader">
                    <div class="preloader">
                        <img src="/images/logo.png" class="img-responsive"/>
                    </div>
                </div>
            </div>
            <div class="grid infinite-scrolling" id="#grid">
                <div class="grid-sizer"></div>
            </div>
        </div>
    </div>
    {% if not app.user %}
        <div class="row clearfix">
            <h5 class="lp-artist-info"><a href="{{ path('fos_user_security_login') }}" style="margin-left: 5px;">SIGN IN TO SEE MORE RESULTS</a></h5>
        </div>
        {%  else %}
            <div class="row clearfix">
                &nbsp;
            </div>
    {% endif %}
{% endblock content %}
{% block javascript %}
{{ parent() }}
<script type="text/javascript">
// $('.page-loader-wrapper').show();
    $(window).load(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]',
                position: '[data-position]'
            },
            // sort by color then number
            sortBy: 'position'
        });

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


      $grid.infiniteScroll({
        path: function() {
        var pageNumber = ( this.loadCount + 1 );
        return '/artistsPhotos/' + pageNumber;
  },
      debug: false,
      history: false,
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
          }
        }
      );
        var $gallery;
      $grid.on( 'load.infiniteScroll', function( event, response ) {
        $('.artist-loader-wrapper').show();
            var $items = $( response ).find('.grid-item');
        $items.imagesLoaded( function() {

        $grid.infiniteScroll( 'appendItems', $items )
            .isotope( 'appended', $items ).imagesLoaded( function() {
          setTimeout(function (){
                        setTimeout(function () {
                    $('.artist-loader-wrapper').fadeOut();
                    }, 200);
                    $('.artist-loader-wrapper').hide();
                    $grid.isotope('layout');
            }, 500);;
            if ($gallery)
            {
                $gallery.destroy();
            }
            if ($('img.photo-gallery').length > 0) {
            $gallery = $('img.photo-gallery').simpleLightbox({
                captionSelector: 'self'
            });
            }
        }, 200);


  })
});
        $grid.infiniteScroll('loadNextPage');
    });
    $(document.body).on("click", ".photo-favorite", function () {

        if ($(this).find('i').hasClass('is-checked'))
        {
            $(this).find('i').removeClass('is-checked');
            $.post("{{  path('nordmind_artist_photo_favorite_remove') }}", {id: $(this).data('id')});
        }
        else {
            $(this).find('i').addClass('is-checked');
            $.post("{{ path('nordmind_artist_photo_favorite_add') }}", {id: $(this).data('id')});
        }
    });
</script>
{% endblock javascript %}