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

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


{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
<section class="l-section">
  <div class="l-container">

    <header class="l-section__header l-section__header--with-action">
      <div class="l-section__header-content">
        <h2 class="l-section__title">Mijn spaarrekeningen</h2>
        <p class="l-section__sub-title l-section__sub-title--italic">
          <span class="sr-only">Totaal saldo:</span>
          &euro; 26.200,56
        </p>
      </div>

      <div class="l-section__header-actions u-tablet-hide">
        {{button.link("a-button--secondary icon-transfer", {
          text: "Overboeking"
        })}}
      </div>
    </header>

    <div class="l-section__content">

      <div class="o-account-list o-account-list--equal-height">
        <ul class="o-account-list__grid">
          <li class="o-account-list__item">
            {{summary.default("m-summary--contained", {
              asButton: true,
              titleLevel: 3,
              ariaLabel: "Spaarrekening eindigend op 2587, saldo euro 1.200,56, bekijk details",
              ariaHidden: true,
              icon: "icon-coin-stack",
              title: "Tanja Janjic Janjic",
              budget: { amount: "1.200,56" },
              info: [
                { text: "kwartaalspaarrekening", classes: "m-summary__info-item--uppercase"},
                { text: "NL48 2152 5466 2587" }
              ],
              copyButton: {
                label: "Kopieer rekeningnummer"
              }
            })}}
          </li>

          <li class="o-account-list__item">
            {{summary.default("m-summary--contained", {
              asButton: true,
              titleLevel: 3,
              ariaLabel: "Spaarrekening eindigend op 2587, saldo euro 1.200,56, bekijk details",
              ariaHidden: true,
              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" }
              ],
              copyButton: {
                label: "Kopieer rekeningnummer"
              }
            })}}
          </li>

          <li class="o-account-list__item">
            {{summary.default("m-summary--contained", {
              asButton: true,
              titleLevel: 3,
              ariaLabel: "Spaarrekening eindigend op 2587, saldo euro 1.200,56, bekijk details",
              ariaHidden: true,
              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" }
              ],
              copyButton: {
                label: "Kopieer rekeningnummer"
              }
            })}}
          </li>

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

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

  </div>
</section>