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

{# ========================================================================= #}
{# :: Settings #}
{# ========================================================================= #}
{% set params = {
  isFullWidth: false,
  styleVendors: [],
  scriptVendors: [],
  scope: ""
} %}

{# ========================================================================= #}
{# :: Info #}
{# ========================================================================= #}
{% set info %}

When the DOM cannot be changed, there is a way to simulate a list. Use the
modifier **o-notifications--simulate-list** to hide all the elements that would
order the notifications visually and visually create a list, but retaining the
same DOM structure as the default.

{% endset %}

{# ========================================================================= #}
{# :: Preview #}
{# ========================================================================= #}
{% set preview %}

{{notifications.default("o-notifications--simulate-list", {
  "2019": {
    "januari": [
      {
        url: "#",
        state: "is-file",
        time: { text: "15-01-2019", format: "2019-01-15" },
        title: "Overzicht van rente en kosten"
      },
      {
        url: "#",
        state: "is-message",
        time: {
          text: "10-01-2019",
          format: "2019-01-10"
        },
        title: "Wat veranderd er voor uw producten?",
        description: "Nullam id dolor id nibh ultricies verhicula ut id elit...",
        hasAttachment: true
      },
      {
        isRead: true,
        url: "#",
        state: "is-message",
        time: { text: "05-01-2019", format: "2019-01-05" },
        title: "Nieuw jaar promotie!"
      }
    ]
  },
  "2018": {
    "december": [
      {
        isRead: true,
        url: "#",
        state: "is-file",
        time: { text: "15-12-2129", format: "2019-01-15" },
        title: "Belastingcertificaat"
      }
    ]
  }
})}}

{% endset %}

{# ========================================================================= #}
{# :: Code #}
{# ========================================================================= #}
{# {% set code %}

{% endset %} #}