{% set CARD_DEFAULTS = {
  className: '',
  title: '',
  titleTag: 'h3',
  text: '',
  image: true,
  imageSettings: {
    className: 'card__image-container',
    image: {
      src: '605x342',
      className: 'card__image',
      width: 432,
      height: 244
    },
    sources: []
  },
  tags: [
    {
      className: 'badge--light-grey badge--xs',
      text: 'Very long category'
    },
    {
      className: 'badge--light-grey badge--xs',
      text: 'Category'
    }
  ],
  date: {
    start: '',
    stop: ''
  },
  location: '',
  author: '',
  pubDate: '',
  deleteButton: false
} %}

{% macro Card( settings = {} ) %}
  {% set settings = merge(CARD_DEFAULTS, settings) %}

  <article class="card {{ settings.className }}">
    <div class="card__placeholder">
      {% if settings.image %}
        {{ Image( settings.imageSettings ) }}
      {% else %}
        {{ ImagePlaceholder() }}
      {% endif %}
    </div>
    <div class="card__content">
      {% if settings.tags | length %}
        <div class="card__tags">
          {% for item in settings.tags %}
            {{ Badge(item) }}
          {% endfor %}
        </div>
      {% endif %}
      <{{ settings.titleTag }} class="card__title">
        <a href="#" class="card__link"><span>{{ settings.title }}</span></a>
      </{{ settings.titleTag }}>
      <p class="card__text">{{ settings.text }}</p>
      {% if settings.author or settings.pubDate %}
        <div class="card__footer">
          <div class="card__footer-wrapper">
            {% if settings.author %}
              <p class="card__author">{{ settings.author }}</p>
            {% endif %}
            {% if settings.pubDate %}
              <p class="card__date"><time datetime="2022-05-19">{{ settings.pubDate }}</time></p>
            {% endif %}
          </div>
          {% if settings.deleteButton %}
            {{ Button({
              className: 'button--primary-borderless button--icon button--lg  button--relative',
              text: '',
              iconBefore: ['delete'],
              attrs: {
                'aria-label': 'DEFAULT LABEL'
              }
            }) }}
          {% endif %}
        </div>
      {% endif %}
    </div>
  </article>
{% endmacro %}
