{# ========================================================================= #}
{# :: 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 %}

{% set contentToggle %}
  <h3 class="u-visual-h4">Voor wie wil je deze rekening openen?</h3>

  <div class='m-new-account__toggle'>
    {{toggle.default("", {
      name: "contentToggle",
      id: "single",
      text: "profile",
      icon: "icon-person",
      isChecked: true
    })}}

    {{toggle.default("", {
      name: "contentToggle",
      id: "group",
      text: "group",
      icon: "icon-group",
      isChecked: false
    })}}
  </div>
{% endset %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
{{newAccount.default("", {
  title: "Kwartaalspaarrekening",
  content: [
    contentSwitch,
    contentToggle
  ],
  action: action
})}}