{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{# Atoms #}
{% import "atoms/logo/logo-macros.njk" as logo %}
{% import "atoms/button/button-macros.njk" as button %}
{% import "atoms/hamburger/hamburger-macros.njk" as hamburger %}
{% import "atoms/link/link-macros.njk" as link %}
{% import "atoms/input/input-macros.njk" as input %}
{% import "atoms/breadcrumb/breadcrumb-macros.njk" as breadcrumb %}
{% import "atoms/menu-background/menu-background-macros.njk" as menuBackground %}

{# Molcules #}
{% import "molecules/navigation/navigation-macros.njk" as nav %}
{% import "molecules/list/list-macros.njk" as list %}
{% import "molecules/search/search-macros.njk" as search %}
{% import "molecules/language/language-macros.njk" as language %}
{% import "molecules/mobile-nav/mobile-nav-macros.njk" as mobileNav %}

{# ========================================================================= #}
{# :: DATA #}
{# ========================================================================= #}
{% set data = [
  {
    title: "Over batterijen",
    columns: [
      {
        mainLink: "Recycleren thuis",
        list: ["Zakjes aanvragen", "Inzamelpunt vinden", "Veiligheid bij gebruik", "Inzamelpunt worden", "Tombola"]
      },
      {
        mainLink: "Meer leren",
        list: ["Scholenprogramma", "Educatief downloadcenter", "Batteripedia", "Recyclageproces", "Bezoek aan Villa Pila"]
      }
    ]
  },
  {
    title: "Aanbod voor professionelen & instellingen",
    columns: [
      {
        mainLink: "Inzamelen",
        list: ["Inzamelpunt worden", "Zakjes aanvragen", "Ophaling aanvragen", "Veiligheid bij inzamelen", "Aanvaardingsplicht voor eindverkopers", "Inzamelen op school"]
      },
      {
        mainLink: "Produceren en invoeren",
        list: ["Registreer je onderneming", "Aangifte doen", "Wetgeving", "Aanvaardingsplicht", "Milieubijdragen", "Electrische voertuigen"]
      }
    ]
  },
  {
    title: "Over Bebat",
    columns: [
      {
        mainLink: "Over Bebat",
        list: ["Geschiedenis", "Bebat in cijfers", "Pers", "Campagnes", "Blog", "Onze services"]
      },
      {
        mainLink: "Produceren en invoeren",
        list: ["Contacteer ons", "0800 97 521", "FAQ"]
      }
    ]
  }
] %}

{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes, componentData) %}
<header class="o-header js-o-header {{classes}}">
  <div class="o-overlay o-header__overlay"></div>
  <div class="o-header__background u-tablet-show"></div>

  <div class="l-container o-header__container">
    {{logo.header("o-header__logo")}}

    <div class="o-header__content">
      {{nav.default(
        "o-header__content-item u-tablet-hide",
        data
      )}}

      {{search.default("o-header__content-item")}}

      {{language.default("o-header__content-item u-tablet-hide", [{ classes: "is-active", text: "Nl" }, "Fr", "En"])}}
    </div>

    <div class="o-header__search">
      {{input.search("o-header__search-input u-tablet-hide", {
        label: "Search input",
        name: "styleguide-search-example1"
      })}}
      {{input.search("o-header__search-input u-tablet-show", {
        label: "Search input",
        name: "styleguide-search-example1"
      })}}

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

    {% if componentData.breadcrumb %}
      {{breadcrumb.default("o-header__breadcrumb", "icon-arrow-left", componentData.breadcrumb)}}
    {% endif %}
  </div>

  <div class="o-header__mobile-nav l-container u-tablet-show">
    {{mobileNav.default("", data)}}
  </div>
</header>

{{hamburger.default("u-tablet-show", "default")}}
{{menuBackground.default("o-header__full-background")}}

{% endmacro %}

{# ========================================================================= #}
{# :: INVERTED #}
{# ========================================================================= #}
{% macro inverted(classes, componentData) %}
<header class="o-header o-header--inverted js-o-header {{classes}}">
  <div class="o-overlay o-header__overlay"></div>
  <div class="o-header__background u-tablet-show"></div>

  <div class="l-container o-header__container">
    {{logo.header("o-header__logo a-logo--inverted")}}

    <div class="o-header__content">
      {{nav.default(
        "o-header__content-item m-nav--inverted u-tablet-hide",
        data
      )}}

      {{search.default("o-header__content-item m-search--inverted")}}
      {{language.default("o-header__content-item m-language--inverted u-tablet-hide", [{ classes: "is-active", text: "Nl", url: "http://google.com" }, { classes: "", text: "Fr", url: "http://google.com" }, { classes: "", text: "En", url: "http://google.com" }])}}

    </div>

    <div class="o-header__search">
      {{input.search("o-header__search-input u-tablet-hide", {
        label: "Search input",
        name: "styleguide-search-example1"
      })}}
      {{input.search("o-header__search-input u-tablet-show", {
        label: "Search input",
        name: "styleguide-search-example1"
      })}}

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

    {% if componentData.breadcrumb %}
      {{breadcrumb.default("a-breadcrumb--light o-header__breadcrumb", "icon-arrow-left", componentData.breadcrumb)}}
    {% endif %}
  </div>

  <div class="o-header__mobile-nav l-container u-tablet-show">
    {{mobileNav.default("", data)}}
  </div>
</header>

{{hamburger.default("u-tablet-show", "default")}}
{{menuBackground.default("o-header__full-background")}}

{% endmacro %}