{% load i18n menu_tags cache %}{% spaceless %}
  {% for child in children %}
    {% if child.selected %}
      <a href="{{ child.get_absolute_url }}" class="relative block bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">{{ child.get_menu_title }}</a>
    {% else %}
      <a href="{{ child.get_absolute_url }}" class="relative block text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">{{ child.get_menu_title }}</a>
    {% endif %}
    {% if child.children %}
      <!--
        Dropdown menu, show/hide based on menu state.

        Entering: "transition ease-out duration-100"
          From: "transform opacity-0 scale-95"
          To: "transform opacity-100 scale-100"
        Leaving: "transition ease-in duration-75"
          From: "transform opacity-100 scale-100"
          To: "transform opacity-0 scale-95"
      -->
      <div class="hidden dropdown absolute -bottom-10 start-2 z-10">
        <div class="mt-2 w-48 origin-top-right rounded-md bg-gray-600 py-3 shadow-lg border-solid border-black ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
          {% show_menu from_level to_level extra_inactive extra_active "tailwind/menu.html" "" "" child %}
        </div>
      </div>
    {% endif %}
  {% endfor %}
{% endspaceless %}
