{# ========================================================================= #}
{# :: IMPORTS #}
{# ========================================================================= #}
{% import "atoms/input/input-macros.njk" as input %}
{% import "atoms/loader/loader-macros.njk" as loader %}
{% import "atoms/tag/tag-macros.njk" as tag %}
{% import "atoms/button/button-macros.njk" as button %}
{% import "molecules/search-result/search-result-macros.njk" as searchResult %}

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

  <div class="m-search-bar m-collapse js-m-collapse-searchbar {{classes}}" data-is-root="true">

    <div class="m-collapse__header m-search-bar__header">
      {{input.search("m-search-bar__input", {
        label: "Search input",
        name: "styleguide-search-example1"
      })}}
    </div>

    <div class="m-collapse__content m-search-bar__content">
      <div class="m-collapse__content__container m-search-bar__content__container">
        <div class="m-search-bar__results">
          {{searchResult.default("", {
            title: "Reglement k3 inzamelactie",
            text: "... uitgebreid worden naar externen. Het concert en /of andere prijzen zijn op geen enkel moment overdraagbaar aan derden, noch aan andere ... de toegang tot of het bijwonen van het concert en/of andere prijzen. VTMKZOOM regelt de organisatorische kant zoals opbouw, artiesten, ...", 
            tag: tag.default("", "Scholen")
          })}}
          {{searchResult.default("", {
            title: "Reglement k3 inzamelactie",
            text: "... uitgebreid worden naar externen. Het concert en /of andere prijzen zijn op geen enkel moment overdraagbaar aan derden, noch aan andere ... de toegang tot of het bijwonen van het concert en/of andere prijzen. VTMKZOOM regelt de organisatorische kant zoals opbouw, artiesten, ...", 
            tag: tag.default("", "Scholen")
          })}}
          {{searchResult.default("", {
            title: "Reglement k3 inzamelactie",
            text: "... uitgebreid worden naar externen. Het concert en /of andere prijzen zijn op geen enkel moment overdraagbaar aan derden, noch aan andere ... de toegang tot of het bijwonen van het concert en/of andere prijzen. VTMKZOOM regelt de organisatorische kant zoals opbouw, artiesten, ...", 
            tag: tag.default("", "Scholen")
          })}}
        </div>

        {{button.default("m-search-bar__button", {
          text: "Bekijk de resultaten",
          icon: {after: "icon-arrow-right"}
        })}}
      </div>
    </div>

  </div>
{% endmacro %}

{# ========================================================================= #}
{# :: Loading #}
{# ========================================================================= #}
{% macro loading(classes) %}

  <div class="m-search-bar m-collapse js-m-collapse-searchbar is-open {{classes}}" data-is-root="true">

    <div class="m-collapse__header m-search-bar__header">
      {{input.search("m-search-bar__input", {
        label: "Search input",
        name: "styleguide-search-example1"
      })}}
    </div>

    <div class="m-collapse__content m-search-bar__content">
      <div class="m-collapse__content__container m-search-bar__content__container">
        <div class="m-search-bar__results">
          {{loader.simple("", {})}}
      </div>
    </div>

  </div>
{% endmacro %}