{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}

{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes, data) %}

<div class="m-notification {{classes}} {{'is-read' if data.isRead}} {{data.state}} {{'has-attachment' if data.hasAttachment}}">
  {% set notificationLabel = data.ariaLabel or ("Open notificatie: " + data.title if data.title else "Open notificatie") %}

  {% if data.overlay %}
    <button
      type="button"
      class="m-notification__link js-overlay-trigger"
      aria-label="{{notificationLabel}}"
      data-overlay-target="{{data.overlay}}"
    ></button>
  {% elseif data.url %}
    <a
      href="{{data.url}}"
      class="m-notification__link"
      aria-label="{{notificationLabel}}"
    ></a>
  {% endif %}

  <div class="m-notification__content">
    {% if data.state %}
      <div class="m-notification__icon">
        <span class="m-notification__icon-visual u-tablet-hide"></span>
        <span class="m-notification__icon-visual m-notification__icon-visual--mobile u-tablet-show"></span>
      </div>
    {% endif %}

    <div class="m-notification__info-container">
      <div class="m-notification__date">
        <time datetime="{{data.time.format}}">{{data.time.text}}</time>
      </div>

      <div class="m-notification__info">
        <p class="m-notification__title">{{data.title}}</p>

        {% if data.description %}
          <p class="m-notification__description u-tablet-hide">{{data.description}}</p>
        {% endif %}
      </div>
    </div>
  </div>

  {% if data.hasAttachment %}
    <span class="m-notification__attachment u-tablet-hide"></span>
  {% endif %}

</div>

{% endmacro %}