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

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

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

      {{summary.default("", {
        title: "Dhr. Bogaerts",
        budget: { amount: "1.200,56", classes: "m-summary__budget--large" },
        info: [
          { text: "spaarrekening", classes: "m-summary__info-item--uppercase" },
          { text: "NL48 2152 5466 2587", classes: "m-summary__info-item--uppercase" }
        ],
        content: list.definition("m-list--small", [
          { term: "Opgebouwde rente:", value: budget.default("", { unit: "€", amount: "20,00" }) },
          { term: "Rentepercentage:", value: budget.default("", { unit: "€", amount: "0,25" }) },
          { term: "Rol:", value: "Mederekeninghouder" }
        ])
      })}}
    </div>

    <div class="l-section__footer l-section__footer--full-width">
      {{button.link("a-button--secondary icon-transfer", {
        overlay: "overlay-overbooking-main",
        text: "Nieuwe overboeking"
      })}}
    </div>
  </div>
</div>