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

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

    <header class="l-section__header">
      <h2 class="l-section__title">Mijn termijndeposito's</h2>
      <p class="l-section__sub-title l-section__sub-title--italic">
        <span class="sr-only">Totaal saldo:</span>
        &euro; 1.000
      </p>
    </header>

    <div class="l-section__content">

      <div class="o-account-list">
        <ul class="o-account-list__grid {{classes}}">
          <li class="o-account-list__item">
            {{summary.default("m-summary--contained", {
              asButton: true,
              titleLevel: 3,
              ariaLabel: "Termijndeposito eindigend op 2587, saldo euro 1.200,56, bekijk details",
              ariaHidden: true,
              icon: "icon-coin-locked",
              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 nieuw termijndeposito",
              overlay: "overlay-new-deposito",
              icon: "icon-plus",
              text: "Open een nieuw termijndeposito",
              url: "#"
            })}}
          </li>
        </ul>

        {{showMore.default("o-account-list__show-more u-tablet-show", {
          amount: "5",
          text: "Geplande overboekingen"
        })}}

        {{addNew.default("o-account-list__add u-tablet-show", {
          asButton: true,
          ariaLabel: "Open een nieuw termijndeposito",
          overlay: "overlay-new-deposito",
          icon: "icon-plus",
          text: "Open een nieuw termijndeposito",
          url: "#"
        })}}
      </div>

    </div>

    <div class="l-section__footer l-section__footer--center">
      {{pagination.default()}}
    </div>

  </div>
</section>