{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "styleguides/general/atoms/badge/badge-macros.njk" as badge %}


{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes, data) %}
  <div class="m-show-more {{classes}}">
    {% set controlLabel = data.ariaLabel or data.text or "Toon meer" %}

    {% if data.url %}
      <a
        class="m-show-more__link"
        href="{{data.url}}"
        aria-label="{{controlLabel}}"
      ></a>
    {% else %}
      <button
        type="button"
        class="m-show-more__link"
        aria-label="{{controlLabel}}"
      ></button>
    {% endif %}

    <p class="m-show-more__text">
      {{data.text}}

      {% if data.amount %}
        {{badge.default("m-show-more__badge", {
          text: data.amount
        })}}
      {% endif %}
    </p>

    <span class="m-show-more__arrow"></span>
  </div>
{% endmacro %}