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

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

{# ========================================================================= #}
{# :: Summary - content #}
{# ========================================================================= #}
{% set alertText %}
  <div class="flex align-center gap-0-5">
    <p>Je spaart totaal</p>

    {{tooltip.default("", {
      icon: "icon-info",
      text: "This is some extra information."
    })}}
  </div>

  <span><b class='p--size-2x'>€ 1.116,00</b></span>

  <p>Aan deze berekening kun je geen rechten ontlenen.</p>
{% endset %}

{% set content %}
  <div class="l-content">
    <div class="l-content__item flex flex-col gap-0-5">
      <div class="flex justify-between align-center gap-0-5">
        <span>2% verstreken</span>

        <span class="text-right">Loopt af op 22-12-2024</span>
      </div>

      {{progress.default("a-progress--green a-progress--rounded", {
        value: "2%"
      })}}
    </div>

    <div class="l-content__item">
      {{list.definitionGrid("m-list--small variant-deposito", [
        { term: "Van", value: "01-01-2019" },
        { term: "Tot", value: "01-07-2019" },
        { term: "Rentepercentage", value: budget.default("", { suffix: "%", amount: "2,90" }) }
      ])}}
    </div>

    {{alert.default("l-content__item", {
      text: alertText
    })}}

    <div class="l-content__item">
      {{button.default("a-button--secondary", {
        text: "Termijndeposito annuleren",
        icon: "icon-close"
      })}}

      <p class="mt-1"><small>Voor een termijndeposto geldt een bedenktijd van 14 dagen. Binnen deze periode kun je jouw termijndeposito gratis annuleren.</small></p>
    </div>
  </div>
{% endset %}

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

      {{summary.default("l-content__item", {
        title: "Struijk & Gielen",
        budget: { amount: "250,00", classes: "m-summary__budget--large" },
        info: [
          { text: "Referentienummer: C3L22CW0GOOAOENT" },
          { text: "Gekoppelde tegenrekening: NL22DNIB2018906909" }
        ],
        content: content
      })}}
    </div>
  </div>
</div>