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

{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes, data) %}
  <div class="o-categories u-mobile-hide {{classes}}">

    {% for item in data %}
      {{category.default("o-categories__item " + item.classes,
        {
          category: item.category,
          icon: item.icon
        }
      )}}
    {% endfor %}
  </div>

  <div class="m-filter m-collapse js-m-collapse u-mobile-show o-categories__filter">
    <div class="m-collapse__header m-filter__header">
      <h6>Populairste vragen</h6>
    </div>
    <div class="m-collapse__content m-filter__content">
      <div class="m-collapse__content__container m-filter__content__container">
        <ul class="m-list m-list--no-type">

          {% for item in data %}
            <li class="m-list__item m-filter__item">
              {{link.default(item.icon, item.category)}}
            </li>

          {% endfor %}

        </ul>
      </div>
    </div>
  </div>
{% endmacro %}