{# ========================================================================= #}
{# :: Components #}
{# ========================================================================= #}
{% macro components(classes, data) %}

<article id="{{data.title | lower}}" class="bp-category {{classes}}">

  {% if data.title or data.text %}
    <div class="bp-category__intro">
      {% if data.title %}
        <header class="bp-category__header">
          <h3 class="bp-category__title">{{data.title}}</h3>
        </header>
      {% endif %}

      {% if data.text %}
        <p class="bp-category__text">
          {{data.text}}
        </p>
      {% endif %}
    </div>
  {% endif %}

  <div class="bp-category__content">
    {% for key, value in data.collection %}
      {% if loop.first %}
        <ul class="bp-category__items">
      {% endif %}

        <li class="bp-category__item bp-search-target">
          <a class="bp-category__item-link bp-search-target__value" href="{{value.url}}">
            {{key}}
          </a>
        </li>

      {% if loop.last %}
        </ul>
      {% endif %}
    {% endfor %}
  </div>

</article>

{% endmacro %}

{# ========================================================================= #}
{# :: lists #}
{# ========================================================================= #}
{% macro list(classes, data) %}

<article id="{{data.title | lower}}" class="bp-category bp-category--list {{classes}}">

  <header class="bp-category__header">
    <h3 class="bp-category__title">{{data.title}}</h3>
  </header>

  <div class="bp-category__content">
     <ul class="bp-category__items">
      {% for pageName, pageData in data.collection %}

        <li class="bp-category__item bp-search-target">
          <a class="bp-category__item-link bp-search-target__value" href="{{pageData.url}}">
            {{pageName}}
          </a>
        </li>

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

</article>

{% endmacro %}