{% comment %}
  Renders a standard dropdown style menu for the header.

  Usage:
  {% render 'header-dropdown-menu' %}
{% endcomment %}

<style>
  .header__inline-menu a {
    text-decoration: none;
  }
</style>

<nav class="header__inline-menu">
  <ul class="list-menu list-menu--inline" role="list">
    {%- for link in section.settings.menu.links -%}
      <li>
        {%- if link.links != blank -%}
          <header-menu>
            <details id="Details-HeaderMenu-{{ forloop.index }}">
              <summary
                id="HeaderMenu-{{ link.handle }}"
                class="header__menu-item list-menu__item link focus-inset"
              >
                <span
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </span>
                {{- 'icon-caret.svg' | inline_asset_content -}}
              </summary>
              <ul
                id="HeaderMenu-MenuList-{{ forloop.index }}"
                class="header__submenu list-menu list-menu--disclosure color-{{ section.settings.menu_color_scheme }} gradient caption-large motion-reduce global-settings-popup"
                role="list"
                tabindex="-1"
              >
                {%- for childlink in link.links -%}
                  <li>
                    {%- if childlink.links == blank -%}
                      <a
                        id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
                        href="{{ childlink.url }}"
                        class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"
                        {% if childlink.current %}
                          aria-current="page"
                        {% endif %}
                      >
                        {{ childlink.title | escape }}
                      </a>
                    {%- else -%}
                      <details id="Details-HeaderSubMenu-{{ link.handle }}-{{ childlink.handle }}">
                        <summary
                          id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
                          class="header__menu-item link link--text list-menu__item focus-inset caption-large"
                        >
                          <span>{{ childlink.title | escape }}</span>
                          {{- 'icon-caret.svg' | inline_asset_content -}}
                        </summary>
                        <ul
                          id="HeaderMenu-SubMenuList-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                          class="header__submenu list-menu motion-reduce"
                        >
                          {%- for grandchildlink in childlink.links -%}
                            <li>
                              <a
                                id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                                href="{{ grandchildlink.url }}"
                                class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}"
                                {% if grandchildlink.current %}
                                  aria-current="page"
                                {% endif %}
                              >
                                {{ grandchildlink.title | escape }}
                              </a>
                            </li>
                          {%- endfor -%}
                        </ul>
                      </details>
                    {%- endif -%}
                  </li>
                {%- endfor -%}
              </ul>
            </details>
          </header-menu>
        {%- else -%}
{%- comment -%} BEGINN DYNAMISCHER ESPACE PRO LINK - MEHRSPRACHIG {%- endcomment -%}
{%- assign link_handle_normalized = link.handle | replace: '_', '-' -%}
{%- if link_handle_normalized == 'espace-pro' or link.url contains '/pages/inscriptions-pros' or link.url contains '/pages/startreseller' or link.url contains '/pages/registrierung-keramik' or link.url contains '/pages/registration-professionals' -%}
  {%- assign current_locale = request.locale.iso_code -%}
  {%- if current_locale == 'de' -%}
    {%- assign reseller_url = '/de/pages/startreseller' -%}
    {%- assign inscriptions_url = '/de/pages/registrierung-keramik-malstudios-keramik-ateliers' -%}
  {%- elsif current_locale == 'en' -%}
    {%- assign reseller_url = '/en/pages/startreseller' -%}
    {%- assign inscriptions_url = '/en/pages/registration-professionals-ceramic-painting-studios' -%}
  {%- else -%}
    {%- assign reseller_url = '/pages/startreseller' -%}
    {%- assign inscriptions_url = '/pages/inscriptions-professionnels-cafe-atelier-peinture-ceramique' -%}
  {%- endif -%}
  <a
    id="HeaderMenu-{{ link.handle }}"
    href="{% if customer and customer.tags contains 'Reseller' %}{{ reseller_url }}{% else %}{{ inscriptions_url }}{% endif %}"
    class="header__menu-item list-menu__item link link--text focus-inset"
    {% if link.current %}
      aria-current="page"
    {% endif %}
  >
    <span
      {%- if link.current %}
        class="header__active-menu-item"
      {% endif %}
    >
      {{- link.title | escape -}}
    </span>
  </a>
{%- else -%}
          <a
            id="HeaderMenu-{{ link.handle }}"
            href="{{ link.url }}"
            class="header__menu-item list-menu__item link link--text focus-inset"
            {% if link.current %}
              aria-current="page"
            {% endif %}
          >
            <span
              {%- if link.current %}
                class="header__active-menu-item"
              {% endif %}
            >
              {{- link.title | escape -}}
            </span>
          </a>
{%- endif -%}
{%- comment -%} ENDE DYNAMISCHER ESPACE PRO LINK - MEHRSPRACHIG {%- endcomment -%}
        {%- endif -%}
      </li>
    {%- endfor -%}
  </ul>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.header__inline-menu details').forEach(function(el) {
      el.addEventListener('mouseover', function() { el.open = true; });
      el.addEventListener('mouseout', function() { el.open = false; });
    });
  });
</script>