{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{# molecules #}
{% import "styleguides/general/molecules/summary/summary-macros.njk" as summary %}
{% import "styleguides/general/molecules/add-new/add-new-macros.njk" as addNew %}

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

<div class="o-account-list">
  <ul class="o-account-list__grid">
    <li class="o-account-list__item">
      {{summary.default("", {
        url: "#",
        titleLevel: 3,
        icon: "icon-coin-stack",
        title: "J.Bogaerts",
        budget: { amount: "1.200,56" },
        info: [
          { text: "spaarrekening", classes: "m-summary__info-item--uppercase" },
          { text: "NL48 2152 5466 2587", classes: "m-summary__info-item--uppercase" }
        ]
      })}}
    </li>

    <li class="o-account-list__item">
      {{summary.default("", {
        url: "#",
        titleLevel: 3,
        icon: "icon-coin-saving",
        title: "J.Bogaerts",
        budget: { amount: "1.200,56" },
        info: [
          { text: "spaarrekening", classes: "m-summary__info-item--uppercase" },
          { text: "NL48 2152 5466 2587", classes: "m-summary__info-item--uppercase" }
        ]
      })}}
    </li>

    <li class="o-account-list__item">
      {{summary.default("", {
        url: "#",
        titleLevel: 3,
        icon: "icon-coin-saving",
        title: "J.Bogaerts",
        budget: { amount: "1.200,56" },
        info: [
          { text: "spaarrekening", classes: "m-summary__info-item--uppercase" },
          { text: "NL48 2152 5466 2587", classes: "m-summary__info-item--uppercase" }
        ]
      })}}
    </li>

    <li class="o-account-list__item u-tablet-hide">
      {{addNew.default("", {
        icon: "icon-plus",
        text: "Een rekening toevoegen",
        url: "#"
      })}}
    </li>
  </ul>

  {{addNew.default("o-account-list__add u-tablet-show", {
    icon: "icon-plus",
    text: "Een rekening toevoegen",
    url: "#"
  })}}
</div>

{% endmacro %}