{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "styleguides/general/organisms/input-group/input-group-macros.njk" as inputGroup %}

{# ========================================================================= #}
{# :: Settings #}
{# ========================================================================= #}
{% set params = {
  isFullWidth: false,
  styleVendors: [],
  scriptVendors: [],
  scope: "s-input-group"
} %}

{# ========================================================================= #}
{# :: Info #}
{# ========================================================================= #}
{# {% set info %}

{% endset %} #}

{# ========================================================================= #}
{# :: Preview #}
{# ========================================================================= #}
{% set preview %}

  {{inputGroup.default("", {
    label: { text: "Bedrag van / tot" },
    groupClasses: "l-grid l-grid--with-margins",
    items: [
      {
        classes: "l-grid__col-6-12 is-error",
        data: {
          name: "styleguide-input-group-example-1",
          placeholder: "input 1",
          feedback: { text: "This is an error" }
        }
      },
      {
        classes: "l-grid__col-6-12",
        data: {
          name: "styleguide-input-group-example-2",
          placeholder: "input 1"
        }
      }
    ]
  })}}

  {{inputGroup.default("", {
    label: { text: "Bedrag van / tot" },
    groupClasses: "l-grid l-grid--with-margins",
    items: [
      {
        classes: "l-grid__col-4-12 is-error",
        data: {
          name: "styleguide-input-group-example-3",
          placeholder: "input 1",
          feedback: { text: "This is an error" }
        }
      },
      {
        classes: "l-grid__col-4-12",
        data: {
          name: "styleguide-input-group-example-4",
          placeholder: "input 1"
        }
      },
      {
        classes: "l-grid__col-4-12",
        data: {
          name: "styleguide-input-group-example-5",
          placeholder: "input 1"
        }
      }
    ]
  })}}

  {{inputGroup.default("", {
    label: { text: "Bedrag van / tot" },
    groupClasses: "l-grid l-grid--with-margins",
    items: [
      {
        classes: "l-grid__col-3-12 is-error",
        data: {
          name: "styleguide-input-group-example-6",
          placeholder: "input 1",
          feedback: { text: "This is an error" }
        }
      },
      {
        classes: "l-grid__col-3-12",
        data: {
          name: "styleguide-input-group-example-7",
          placeholder: "input 1"
        }
      },
      {
        classes: "l-grid__col-3-12",
        data: {
          name: "styleguide-input-group-example-8",
          placeholder: "input 1"
        }
      },
      {
        classes: "l-grid__col-3-12",
        data: {
          name: "styleguide-input-group-example-9",
          placeholder: "input 1"
        }
      }
    ]
  })}}

{% endset %}

{# ========================================================================= #}
{# :: Code #}
{# ========================================================================= #}
{% set code %}

{{inputGroup.default("", {
    label: { text: "Bedrag van / tot" },
    groupClasses: "l-grid l-grid--with-margins",
    items: [
      {
        classes: "l-grid__col-6-12 is-error",
        data: {
          name: "styleguide-input-group-example-10",
          placeholder: "input 1",
          feedback: { text: "This is an error" }
        }
      },
      {
        classes: "l-grid__col-6-12",
        data: {
          name: "styleguide-input-group-example-11",
          placeholder: "input 1"
        }
      }
    ]
  })}}

{% endset %}