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

{# molecules #}
{% import "styleguides/general/molecules/button-group/button-group-macros.njk" as buttonGroup %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
<div class="l-section p-settings__tabs">
  <div class="l-container">
    <form class="l-form">
      <div class="l-form__grid l-grid l-grid--with-margins">

        <fieldset class="l-form__fieldset l-grid__col-6-12">
          <legend class="l-form__fieldset-title u-tablet-hide">Jan Bogaerts</legend>

          <div class="l-form__grid l-grid l-grid--with-margins">
            {{input.text("l-grid__col-12-12", {
              label: "E-mail adres",
              tooltip: { text: "This is some extra information" },
              name: "email",
              placeholder: "E-mail address"
            })}}

            {{input.tel("l-grid__col-12-12", {
              label: "Telefoonnummer",
              tooltip: { text: "This is some extra information" },
              name: "telefphone",
              placeholder: "+31 459 65 45 32"
            })}}
          </div>
        </fieldset>

        <fieldset class="l-form__fieldset l-grid__col-6-12">
          <legend class="l-form__fieldset-title">Adres</legend>

          <div class="l-form__grid l-grid l-grid--with-margins">
            {{input.text("l-grid__col-12-12", {
              label: "Straat",
              name: "street",
              placeholder: "Stationstraat"
            })}}

            {{input.tel("l-grid__col-12-12", {
              label: "Huisnummer",
              name: "number",
              placeholder: "48 B006"
            })}}

            {{input.tel("l-grid__col-12-12", {
              label: "Gemeente",
              name: "city",
              placeholder: "2490 Den Haag"
            })}}
          </div>
        </fieldset>

      </div>

      <div class="l-form__submit l-form__submit--align-right u-tablet-hide">
        {{buttonGroup.default("", {
          items: [
            button.linkDisabled("a-button--outline", { text: "Annuleren" }),
            button.buttonAsSubmitDisabled("icon-checkmark a-button--icon-after", { text: "Opslaan" })
          ]
        })}}
      </div>

      <div class="l-form__submit u-tablet-show">
        {{buttonGroup.default("m-button-group--vertical", {
          items: [
            button.buttonAsSubmitDisabled("icon-checkmark a-button--icon-after", { text: "Opslaan" }),
            button.linkDisabled("a-button--outline", { text: "Annuleren" })
          ]
        })}}
      </div>
    </form>
  </div>
</div>