{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}

{# atoms #}
{% import "styleguides/general/atoms/button/button-macros.njk" as button %}
{% import "styleguides/general/atoms/switch/switch-macros.njk" as switch %}
{% import "styleguides/general/atoms/toggle/toggle-macros.njk" as toggle %}

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

{# ========================================================================= #}
{# :: Data #}
{# ========================================================================= #}
{% set contentSwitch %}
  <p class="m-new-account__intro">
    Laat je je geld een kalenderkwartaal lang staan? Dan krijg je van ons een bonusrente.
  </p>

  <p class="m-new-account__rate u-visual-h1">
    <span class="m-new-account__perc">%</span> 0,30<sup>*</sup>
  </p>

  {{switch.default("", {
    id: "switch-new-account-1",
    labelOn: "Variabel rente",
    labelOff: "Vast rente"
  })}}
{% endset %}

{% set action %}
  {{button.default("m-card__action-button", { text: "Deze rekening openen" })}}

  <small><sup>*</sup>0,25% Basisrente + 0.05% Bonusrente</small>
{% endset %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
{{newAccount.default("", {
  title: "Kwartaalspaarrekening",
  content: [
    contentSwitch,
    list.withIcons("m-new-account__list", {
      items: [
        "Sparen met een variabele rente",
        "Je regelt alles direct online",
        "Geen minimum inleg en geen kosten"
      ],
      icon: "icon-checkmark"
    })
  ],
  action: action
})}}