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

{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes) %}
<div class="m-search {{classes}}">
  <div class="m-search__buttons">
    <button class="a-button m-search__button m-search__button--open">
      <span class="a-button__icon a-button__icon--before icon-search"></span>
      <span class="a-button__text">Zoek</span>
    </button>
    <button class="a-button m-search__button m-search__button--close" tabindex="-1">
      <span class="a-button__text">Sluit</span>
      <span class="a-button__icon a-button__icon--after icon-cross"></span>
    </button>
  </div>
</div>

{% endmacro %}

{# ========================================================================= #}
{# :: INVERTED #}
{# ========================================================================= #}
{% macro inverted(classes) %}
<div class="m-search js-m-search {{classes}}">

  <button class="a-button a-button--inverted m-search__button js-m-search__button">
    <span class="a-button__icon a-button__icon--before icon-search"></span>
    <span class="a-button__text">Zoek</span>
  </button>

  <div class="m-search__flyout">

    {{input.search("m-search__flyout__input a-input--inverted", {
      label: "Search input",
      name: "styleguide-search-example1"
    })}}

    {{link.default("m-search__flyout__link icon-location a-link--inverted", "Vind een inzamelpunt in jouw buurt")}}
  </div>
</div>


{% endmacro %}