{% from '../rte/rte.njk' import RTE %}


{% set TAG_DEFAULTS = {
  className: '',
  text: '',
  href: '',
  isPrimary: false,
  isMedium: false,
  isBehaviorWhite: false,
  isRed: false,
  isYellow: false,
  isPurple: false,
  isBlue: false,
  isWhite: false,
  isActive: false,
  attrs: {}
} %}

{% macro Tag(settings = {}) %}
  {% set settings = merge(TAG_DEFAULTS, settings) %}
  {% set classNames = [
    'tag',
    'tag--primary' if settings.isPrimary,
    'tag--md' if settings.isMedium,
    'tag--behavior-white' if settings.isBehaviorWhite,
    'tag--red' if settings.isRed,
    'tag--yellow' if settings.isYellow,
    'tag--purple' if settings.isPurple,
    'tag--blue' if settings.isBlue,
    'tag--white' if settings.isWhite,
    'is-active' if settings.isActive,
    settings.className
  ] %}

  {% if settings.href %}
    <a href="{{ settings.href }}" class="{{ setClass(classNames) }}" {{ Helpers.setAttributes(settings.attrs) }}>{{ settings.text }}</a>
  {% else %}
    <span class="{{ setClass(classNames) }}" {{ Helpers.setAttributes(settings.attrs) }}>{{ settings.text }}</span>
  {% endif %}
{% endmacro %}


{% macro TagsList(settings = {}) %}
  <div class="tags-list {{ settings.className }}">
    {{ caller() }}
  </div>
{% endmacro %}

{% macro TagsTopLayoutSection() %}
  {% call Section({
    className: 'section--offset-bottom-lg',
    title: false,
    teaser: false
  }) %}
    {% call TagsList() %}
      {{ Tag({
        isActive: true,
        isMedium: true,
        href: '#',
        text: 'Obst & Gemüse'
      }) }}
      {{ Tag({
        isRed: true,
        isMedium: true,
        href: '#',
        text: 'Fleisch & Wurst'
      }) }}
      {{ Tag({
        isPurple: true,
        isMedium: true,
        href: '#',
        text: 'Blumen & Pflanzen'
      }) }}
      {{ Tag({
        isBlue: true,
        isMedium: true,
        href: '#',
        text: 'Fisch '
      }) }}
      {{ Tag({
        isYellow: true,
        isMedium: true,
        href: '#',
        text: 'Service'
      }) }}
      {{ Tag({
        isWhite: true,
        isMedium: true,
        href: '#',
        text: 'Weitere Lebensmittel'
      }) }}
    {% endcall %}
  {% endcall %}
{% endmacro %}