<nav
  class="font-semibold"
  x-data="{ mobOpen: false }"
>
  <!-- Main Menu -->
  <ul
    class="absolute bg-body-bg border-t-1 lg:border-none border-gray-2 lg:border-0 pb-10 lg:pb-0 lg:bg-transparent w-full lg:w-auto lg:!block  lg:static top-16  left-0 right-0 px-2 text-start mt-4 lg:m-0 flex-col items-start lg:flex lg:flex-row lg:items-center lg:gap-2 z-40  transition-all duration-300 [&[x-cloak]]:!hidden"
     :class="{ 'hidden': !mobOpen, 'flex': mobOpen}"
      x-show="true"
      x-transition:enter="transition ease-out duration-200"
      x-transition:enter-start="opacity-0 scale-95"
      x-transition:enter-end="opacity-100 scale-100"
      x-transition:leave="transition ease-in duration-200"
      x-transition:leave-start="opacity-100 scale-100"
      x-transition:leave-end="opacity-0 scale-95"
      x-cloak
  >

    {% for item in nested %}
      <li
        class="relative my-1 lg:m-0 w-full lg:w-fit inline-block"
        x-data="{ open: false }"
        @mouseenter="window.innerWidth >= 1024 ? open = true : null"
        @mouseleave="window.innerWidth >= 1024 ? open = false : null"
        @click="window.innerWidth < 1024 ? open = !open : null"
        @focusin="window.innerWidth >= 1024 ? open = true : null"
        @focusout="window.innerWidth >= 1024 ? open = false : null"
        @click.away="open = false"
        x-on:keydown.escape="open = false"
        @focusout="await $nextTick();!$el.contains($focus.focused()) && (open = false)"
      >
        <!-- Main menu item -->
        <div class="menu_with_icon  pr-5 flex items-center w-full justify-between  hover:text-primary transition-all duration-500  cursor-pointer {% if item.class %}text-primary{% endif %}">
          {# Check if item is a nolink #}
          {% if item.url is empty or item.url.toString() == '<nolink>' %}
            <span class="block w-full pl-5 py-2">
              {{ item.title }}
            </span>
          {% else %}
            <a href="{{ item.url }}" target="{{ item.target }}" class="block w-full pl-5 py-2">
              {{ item.title }}
            </a>
          {% endif %}

          {% if item.children is not empty %}
            <button
              @click="open = !open; $event.stopPropagation();"
              class="whitespace-nowrap w-full rounded flex items-center justify-end cursor-pointer"
              :aria-expanded="open.toString()"
              aria-haspopup="true"
              :aria-controls="'{{ submenuId }}'"
              aria-label="Toggle submenu for {{ item.title }}"
              tabindex="0"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="w-5 h-5 ml-4 transform transition-transform duration-300 bg-gray-400 lg:bg-transparent"
                :class="open ? 'rotate-180' : 'rotate-0'"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </button>
          {% endif %}
        </div>

        <!-- Submenu -->
        {% if item.children is not empty %}
          <ul
            x-show="open"
            x-transition
            class="left-0 top-full mt-1 w-9/10 mx-5 lg:mx-0 lg:w-48 relative lg:absolute bg-gray-200 text-body shadow-lg z-40 border border-gray-400 "
          >
            {{ _self.render_submenu(item.children) }}
          </ul>
        {% endif %}
      </li>
    {% endfor %}
    <li class="md:hidden pl-4 mt-2 list-none relative">
       {% if selected__header_template == 'style2' or selected__header_template == 'style4' or selected__header_template == 'style6' %}
        {{ include('@tailpine/components/navigation/account-menu/account-menu.twig', { items: account_menu }) }}
      {% endif %}
    </li>
  </ul>

  <!-- Mobile Menu Toggle Button -->
  <div class="lg:hidden flex items-center">
    <button
      class="h-6 flex items-center justify-between flex-col gap-0.5 cursor-pointer"
      @click="mobOpen = !mobOpen"
    >
      <div
        class="topLine w-8 h-1 bg-body transition-transform duration-300"
        :class="{ 'rotate-45 translate-y-2': mobOpen }"
      ></div>
      <div
        class="midLine w-8 h-1 bg-body transition-opacity duration-300"
        :class="{ 'opacity-0': mobOpen }"
      ></div>
      <div
        class="bottomLine w-8 h-1 bg-body transition-transform duration-300"
        :class="{ '-rotate-45 -translate-y-3': mobOpen }"
      ></div>
    </button>
  </div>
</nav>

{% macro render_submenu(children) %}
  {% import _self as menus %}
  {% for child in children %}
    <li
      class="relative border- border-body font-medium"
      x-data="{ open: false }"
      @mouseenter="window.innerWidth >= 1024 ? open = true : null"
      @mouseleave="window.innerWidth >= 1024 ? open = false : null"
      @focusin="window.innerWidth >= 1024 ? open = true : null"
      @focusout="window.innerWidth >= 1024 ? open = false : null"
      @click.away="open = false"
      @click="window.innerWidth < 1024 ? open = !open : null"
      @focusout="await $nextTick();!$el.contains($focus.focused()) && (open = false)"
    >
      <div class="pr-3 flex justify-between items-center hover:bg-primary hover:text-body-bg rounded cursor-pointer {% if child.class %}text-primary{% endif %}">
        {# Check if child is a nolink #}
        {% if child.url is empty or child.url.toString() == '<nolink>' %}
          <span class="block w-full px-4 py-2">{{ child.title }}</span>
        {% else %}
          <a href="{{ child.url }}" target="{{ child.target }}" class="block w-full px-4 py-2">{{ child.title }}</a>
        {% endif %}
        {% if child.children is not empty %}
          <button
              @click="open = !open; $event.stopPropagation();"
              class="whitespace-nowrap w-full rounded flex items-center justify-end cursor-pointer"
              :aria-expanded="open.toString()"
              aria-haspopup="true"
              :aria-controls="'{{ submenuId }}'"
              aria-label="Toggle submenu for {{ item.title }}"
              tabindex="0"
            >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="w-4 h-4 transform transition-transform duration-300 bg-gray-400 lg:bg-transparent"
              :class="open ? 'rotate-90' : 'rotate-0'"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </button>
        {% endif %}
      </div>

      {% if child.children is not empty %}
        <ul
          x-show="open"
          x-transition
          @mouseenter="open = true"
          @mouseleave="open = false"
          @focusin="open = true"
          @focusout="open = false"
          @click.away="open = false"
          x-on:keydown.escape="open = false"
          @click="open = !open"
          @focusout="await $nextTick();!$el.contains($focus.focused()) && (open = false)"
          class="left-full top-0 lg:w-48 w-9/10 mx-5 lg:mx-0 lg:absolute bg-gray-200 text-body  shadow-lg z-40 my-2 pb-1 lg:pb-0 lg:my-0 "
        >
          {{ menus.render_submenu(child.children) }}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
{% endmacro %}
