{% assign collection = site %}

{% if include.only and include.facet_by %}

{% assign subset = collection | where: include.facet_by, include.only %}

{% endif %}

<div id='wax-gallery-{{ include.collection }}-container' class='wax-gallery-container full-width'>

<div class='wax-inline-container'>
  <div id="{{ include.collection }}-facet-buttons" class="facet-buttons"></div>
  <div id="wax-gallery-{{ include.collection }}" class="wax-gallery"></div>
</div>

</div>

<script type=“text/javascript”>

$( document ).ready(function() {
  var container = $('#wax-gallery-{{ include.collection }}-container');
  var gallery = $('#wax-gallery-{{ include.collection }}');
  var buttonDiv = $('#{{ include.collection }}-facet-buttons');

  {% if subset %}
    {% for item in subset %}
      {%- capture item_html -%}
        "<div class='gallery-item {{ item[include.facet_by] | slugify }} all'><a href='{{ item.url | absolute_url }}'><div class='hovereffect'><img class='img-responsive gallery-thumb' src='{{ item.thumbnail | absolute_url }}'/><div class='overlay'><p class='info'>{{ item.label }}</p></div></div></a></div>"
      {%- endcapture -%}
      gallery.append({{ item_html | strip_newlines }});
    {% endfor %}
  {% else %}
    {% for item in collection %}
      {%- capture item_html -%}
        "<div class='gallery-item {{ item[include.facet_by] | slugify }} all'><a href='{{ item.url | absolute_url }}'><div class='hovereffect'><img class='img-responsive gallery-thumb' src='{{ item.thumbnail | absolute_url }}' alt='{{ item.label }}'/><div class='overlay'><p class='info'>{{ item.label }}</p></div></div></a></div>"
      {%- endcapture -%}
      gallery.append({{ item_html | strip_newlines }});
    {% endfor %}
  {% endif %}

  {% if include.facet_by %}
    {% unless subset %}
      var facets = Array.from(new Set([{%- for item in collection -%}'{{ item[include.facet_by] | slugify }}'{% unless forloop.last %}, {% endunless %}{%- endfor -%}]));
      buttonDiv.append("<button class='btn facet active' data-filter='all'>show all</button>");

      for (i in facets) {
        buttonDiv.append(`<button class='btn facet' data-filter='${facets[i]}'>${facets[i]}</button>`);
      }

      $(document).ready(function(){
        $(".facet").click(function(){
          var filterValue = $(this).attr('data-filter');
          $('.facet').removeClass('active');
          $(this).addClass('active');
          if(filterValue == 'all') { $('.all').show('slow'); }
          else { $('.all').hide('slow'); $(`.${filterValue}`).show('slow'); }
        });
      });
    {% endunless %}
  {% endif %}
});

</script>