{# ========================================================================= #}
{# :: IMPORTS #}
{# ========================================================================= #}
{% import "atoms/input/input-macros.njk" as input %}
{% import "atoms/link/link-macros.njk" as link %}
{% import "molecules/list/list-macros.njk" as list %}

{# ========================================================================= #}
{# :: QUESTION #}
{# ========================================================================= #}
<section class="m-section m-section--grey m-section--spacing-large l-split">
  <div class="m-section__container l-container">

    <div class="l-split__col-5-12 l-split__content">
      <header class="m-section__header">
        <h2>Heb jij een vraag?</h2>
      </header>

      <div class="m-section__content">
        {{input.search("a-input--light", {
            label: "Wat zoek je?",
            name: "styleguide-search-example1"
        })}}

        {{list.withLinks("m-list--question", [
          { classes: "a-link icon-arrow-right", text: "Waar kan ik inzamelzakjes vinden?" },
          { classes: "a-link icon-arrow-right", text: "Waar kan ik met mijn zakjes terecht?" },
          { classes: "a-link icon-arrow-right", text: "Kunnen we Bebat bezoeken?" },
          { classes: "a-link icon-arrow-right", text: "Welke batterijen mogen scholen inzamelen?" }
        ])}}
      </div>

      <footer class="m-section__footer">
        {{button.link("u-mobile-hide", {
          text: "Bekijk alle vragen",
          icon: {before: "icon-arrow-right"}
        })}}
        {{link.default("icon-arrow-right u-mobile-show", "Bekijk alle vragen")}}
      </footer>
    </div>

    <div class="l-split__col-7-12 l-split__image">
      <div class="m-section__image m-section__image--as-bg">
        <img
			class="m-section__image-visual"
			src="/assets/images/mock/map.jpg"
			width="840"
			height="662"
			alt="map"
			loading="lazy"
		/>
      </div>
    </div>

  </div>
</section>