{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "molecules/list/list-macros.njk" as list %}
{% import "atoms/checkbox/checkbox-macros.njk" as checkbox %}
{% import "atoms/label/label-macros.njk" as label %}
{% import "atoms/link/link-macros.njk" as link %}

{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes, title) %}
<div class="m-filter m-collapse js-m-collapse {{classes}}">
  <div class="m-collapse__header m-filter__header">
    <h6>{{title}}</h6>
  </div>
  <div class="m-collapse__content m-filter__content">
		<div class="m-collapse__content__container m-filter__content__container">
      {{checkbox.default("m-filter__item", {
        text: "Checkbox",
        name: "checkbox-styleguide-example"
      })}}
      {{checkbox.default("m-filter__item", {
        text: "Checkbox",
        name: "checkbox-styleguide-example"
      })}}
      {{checkbox.default("m-filter__item", {
        text: "Checkbox",
        name: "checkbox-styleguide-example"
      })}}
    </div>
  </div>
</div>

{% endmacro %}

{# ========================================================================= #}
{# :: Desktop #}
{# ========================================================================= #}
{% macro desktop(classes, data) %}
	<div class="m-filter-group">
		<div class="m-filter-group__title">
			{{label.default("", data.title)}}
		</div>
		<div class="m-filter-group__items">
			{% for item in data.items %}
				<div class="m-filter-group__item">
					{{item}}
				</div>
			{% endfor %}
			<div class="m-filter-group__item">
				{{link.default("a-link--inline", "Reset filter")}}
			</div>
		</div>
	</div>
{% endmacro %}