{% from '../header-search/header-search.njk' import HeaderSearch %}


{% set HEADER_NAV_DEFAULTS = {
  className: '',
  navList: [
    { text: 'Händler', link: '#' },
    { text: 'News', link: '#' },
    { text: 'Jobs', link: '#' },
    { text: 'Vermietung', link: '#' },
    { text: 'Uber uns', link: '#' },
    { text: 'Anfahrt', link: '#' },
    { text: 'FAQS', link: '#' }
  ]
} %}

{% macro HeaderNav(settings = {}) %}
  {% set settings = merge(HEADER_NAV_DEFAULTS, settings) %}

  <nav class="header-nav {{ settings.className }}" x-bind="nav" x-cloak>
    <ul class="header-nav__list">
      {% for item in settings.navList %}
        <li class="header-nav__item">
          {% if loop.first %}
            <span class="header-nav__link">{{ item.text }}</span>
          {% else %}
            <a href="{{ item.link or '#' }}" class="header-nav__link">{{ item.text }}</a>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
    <div class="header-nav__actions">
      <a href="#" class="header-nav__action">
        {{ Helpers.svg('icons/globe') }}
        <span>English</span>
      </a>
      <span class="header-nav__action">
            {{ Helpers.svg('icons/check-cloud') }}
            <span>Einfache Sprache</span>
          </span>
    </div>
    {{ HeaderSearch({
      className: 'header-nav__search'
    }) }}
    <div class="header-nav__mobile-actions">
      <a href="#" class="header__top-action">
        {{ Helpers.svg('icons/globe') }}
        <span>English</span>
      </a>
      <span class="header__top-action">
          {{ Helpers.svg('icons/check-cloud') }}
          <span>Einfache Sprache</span>
        </span>
    </div>
  </nav>
{% endmacro %}

{% set HEADER_NAV_TRIGGER_DEFAULTS = {
  className: ''
} %}

{% macro HeaderNavTrigger(settings = {}) %}
  {% set settings = merge(HEADER_NAV_TRIGGER_DEFAULTS, settings) %}

  <button type="button" class="header-nav-trigger {{ settings.className }}" x-bind="navTrigger">
    <span class="header-nav-trigger__icon">
      <span></span>
      <span></span>
      <span></span>
    </span>
    <span class="sr-only">Toggle Menu</span>
  </button>
{% endmacro %}