{# ========================================================================= #}
{# :: 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/card/card-macros.njk" as card %}
{% import "styleguides/general/molecules/list/list-macros.njk" as list %}

{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes, data) %}

  {# Content switch #}
  {# -------------------------------------------------------------- #}
  {% 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-default",
      labelOn: "Variabel rente",
      labelOff: "Vast rente"
    })}}
  {% endset %}

  {# Content toggle #}
  {# -------------------------------------------------------------- #}
  {% 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 %}

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

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

  {# Card component #}
  {# -------------------------------------------------------------- #}
  {{card.default("m-new-account " + classes , data or {
    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"
      }),
      contentToggle
    ],
    action: action
  })}}

{% endmacro %}

{# ========================================================================= #}
{# :: Disabled #}
{# ========================================================================= #}
{% macro disabled(classes, data) %}

  {# Content switch #}
  {# -------------------------------------------------------------- #}
  {% 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.defaultDisabled("", {
      id: "switch-disabled",
      labelOn: "Variabel rente",
      labelOff: "Vast rente"
    })}}
  {% endset %}

  {# Card component #}
  {# -------------------------------------------------------------- #}
  {{card.default("is-disabled " + classes, data or {
    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: button.defaultDisabled("m-card__action-button", { text: "Deze rekening openen" })
  })}}

{% endmacro %}