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

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

<div class="o-notifications {{classes}}">

  {% for year, months in data %}
    <section class="o-notifications__year">
      {# Year stays h2 in the accessibility tree at all breakpoints; visually hidden from tablet up where the month h3 is shown instead (avoids h1 → h3 skip). #}
      <header class="o-notifications__header o-notifications__header--year">
        <h2 class="o-notifications__year-text">{{year}}</h2>
      </header>

      {% for month, content in months %}

        <article class="o-notifications__month">
          <header class="o-notifications__header u-tablet-hide">
            <h3 class="o-notifications__title">
              <span class="o-notifications__month-text">{{month}}</span>
              <span class="o-notifications__year-text">{{year}}</span>
            </h3>
          </header>

          <ul class="o-notifications__list">
            {% for item in content %}

              <li class="o-notifications__item">
                {{notification.default("", item)}}
              </li>

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

      {% endfor %}

    </section>
  {% endfor %}

</div>

{% endmacro %}

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

<div class="o-notifications {{classes}}">
  <ul class="o-notifications__list">

    {% for item in data.items %}

      <li class="o-notifications__item">
        {{notification.default("", item)}}
      </li>

    {% endfor %}

  </ul>
</div>

{% endmacro %}